html禁止视频弹窗,基于video弹窗视频播放代码

使用方法：

1、head引入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; }

2、head引入js文件

3、body引入HTML代码

视频一

2018-06-22

视频一

2018-06-22

$('.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("");

$('.videos').show();

});

});

function close1(){

var v = document.getElementById('video');//获取视频节点

$('.videos').hide();//点击关闭按钮关闭暂停视频

v.pause();

$('.videos').html();

}