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

Play one video at a time on html page

本文关键字：一个 视频 播放 html 上一次      更新时间：2023-09-26

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

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

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

一个简单的解决方案是使用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();
        }
    }
});

不确定，但希望它对您有用

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

您需要

监视视频的"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>

添加 

onplay="stopOtherMedia(this)"

在所有音频和视频标签上

function stopOtherMedia(element) {
    $("audio").not(element).each(function(index, audio) {
        audio.pause();
    });
    $("video").not(element).each(function(index, video) {
        video.pause();
    });
}
相关文章：