Question

我有一个HTML页面。我使用视频标签在线播放视频我用了两个视频标签，但是，当我播放两个视频时，那么这两个视频同时播放

我想要一个解决方案，如果我播放一个视频，然后点击第二个视频，那么第一个应该暂停，第二个开始播放。任何帮助将不胜感激。

Answer 1

Vanilla js在这里。

var videos = document.querySelectorAll('video');
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);


function pauseAll(elem){
	for(var i=0; i<videos.length; i++){
		//Is this the one we want to play?
		if(videos[i] == elem) continue;
		//Have we already played it && is it already paused?
		if(videos[i].played.length > 0 && !videos[i].paused){
		// Then pause it now
		  videos[i].pause();
		}
	}
  }

<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"></source>
  <source type="video/mp4" src="http://video.webmfiles.org/big-buck-bunny_trailer.mp4"></source>
</video>


<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm" src="http://video.webmfiles.org/elephants-dream.webm"></source>
  <source type="video/mp4" src="https://archive.org/download/ElephantsDream/ed_hd.mp4"></source>
</video>

Answer 2

您需要监控视频的"play"事件，当它触发时，您停止其他视频。这样，当你以任何方式播放一个视频时，另一个将停止：

$(function(){
    $("#video1").on("play",function(){
        $("#video2").trigger("pause");
    });
    $("#video2").on("play",function(){
        $("#video1").trigger("pause");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video1" width="300" controls="" onplay="Vid1()">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

<video id="video2" width="300" controls=""><br>
  <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"><br>
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"><br>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><br>
  <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"><br>
</video>

Answer 3

一个简单的解决方案是使用javascript。将播放绑定应用于视频标记。在那暂停所有其他视频

$('video').bind('play', function (e) 
{
    var video = $('video');
    for(var i=0;i<video.length;i++)
    {
        if(video[i] != e.target)
        {
           video[i].pause();
        }
    }
});

不确定，但希望它适合你

Answer 4

添加

onplay="stopOtherMedia(this)"

在所有音频和视频标签上

function stopOtherMedia(element) {
    $("audio").not(element).each(function(index, audio) {
        audio.pause();
    });

    $("video").not(element).each(function(index, video) {
        video.pause();
    });

}

Answer 5

 // AUTO STOP WHEN CURRENT VIDEO IS PLAYING..

//JAVASCRIPT

    document.addEventListener('play', function(e){
      var videos = document.getElementsByTagName('video');
      for(var i = 0, len = videos.length; i < len;i++){
          if(videos[i] != e.target){
              videos[i].pause();
          }
      }
    }, true);
    
  ///REACT
  
 // componentDidMount() {
  //  document.addEventListener('play', function(e){
    //  var videos = document.getElementsByTagName('video');
   //   for(var i = 0, len = videos.length; i < len;i++){
     //     if(videos[i] != e.target){
      //        videos[i].pause();
      //    }
   //   }
  //  }, true);
    
 // }

<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm"   src="https://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>


<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm"   src="https://archive.org/download/ElephantsDream/ed_hd.mp4"></source>
</video>

在html页面上一次播放一个视频

5 个答案: