h5的video播放功能

最新推荐文章于 2025-04-28 10:57:06 发布

驚鴻入梦

最新推荐文章于 2025-04-28 10:57:06 发布

阅读量5.5k

点赞数

分类专栏：前端文章标签： h5 video播放

本文链接：https://blog.youkuaiyun.com/github_37516320/article/details/77852499

版权

前端专栏收录该内容

14 篇文章

订阅专栏

找到了很久以前写的播放video的代码，最基本版，因为这样最直接，就没优化，比如同类的按钮可以共用一个，点击进行切换等等。样式也是最朴素，以实现功能为主了。

具体功能如图：

代码如下：

	需要注意的是播放视频的文件不要忘记放到文件夹里，路径要正确哦~~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			video{
				margin: 30px auto;
				background-color: black;
			}
			.range1{
				width: 500px;
			}
		</style>
	</head>
	<body>
		<video id="videoId" src="image/K.Will.mp4" controls="controls"  preload οnclick="videoPlayOrPause();" width="600px"  οnprοgress="progressChange()">
			该浏览器不支持该格式视频
		</video>
		<div>	
			音量<input type="range" min="0" max="1" step="0.01" οninput="volumchange(this.value)"/>
		</div>
		<button οnclick="fullScreen();">全屏模式</button>
		<button οnclick="play();">播放</button>
		<button οnclick="pausePlay();">暂停</button>
		<button οnclick="muted();">静音</button>
		<button οnclick="replay();">启用循环播放</button>
		<button οnclick="noReplay();">禁用循环播放</button>
		<button οnclick="skip(-10)">快退</button>		 
		<button οnclick="skip(10)">快进</button>
		<button οnclick="restart();">重播</button>
		<p id="time"></p><br />
		<input id="cs" type="range" min="0"  step="1" value='0'/>
		<input type="button" value='00:00:00' id="timea" />
		<input type="button" value='00:00:00' id="timeb" />
		<script type="text/javascript">
			var videoEle = document.getElementById("videoId");
			var cs = document.getElementById("cs");
			var timea = document.getElementById("timea");
			var timeb = document.getElementById("timeb");
			
			videoEle.addEventListener('canplay',function(){
				timea.value = changeTime(videoEle.duration);
				cs.max=videoEle.duration;
				
			})
			videoEle.addEventListener('timeupdate',function(){
				timeb.value=changeTime(videoEle.currentTime);
				cs.value= videoEle.currentTime;
			})
			cs.addEventListener('change',function(){
				videoEle.currentTime = cs.value;
			})
			
			function videoPlayOrPause(){				
				if(videoEle.paused){
					videoEle.play();
				} else{
					videoEle.pause();
				}
				
			}
			function changeall(){
				var max = 3*60*60;
				videoEle.currentTime = this.value
			}
			function volumchange(v){
				videoEle.volume=v; 
			}
			function fullScreen(){
				videoEle.webkitRequestFullScreen();
			}
			function progressChange(){
//				console.log("123");
			}
			
			
			function play(){
				videoEle.play();
			}
			function pausePlay(){
				videoEle.pause();
				if(videoEle.paused){
					videoEle.css("disabled","disabled");
				}
			}
			function muted(){
				
				if(videoEle.muted){
					videoEle.muted = false;
				} else{
					videoEle.muted = true;
				}
			}
			function replay(){
				if(videoEle.loop){
					videoEle.loop = false;
				} else{
					videoEle.loop = true;
				}
			}
			function noReplay(){
				if(videoEle.loop){
					videoEle.loop = true;
				} else{
					videoEle.loop = false;
				}
			}
			
			function skip(value) {				
				videoEle.currentTime += value;
			}
			function restart() {
			
				videoEle.currentTime = 0;
			}
			
			
			
			function changeTime(time){
				
				var newTime = parseInt(time);
				var hour = toZero(Math.floor(newTime/3600));
				var min = toZero(Math.floor(newTime%3600/60));
				var sec = toZero(Math.floor(newTime%60));
				return hour+":"+min+":"+sec;
				function toZero(num){
					if(num<10){
						return '0'+num;
					} else{
						return num;
					}
				}
			}
			changeTime();
		</script>
	</body>
</html>