Question

我有一个包含两个视频的页面，两个视频一起播放。我正在做的是我正在播放一个视频而我正在播放另一个视频而不会暂停之前的视频。现在，我想要的是，当我们开始播放另一个视频时，应暂停之前的视频。请帮助解决这个问题。这应该是标记......

Answer 1

<强> HTML

<video class="video" autobuffer controls>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
</video>
<video class="video" autobuffer controls>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
</video>

<强>的jQuery

$('.video').on('play', function () {
    $('.video').not($(this).get(0)).each(function () {
        $(this).get(0).pause(); //Stops all videos except the current
    });
});

DEMO jQuery

没有jQuery

//add Event listener for all videos
var videos = document.getElementsByClassName('video');
for(var i = 0; i < videos.length; i++){
    videos[i].addEventListener('playing', function(){ //on "play"...
        controlVideos(this);  //..call controlVideos
    });
};

function controlVideos(current){
  for(var i = 0; i < videos.length; i++){
      if( videos[i] != current) videos[i].pause();  //stop video if it's not the current 
  }
}

DEMO without jQuery

在javascript中开始播放另一个视频时控制一个视频

1 个答案: