首先在页面上放一个视频列表版块
下面放置视频弹窗DIV,弹窗DIV默认隐藏,当点击列表视频时播放,再次点击页面关闭视频并停止播放,点击切换其他视频自动从0开始播放。
实现原理剖析:
1、给列表里的video添加data-src存放视频地址
2、添加一个视频弹窗DIV,设置样式
3、jquery点击事件,自动获取列表里的视频链接并赋值到弹窗DIV里
4、jquery成功获取,点击视频后的黑色透明蒙版自动关闭并停止视频播放
5、再次点击,视频从0开始重新播放
步骤:
首先在页面上放一个视频列表版块
<div class="index-video">
<div class="container">
<ul class="row">
<li class="col-xs-6 play">
<video src="/web/video/demo1.mp4" preload="auto" class="video-src" data-src="/web/video/demo1.mp4"></video>
</li>
<li class="col-xs-6 play">
<video src="/web/video/demo2.mp4" preload="auto" class="video-src" data-src="/web/video/demo2.mp4"></video>
</li>
<li class="col-xs-6 play">
<video src="/web/video/demo1.mp4" preload="auto" class="video-src" data-src="/web/video/demo1.mp4"></video>
</li>
<li class="col-xs-6 play">
<video src="/web/video/demo2.mp4" preload="auto" class="video-src" data-src="/web/video/demo2.mp4"></video>
</li>
</ul>
</div>
</div>
<div class="video-box">
<video id="video" src="/" controls>
您的浏览器不支持 video 标签。
</video>
</div>
然后添加css样式
.video-box {
position: fixed;
top: 0;
left: 0;
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
z-index: 999;
padding: 0 20px;
}
.video-box video {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50%;
margin-top: -100px;
width: 100%;
max-width: 100%;
height: 200px;
}
给列表视频添加点击事件和视频播放停止控制的API
此处的视频地址获取来自列表里的data-src里的视频地址
<script>
// 视频弹窗播放
$(function(){
$(".play").click(function(){
//此处写点击触发的操作
$(".video-box").show();
var src1 = $(this).children(".video-src").data("src");
$(".video-box video").attr("src",src1);;
//1、取得播放器的对象
var video=$('#video').get(0);
//2、调用视频播放API
video.play();
//视频停止API
//objVideo.pause();
});
$(".video-box").click(function(){
video.pause();
$(this).css("display","none");
});
$(".video-box video").click(function(){
return false;
});
});
</script>