jQuery+html5 video點擊彈窗播放視頻代碼

來源:http://www.xdpitk.live/js/4424.html 2019-06-12 12:14瀏覽(1236) 收藏

jQuery+html5 video制作的一款簡潔實用的點擊彈窗播放視頻代碼,點擊視頻縮略圖彈窗方式打開mp4視頻播放。
jQuery+html5 video點擊彈窗播放視頻代碼
分類:懸浮層/彈出層 > 彈窗 難易:中級
查看演示 下載資源: 23

手機掃碼訪問:

下載資源 下載積分: 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 416148489

1 2
重庆百变王牌app