点击弹窗播放视频
1.效果
播放后的效果
2.代码演示
<!DOCTYPE html>
<!-- saved from url=(0043)https://www.js-css.cn/jscode/other/other73/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery+video实现点击播弹窗放视频功能</title><!--主要样式-->
<style type="text/css">
body{background-color: #222}
.videolist { position:relative; float:left; width:500px; height:300px; margin-right:50px; margin-top:15px; margin-bottom:30px; }
.videolist:hover{ cursor: pointer; }
.videoed { display:none; width:50px; height:50px; position: absolute; left:45%; top:45%; z-index:99; border-radius:100%; }
.videos{ display:none; border: 1px solid #080808; position:fixed; left:50%; top:50%; margin-left:-320px; margin-top:-210px; z-index:100; width:640px; height:360px; }
.vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }
</style></head>
<body><div class="video"><div class="container" style="margin-top: 100px"><div class="videolist" vpath="v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4"><div class="vtit">视频一</div><img src="v1.jpg" width="540px" height="300px"><div class="vtime">2018-06-22</div><img src="play.png" class="videoed" style="display: none;"></div><div class="videolist" vpath="v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4"><div class="vtit">视频一</div><img src="v2.jpg" width="540px" height="300px"><div class="vtime">2018-06-22</div><img src="play.png" class="videoed" style="display: inline;"></div><div class="videos"></div></div>
</div><script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('.videolist').each(function(){ //遍历视频列表$(this).hover(function(){ //鼠标移上来后显示播放按钮$(this).find('.videoed').show();},function(){$(this).find('.videoed').hide();});$(this).click(function(){ //这个视频被点击后执行var img = $(this).attr('vpath');//获取视频预览图var video = $(this).attr('ipath');//获取视频路径$('.videos').html("![](\"img/gb.png\")
");$('.videos').show();});
});function close1(){var v = document.getElementById('video');//获取视频节点$('.videos').hide();//点击关闭按钮关闭暂停视频v.pause();$('.videos').html();
}
</script></body></html>
3.注意事项
因为上面有些地方引用了图片，所以我将图片的原始大小上传到了这里，如果需要直接复制应该就可以了
这是第一张
这是第二张（注意这张有些透明，可能看不清楚）
这是第三张
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！