使用js实现多个video,一个播放其他暂停

html

 <div class="videoContent">
	 <div class="videoMod">
	    <h3>海贼王:路飞成功收编小弟,草帽海贼团全员都在聆听他的誓言!h3>
	    <video src="./video/video1.mp4" controls >您的浏览器不支持 video 标签。video>
	  div>
	  <div class="videoMod">
	    <h3>海贼王:索隆大大精彩时刻,一个永远不会喊痛的男人!h3>
	    <video src="./video/video2.mp4"  controls >您的浏览器不支持 video 标签。video>
	  div>
	  <div class="videoMod">
	    <h3>海贼王:“顶上战争”精彩的对决,让人热血沸腾的画面!h3>
	    <video src="./video/video3.mp4"  controls >您的浏览器不支持 video 标签。video>
	  div>
div>

js

window.onload=function(){
    var videos = document.getElementsByTagName('video');//获取所有video
    //循环给所有video添加监听事件 当前的video开始播时  调用pauseAll 将当前播放的video的索引传值过去
    for (var i = videos.length - 1; i >= 0; i--) {
        (function(n){
            videos[n].addEventListener('play',function(){
                pauseAll(n);
            })
        })(i)
    }
    //接收调用传来的索引 循环所有video 索引与传来的索引不相同的 暂停 重载
    function pauseAll(index){
        for (var j = videos.length - 1; j >= 0; j--) {
            if (j!=index){
                videos[j].pause();
                videos[j].load();
            }
        }
    };

}

你可能感兴趣的:(HTML5,javascript,js,video,视频)