且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-12-27 14:40:56

Vanilla js here。

Vanilla js here.

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>