jQuery mp4視頻播放器插件

video基于jsmodern.js網(wǎng)頁視頻播放插件，這是一款簡單的mp4視頻播放器，帶時(shí)間進(jìn)度條，音量、全屏、暫停/播放按鈕等功能。支持點(diǎn)擊視頻暫停/播放效果。

使用方法：

1、head引入css文件

<!--封裝好的視頻布局樣式-->
<link rel="stylesheet" href="css/jsmodern.min.css">

<style>
#video {
	width: 970px;
	height: 594px;
	margin: 0 auto;
	position: relative;
}

#video video {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.VideoBtn {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 70px;
	height: 70px;
	margin-left: -35px;
	margin-top: -35px;
	cursor: pointer;
	z-index: 10;
}
</style>

2、head引入js文件

<script src="js/jquery.min.js"></script>

<!--mp4視頻插件-->
<script src="js/jsmodern.min.js"></script>

3、body引入HTML代碼

<div id="video">
	<video src="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4" id="videoShow"></video>
	<span class="VideoBtn"><img src="images/bo1.png"></span>
</div>

<!--視頻插件調(diào)用方法-->
<script>
$(function () {
	//視頻
	jsModern.video("#video");
	//播放視頻
	$(".VideoBtn").click(function () {
		var video = document.getElementById("videoShow");
		video.play();
		$('.VideoBtn').hide();
	})
	//監(jiān)聽視頻的播放狀態(tài)
	var video = document.getElementById("videoShow");
	video.oncanplay = function () {
		$(".VideoBtn").show();
		//$("#video").attr("poster","");
	}
	//視頻播放事件
	video.onplay = function () {
		$("#videoShow").attr("poster", "");
		$(".VideoBtn").hide();
	};
	video.onplaying = function () {
		$(".VideoBtn").hide();
	};

	//視頻暫停事件
	video.onpause = function () {
		$(".VideoBtn").show();
	};
	//點(diǎn)擊視頻周圍暫停播放圖片出現(xiàn)
	video.onclick = function () {
		if (video.paused) {
			$(".VideoBtn").hide();
			video.play();
		} else {
			$(".VideoBtn").show();
			video.pause();
		}
	};
})
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個(gè)人非盈利用途，織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

查看演示下載資源

1527 21899 76