我有一个 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)