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();
}
}
};
}
<ul class="index-list">
<li>
<div class="index-box">
<div class="index-pic">
<video id="v0" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="images/picc.png"
data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<div class="p-n">编号:88</div>
</div>
<div class="box-grid">
<div class="title"><a href="">某某某单位</a></div>
<div class="play-n"><span class="n">5636</span>播放量</div>
<div class="btn-foot">
<button class="btn btn-thumb"><span class="iconfont icon-dianzan_kuai"></span><span class="n">1523</span></button>
<button class="btn btn-share"><span class="iconfont icon-fenxiang"></span><span>分享</span></button>
</div>
</div>
</div>
</li>
<li>
<div class="index-box">
<div class="index-pic">
<video id="v1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="images/picc.png"
data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<div class="p-n">编号:88</div>
</div>
<div class="box-grid">
<div class="title"><a href="">某某某单位</a></div>
<div class="play-n"><span class="n">5636</span>播放量</div>
<div class="btn-foot">
<button class="btn btn-thumb"><span class="iconfont icon-dianzan_kuai"></span><span class="n">1523</span></button>
<button class="btn btn-share"><span class="iconfont icon-fenxiang"></span><span>分享</span></button>
</div>
</div>
</div>
</li>
<li>
<div class="index-box">
<div class="index-pic">
<video id="v2" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="images/picc.png"
data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<div class="p-n">编号:88</div>
</div>
<div class="box-grid">
<div class="title"><a href="">某某某单位</a></div>
<div class="play-n"><span class="n">5636</span>播放量</div>
<div class="btn-foot">
<button class="btn btn-thumb"><span class="iconfont icon-dianzan_kuai"></span><span class="n">1523</span></button>
<button class="btn btn-share"><span class="iconfont icon-fenxiang"></span><span>分享</span></button>
</div>
</div>
</div>
</li>
<li>
<div class="index-box">
<div class="index-pic">
<video id="v3" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="images/picc.png"
data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<div class="p-n">编号:88</div>
</div>
<div class="box-grid">
<div class="title"><a href="">某某某单位</a></div>
<div class="play-n"><span class="n">5636</span>播放量</div>
<div class="btn-foot">
<button class="btn btn-thumb"><span class="iconfont icon-dianzan_kuai"></span><span class="n">1523</span></button>
<button class="btn btn-share"><span class="iconfont icon-fenxiang"></span><span>分享</span></button>
</div>
</div>
</div>
</li>
<li>
<div class="index-box">
<div class="index-pic">
<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="images/picc.png"
data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<div class="p-n">编号:88</div>
</div>
<div class="box-grid">
<div class="title"><a href="">某某某单位</a></div>
<div class="play-n"><span class="n">5636</span>播放量</div>
<div class="btn-foot">
<button class="btn btn-thumb"><span class="iconfont icon-dianzan_kuai"></span><span class="n">1523</span></button>
<button class="btn btn-share"><span class="iconfont icon-fenxiang"></span><span>分享</span></button>
</div>
</div>
</div>
</li>
<li>
<div class="index-box">
<div class="index-pic">
<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="images/picc.png"
data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<div class="p-n">编号:88</div>
</div>
<div class="box-grid">
<div class="title"><a href="">某某某单位</a></div>
<div class="play-n"><span class="n">5636</span>播放量</div>
<div class="btn-foot">
<button class="btn btn-thumb"><span class="iconfont icon-dianzan_kuai"></span><span class="n">1523</span></button>
<button class="btn btn-share"><span class="iconfont icon-fenxiang"></span><span>分享</span></button>
</div>
</div>
</div>
</li>
</ul>