HTML5----video ,audio常规操作

最新推荐文章于 2018-04-26 18:34:19 发布

damys

最新推荐文章于 2018-04-26 18:34:19 发布

阅读量741

点赞数

分类专栏： HTML5.CSS3 文章标签： video audio

本文链接：https://blog.csdn.net/damys/article/details/47803171

版权

HTML5.CSS3 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
	<head></head>
	<body>
		<video controls="controls" width="800" height="600" autoplay="autoplay" loop="loop" poster="AAA.jpg">
			<source src="movie.ogg" type="video/ogg" />
			<source src="movie.webm" type="video/webm" />
			您的浏览器不支持视频标签，还不赶快升级。
		</video>-->
		
		

		<video src="movie.webm" controls="controls" id="video">
			您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
		</video>
		<br />
		<button οnclick="bofang()">播放</button>
		<button οnclick="zanting()">暂停</button>
		<button οnclick="kuaijin()">快进10秒</button>
		<button οnclick="kuaitui()">快退10秒</button>
		<button οnclick="shutup(this)">闭嘴</button>
		<button οnclick="soso()">加速播放</button>
		<button οnclick="yu()">减速播放</button>
		<button οnclick="normal()">正常播放</button>
		<button οnclick="upper()">提高嗓门</button>
		<button οnclick="lower()">降低嗓门</button>
		
		
		<script>
			//获取对应的video标签
			var video=document.getElementById('video');
			
			//播放方法
			function bofang(){
				video.play();
			}
			
			//暂停方法
			function zanting(){
				video.pause();
			}
			
			//快进10秒
			function kuaijin(){
				
				
			//快退10秒
			function kuaitui(){
				video.currentTime-=10;
			}
			
			//静音
			function shutup(obj){
				if(video.muted){
					obj.innerHTML="闭嘴";
					video.muted=false;
				}else{
					obj.innerHTML="张嘴";
					video.muted=true;
				}
			}
			
			//3倍速度
			function soso(){
				video.playbackRate=3;
			}
			
			//慢三倍速度
			function yu(){
				video.playbackRate=1/3;
			}
			
			//正常倍速
			function normal(){
				video.playbackRate=1;//默认的播放倍速是1
			}
			
			//调高声音
			function upper(){
				video.volume+=0.2;//声音值的范围是0-1
			}
			
			//调低声音
			function lower(){
				video.volume-=0.2;
			}
		</script>
		
		
		<audio src="ABC.mp3" controls="controls">
			您的浏览器不支持视频标签，还不赶快升级。
		</audio>
	</body>
</html>