单击另一个视频时停止视频答案

【问题标题】：Stop a video when another one is clicked单击另一个视频时停止视频
【发布时间】：2021-07-06 07:07:05
【问题描述】：

我在同一页面上有两个本地托管的视频。我试图在单击另一个时停止，但它不起作用。

<div class="banner has-hover has-video is-full-height is-selected" id="banner-1353813713" style="position: absolute; left: 0%;">
    <div class="banner-inner fill">
    <div class="banner-bg fill">
    <div class="bg fill bg-fill "></div>

    <div class="video-overlay no-click fill visible"></div>
    <video class="video-bg fill visible" preload="" playsinline="" autoplay="" muted="" loop=""> <source src="https://www.exampledomain/video1.mp4" type="video/mp4"></video> </div>
    <div class="banner-layers container">
    <div class="fill banner-link"></div>            
    <div id="text-box-585511097" class="text-box banner-layer x10 md-x10 lg-x10 y35 md-y35 lg-y35 res-text">
    <div class="text-box-content text dark">
    <div class="text-inner text-center">
    <a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
    <span>View Video</span> </a>
    <a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
    <span>Offers</span></a>

    <div class="video-button-wrapper" style="font-size:70%"><a href="https://www.exampledomain/video2.mp4" class="button open-video icon circle is-outline is-xlarge"><i class="icon-play" style="font-size:1.5em;"></i></a></div>
        
        <p>Click to view full video</p>
        
                      </div>
                   </div>

我试过听onlick的课程，但没有奏效：

<script>
        $(".video-bg fill visible").on("click", function() {
    
        // All but not this one - pause
        $(".video-bg fill visible").not( this ).each(function() {
             this.pause();
        });
    
        // Play this one
        // this.play();
    
        // Or rather toggle play / pause
        this[this.paused ? "play" : "pause"]();
    
    });
</script>

【问题讨论】：

$(".video-bg fill visible") 不起作用。您需要$(".video-bg.fill.visible") 您的选择器正试图在<fill> 内的<fill> 内找到<visible> class="video-bg"
你可以在这个链接stackoverflow.com/questions/54376507/…找到你的答案
(1) 答案必须在 JQuery 中还是也可以是常规 JS？ (2) 那么video1 应该在页面上暂停/停止，而video2 在新页面选项卡中打开，这是您的预期结果吗？ (3) 您是否尝试过@AT-D 评论中显示的答案选项？
@VC.One 1. 是的，它可以在常规 JS 中。 2. 视频 1 应该暂停/停止，而视频 2 以灯箱格式打开。 3.我还没有尝试过AT-D的评论。

标签： javascript html jquery video

【解决方案1】：

这是一个使用 vannila JS 的简单 POC，依赖于 play 事件。您也可以使用load() 代替pause() 从头开始播放视频（而不是只是暂停）。

参考https://www.w3schools.com/tags/ref_av_dom.asp

// assume only one video is playing at a time
var videoPlaying = null;

const onPlay = function() {
  if (videoPlaying && videoPlaying != this) {
    videoPlaying.pause()
  }
  videoPlaying = this
}

// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
  videos[i].addEventListener("play", onPlay)
}

<video id="video-1" class="video-bg" width="320" height="240" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video id="video-2" class="video-bg" width="320" height="240" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

【讨论】：

【解决方案2】：

如果您只希望一个视频在播放另一个视频时暂停，这可能会有所帮助。 注意：除了视频的高度和宽度，我没有使用任何样式。此代码依赖于 来自 html 的 onplay 调用 和 pause()

function playVideo1() {
  document.getElementById('video2').pause();
}

function playVideo2() {
  document.getElementById('video1').pause();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Stop either</title>
  <style>
    #video1 {
      height: 200px;
      width: 200px;
      float: left;
    }
    
    #video2 {
      height: 200px;
      width: 200px;
      float: right;
    }
  </style>
</head>

<body>
  <video controls id="video1" onplay="playVideo1();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></video>

  <video controls id="video2" onplay="playVideo2();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"></video>

  <script type="text/javascript" src="a.js"></script>
</body>

</html>

视频来自here 和here 我不对他们负责。

【讨论】：

【解决方案3】：

您好，测试了一个理论，但您必须创建按钮来播放/暂停

theory => 对所有视频标签执行 .each

下面的这段代码：当你点击 PLAY => 如果它正在播放，它将暂停另一个视频

喜欢这个

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" ></script>
<script>
    function pause_all_videos () { $("video").each(function() { this.pause(); }); }
    function playonly (vid) { pause_all_videos(); document.getElementById(vid).play(); }
</script>
<style>
    div{padding:3px;margin:3px;}
</style>

<div>
    <video id="v1" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" ></video>
    <div><span onclick="playonly('v1');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
<hr>
<div>
    <video id="v2" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" ></video>
    <div><span onclick="playonly('v2');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>

【讨论】：