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

如何解决单击另一个视频时停止视频

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

<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>

我试过听在线课程，但没有奏效：

<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>

解决方法

这是一个使用 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>

如果您只想让一个视频在播放另一个视频时暂停，这可能会有所帮助。 注意：除了视频的高度和宽度之外，我没有使用任何样式。此代码依赖于 来自 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，我不对其负责。

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

theory => 对所有视频标签做一个 .each

以下代码：当您单击“播放”=> 时，它会暂停正在播放的其他视频

喜欢这个

<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>