>网页365足球投注网站 >悬浮层/弹出层 >jQuery+html5 video点击弹窗播放视频代码

jQuery+html5 video点击弹窗播放视频代码

来源:/js/4424.html 2019-06-12 12:14浏览(1067) 收藏

jQuery+html5 video制作的一款简洁实用的点击弹窗播放视频代码,点击视频缩略图弹窗方式打开mp4视频播放。
分类:悬浮层/弹出层 > 弹窗 难易:中级
登录后点击“下载资源”按钮,复制链接,邀请好友免费下载
查看演示 下载资源: 21

手机扫码访问:

下载资源 下载积分: 30 积分

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>
评论0

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

1 2
jQuery+html5 video点击弹窗播放视频代码
我的积分余额: 0 已下载次数: 21
所需积分:30 开始下载
jQuery+html5 video点击弹窗播放视频代码
在江湖混,帮好友砍一刀吧