videojs 视频列表播放一个,其他暂停缩略图

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>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注