html5前端Video视频标签和audio音频标签的使用

html5前端Video视频标签和audio音频标签的使用

h5新特性中关于Video视频标签和audio音频标签的使用和浅谈

一、Video视频标签

video标签是h5新特性中用来播放视频的控件，现在就来详细介绍下如何使用

1. 支持的三种常见格式：mp4、webm、ogv
2. 浏览器差异问题 ：
   火狐、谷歌、欧朋浏览器支持全部格式
   safari只支持mp4格式
   IE8及以下版本不支持video标签
   IE9及以上只支持mp4格式
3. 初使用:

   // src是视频链接地址    controls是视频控制器
   <video src='xxxx.mp4'  controls ></video>

4. 其他写法：

	//这样写的好处是：可以兼容不同的浏览器支持的视频格式
	<video  controls >
		<source src="XXX.mp4">
		<source src="XXX.webm">
		<source src="XXX.ogv">
	</video>

5. 常见的属性
   
   注意：autoplay在谷歌浏览器无法自动播放
   poster="图片封面链接"
6. 通过js控制video属性:

   //首先定义video标签：
   <video src='xxxx.mp4'  controls id="myvideo"></video>
   //以下是常用的几个
   <script>
   		var videoNode=document.getElementById("myvideo");
   		videoNode.play();//视频播放
   		videoNode.pause();//视频暂停
   		var videolength=videoNode.duration();//获取视频总时长
   		var nowtime=videoNode.currentTime();//获取播放时长
   		videoNode.addEventListener('ended',function(){//视频结束后触发播放
   				videoNode.play();
   		})
   		videoNode.playbackRate=2;//设置二倍速播放
   		全屏按钮.onclick=function(){//点击全屏播放
   					videoNode.webkitRequestFullscreen();
   			}
   </script>

二、audio音频标签

audio标签是h5新特性中用来播放音频的控件，现在就来详细介绍下如何使用

1. 支持的三种常见格式：mp3、wav、ogg
2. 浏览器差异问题 ：
   mp3格式所有浏览器都支持
   ogg支持谷歌、欧朋、火狐
3. 初使用:

   // src是音乐链接地址    controls是控制器
   <audio src='xxxx.mp3'  controls ></audio>

4. 其他写法：

	//这样写的好处是：可以兼容不同的浏览器支持的视频格式
	<audio controls >
		<source src="XXX.mp3">
		<source src="XXX.wav">
		<source src="XXX.ogg">
	</audio >

5. 常见的属性
   与上述video标签的属性一致，用法一样