HTML5音频audio和视频video用法解析

html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

先看一下标准化的音频(audio)标签

<audio src="YesterdayOnceMore.mp3" controls="conttrols" loop="loop" autoplay></audio>

接下来看一下标签的属性说明,src冲接触img到外部引入的js代码,等等带src的属性标签,都很熟悉了,这个src的也无非这个用法,用来引入audio音频的文件地址,controls这个属性,出现音频元素的控制条可以修改音频播放进度,开始播放,暂停,声音调试等 loop循环播放,autoplay进行音频自动播放.

再看一下video的标准化标签

<video src="big_buck_bunny.mp4" controls="conttrols" loop="loop" poster="poster.jpg"></video>

看到这里你发现两个标签的属性差不多相同,但是又出现了一个poster这个什么鬼,简单说一下这个poster属性就是设置video视频的封面图,在没有autoplay自动播放下,video展现黑色块,影响用户体验,此时可以使用一个封面来进行代替!

当然也可以进行js对video/audio的dom属性抓取进行方法的操作来进行代替控制条!

这里以video为例来说明

视频的播放使用play()方法
//点击开始按钮播放视频 start.onclick=function(){ video.play(); }

3. 视频暂停使用pause()方法

//点击暂停按钮停止播放
			pause.onclick=function(){
				video.pause();
			}
			//点

4.获取当前音量volume方法

sound.onchange=function(){
				//视频对象.volume获取当前声音，范围0-1
				//alert('当前声音为:'+video.volume);
				video.volume=this.value/10;
				span.innerHTML=this.value;
				
			}

5.获取视频在哪个位置(时间点)currentTime

add.onclick=function(){
				//获取当前播放的时间
				var now_time=video.currentTime;
				//计算快进后的播放时间点
				var new_time=now_time+3;
				//新值赋值回去
				video.currentTime=new_time;
			}

下面是使用js控制video的dom控制video的快进,播放暂停等属性完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js实现video的控制条</title>
	</head>
	<body>
		<input type="button" id="start" value="开始"/> 
		<input type="button" value="暂停" id="pause"/> 
		<input type="button" value="快进" id="add" />
		<input type="range" id="sound" value="10" min="1" max="10" step="1" />&nbsp;当前音量:<span>10</span>
		<br /><br /><br />
		<video src="big_buck_bunny.mp4" id="video" poster="poster.jpg"></video>
		<script type="text/javascript">
			//抓取video的dom
			var video=document.getElementById("video");
			var start=document.getElementById("start");
			var pause=document.getElementById("pause");
			var add=document.getElementById("add");
			var sound=document.getElementById("sound");
			var span=document.getElementsByTagName('span')[0];
			//点击开始按钮播放视频
			start.onclick=function(){
				video.play();
			}
			//点击暂停按钮停止播放
			pause.onclick=function(){
				video.pause();
			}
			//点击更改音量
			sound.onchange=function(){
				//视频对象.volume获取当前声音，范围0-1
				//alert('当前声音为:'+video.volume);
				video.volume=this.value/10;
				span.innerHTML=this.value;
				
			}
			//快进功能实现
			add.onclick=function(){
				//获取当前播放的时间
				var now_time=video.currentTime;
				//计算快进后的播放时间点
				var new_time=now_time+3;
				//新值赋值回去
				video.currentTime=new_time;
			}
		</script>
	</body>
</html>