html5视频播放器，试看，开始，暂停，缓存，开始图片显示，加速，关闭

最新推荐文章于 2024-07-23 03:56:56 发布

beichen3997

最新推荐文章于 2024-07-23 03:56:56 发布

阅读量7.3k

点赞数 3

分类专栏： html5

本文链接：https://blog.csdn.net/beichen3997/article/details/88845487

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#durationbar{
		width: 500px;
		height: 20px;
	}
	#durationbar progress{
		width: 100%;
		height: 100%;
	}
	.list{
		position:absolute;
		width:100%;
		height:100%;
		display: none;
		top:0;
		left:0;
		z-index: 999;
	}
	</style>
</head>
<body>
	<div>
		<div style="position:relative;width:800px;height:500px;">
			<video id="videoSource" width="800px" height="500px" loop poster="img/huiyuan.png">
				<source src="css/test.mp4" type="video/mp4">
				<track src="css/en_track.text" srclang="en" label="English" kind="caption" default>  
				<track src="css/en_track.text" srclang="zh-cn" label="简体中文" kind="caption">  
			</video>
			<img id="img" src="img/huiyuan.png" alt="" width="500px" class="list" >
		</div>
		
		
		
		<div id="durationbar">
			<progress id="positionBar" value="0" max="100"></progress>
		</div>
	</div>
	<button id="start">开始</button>
	<button id="end">停止</button>
	<button id="pause">暂停</button>
	<button id="speed">2倍速度</button>
	<script type="text/javascript">
		window.onload=function(){
			var oStart = document.getElementById('start');
			var oEnd = document.getElementById('end');
			var oPause = document.getElementById('pause');
			var oSpeed = document.getElementById('speed');
			var oVideo = document.getElementById('videoSource');
			var Img=document.getElementById('img');
			// 开始函数
			oStart.onclick=function(){
				oVideo.play();
				Img.style.display = 'none';
				setTimeout(function(){
					oVideo.pause();
					Img.style.display = 'block';
					oVideo.currentTime=0;
				},3000)
			}
			// 暂停函数
			oPause.onclick=function(){
				oVideo.pause();
			}
			// 停止函数
			oEnd.onclick=function(){
				oVideo.pause();
				oVideo.currentTime=0;
			}
			// 加速函数
			oSpeed.onclick=function(){
				oVideo.play();oVideo.playbackRate = 4;//注意这里速度大于4的时候，就没有声音了，声音得不到同步
				Img.style.display = 'none';
				setTimeout(function(){
					oVideo.pause();
					Img.style.display = 'block';
					oVideo.currentTime=0;
				},2000)
			}
			// 这个事件是在视频播放中一直执行的事件
			oVideo.ontimeupdate=function(){
				var oPositionBar = document.getElementById('positionBar');
				oPositionBar.value= (oVideo.currentTime/oVideo.duration*100);
			}
		}
	</script>
</body>
</html>