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

Question

我有一个HTML页面.我使用视频标签在线播放视频我使用了两个视频标签,但是当我播放两个视频时,两个视频同时播放

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

Answer 1

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