jQuery+html5 video制作的一款简洁实用的点击弹窗播放视频代码,点击视频缩略图弹窗方式打开mp4视频播放。
js代码
<script type="text/javascript" src="js/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("<video id=\"video\" poster='"+img+"' style='width: 640px' src='"+video+"' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"img/gb.png\" width=\"25\" height=\"25\"/>");
$('.videos').show();
});
});
function close1(){
var v = document.getElementById('video');//获取视频节点
$('.videos').hide();//点击关闭按钮关闭暂停视频
v.pause();
$('.videos').html();
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791