利用vedio播放视频和原生js对其进行控制

骑猪看日落 2022-06-13 07:52 200阅读 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%;
    	}
    	</style>
    </head>
    <body>
    	<div>
    		<video id="videoSource" width="500px">
    			<source src="test.mp4" type="video/mp4">
    		</video>
    		<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.οnlοad=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');
    			// 开始函数
    			oStart.οnclick=function(){
    				oVideo.play();
    			}
    			// 暂停函数
    			oPause.οnclick=function(){
    				oVideo.pause();
    			}
    			// 停止函数
    			oEnd.οnclick=function(){
    				oVideo.pause();
    				oVideo.currentTime=0;
    			}
    			// 加速函数
    			oSpeed.οnclick=function(){
    				oVideo.play();oVideo.playbackRate = 4;//注意这里速度大于4的时候，就没有声音了，声音得不到同步
    			}
    			// 这个事件是在视频播放中一直执行的事件
    			oVideo.οntimeupdate=function(){
    				var oPositionBar = document.getElementById('positionBar');
    				oPositionBar.value= (oVideo.currentTime/oVideo.duration*100);
    			}
    		}
    	</script>
    </body>
    </html>