HTML5新特性——播放器 Audio

随着HTML5的不断更新，HTML5是可以直接利用代码播放视频，而本地播放器都是安装过flash第三方插件才能播放。Html5的功能不断的一一实现，更见的便捷应用广泛，是完全不能怠慢的一个知识，尤其是IT行业人才，以往的视频播放，需要借助Flash插件才可以实现，但FLash插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它取而代之的就是HTML5的video元素。

 

<video>元素的属性：

属性名称 说明
src  视频资源的 URL
width 视频宽度
height 视频高度
autoplay 设置后，表示立刻开始播放视频
preload 设置后，表示预先载入视频
controls 设置后，表示显示播放控件
loop 设置后，表示反复播放视频
muted 设置后，表示视频处于静音状态
poster 指定视频数据载入时显示的图片

 

视频容器：音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其
他一些元数据。主流视频容器支持的格式为：.avi、.flv、mp4、.mkv、.ogg、.webm.

 

1.嵌入一个 WebM 视频
<video src="test.webm" width="800" height="600"></video>
解释：<video>插入一个视频，主流的视频为.webm，.mp4，.ogg 等。src 表示资源
URL；width 表示宽度；height 表示高度。

2.附加一些属性
<video src="test.webm" width="800" height="600" autoplay controls loop
muted></video>
解释：autoplay 表示自动开始播放；controls 表示显示播放控件；loop 表示循环播放；muted 表示静音。

3.预加载设置
<video src="http://li.cc/test.webm" width="800" height="600" controls
preload="none"></video>
解释：preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放
之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。

4.使用预览图
<video src="http://li.cc/test.webm" width="800" height="600" controls
poster="img.png"></video>
解释：poster 属性表示在视频的第一帧，做一张预览图。
5.兼容多个浏览器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>这里引入 flash 播放器实现 IE9 以下，但没必要了</object>
</video>
解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。

 

浏览器支持：

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

 

示例：

　　

<video width="500" height="300" loop="loop" controls="controls"  poster="img1/bj3.jpg" src="madia/林俊杰_-_修炼爱情_-_2013_Hito流行音乐奖颁奖典礼.webm"></video>

　　　　　　　　希望本人的分享能对各位有所帮助，也希望大牛们能指导下我！

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2016-07-17