• 微信号:Zh-y9213
您当前的位置:爱资源分享网 > > 网站源码 > 网页特效

jQuery点击弹出视频播放器代码

栏目:网页特效时间:2021-06-17 22:34阅读数:40人阅读
一款简单的jQuery点击弹出视频播放器代码,点击弹窗方式打开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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com