浅谈HTML5中的<audio>和<video>

痛定思痛。 2022-06-18 09:58 370阅读 0赞

1、video和audio的优点：

不需要第三方插件就能播放音频和视频了，可以直接插入，并且用同一的API接口控制。

2、video和audio的缺点：

1) 暂时没有对流视频的支持和规范。流媒体分HTTP渐进流式下载和实时流式传输，video和audio属于HTTP渐进流式下载，不需要流媒体服务器，普通HTTP服务器就可以。

2) 播放媒体类型不统一。由于各种原因，HTML5没有对播放媒体类型做规定，这可以通过source来改进，如果不支持播放第一个文件就播放下一个，以此类推。

3) 资源受跨域共享的限制。跨域的媒体数据需要统统下载到本地服务器。

4) 全屏无法通过脚本控制。从安全性角度来看，让脚本元素控制全屏操作是不合适的。不过，如果要让用户在全屏方式下播放视频，浏览器可以提供其他控制手段。

3、常用属性：

1) video和audio共有的可读写属性：

<table> 
 <tbody> 
 <tr> 
 <td>src </td> 
 <td>媒体数据的url地址 </td> 
 </tr> 
 <tr> 
 <td>loop </td> 
 <td>是否循环播放 </td> 
 </tr> 
 <tr> 
 <td>autoplay </td> 
 <td>是否在页面加载后自动播放（注意：如果audio不加controls属性，音频是默认隐藏的） </td> 
 </tr> 
 <tr> 
 <td>controls </td> 
 <td>是否添加浏览器自带的播放控制条，控制条中具有播放、暂停等按钮。当然也可以在脚本中自定义控制条，而不使用浏览器默认的控制条 </td> 
 </tr> 
 <tr> 
 <td>preload </td> 
 <td>媒体数据是否在页面加载时预加载，并预备播放，可以加快播放速度。可选值有none（不进行预加载）、metadata（部分预加载，只预加载媒体的元数据，如媒体字节数、第一帧、播放列表、持续时间等）、auto（全部预加载）。默认为auto。如果使用 "autoplay"，则忽略该属性 </td> 
 </tr> 
 <tr> 
 <td>muted </td> 
 <td>媒体数据是否应该被静音 </td> 
 </tr> 
 <tr> 
 <td>volume </td> 
 <td>媒体数据的播放音量，范围从0到1，0为表单，1为最大音量 </td> 
 </tr> 
 <tr> 
 <td>currentTime </td> 
 <td>媒体数据的当前播放位置，从开始到现在播放的时间 </td> 
 </tr> 
 <tr> 
 <td>defaultPlaybackRate </td> 
 <td>媒体数据的默认播放速率 </td> 
 </tr> 
 <tr> 
 <td>playbackRate </td> 
 <td>媒体数据的当前播放速率 </td> 
 </tr> 
 <tr> 
 <td>error </td> 
 <td>在读取、使用媒体数据的过程中，正常情况下，媒体元素的error属性为null，但任何时候只要出现错误，error属性将返回一个MediaError对象，该对象的code返回对应的错误状态，错误状态共有4个可能值：MEDIA_ERR_ABORTED(数字值为1）表示媒体数据的下载过程由于用户的操作原因而被中止；MEDIA_ERR_NETWORK(数字值为2）表示确认媒体资源可用，但是在下载时出现网络错误，媒体数据下载过程被中止；MEDIA_ERR_DECODE(数字值为3)表示确认媒体资源可能，但是解码时发生错误；MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）表示媒体格式不被支持。</td> 
 </tr> 
 </tbody> 
</table>

2) video元素独有的属性：

<table> 
 <tbody> 
 <tr> 
 <td>width </td> 
 <td>媒体数据的宽度（以像素为单位） </td> 
 </tr> 
 <tr> 
 <td>height </td> 
 <td>媒体数据的高度（以像素为单位） </td> 
 </tr> 
 <tr> 
 <td>poster </td> 
 <td>视频封面，当视频不可用时，使用该元素向用户展示一幅替代用的图片</td> 
 </tr> 
 </tbody> 
</table>

4、常用方法：

<table> 
 <tbody> 
 <tr> 
 <td>play() </td> 
 <td>播放媒体数据，自动将元素的paused属性变为false </td> 
 </tr> 
 <tr> 
 <td>pause() </td> 
 <td>暂停播放媒体数据，自动将元素的paused属性变为true </td> 
 </tr> 
 <tr> 
 <td>load() </td> 
 <td>重新载入媒体数据进行播放，自动将元素的playbackRate属性值变为defaultPlaybackRate属性值，自动将元素的error值变为null，一般不用，除非是重新载入或动态记载视频 </td> 
 </tr> 
 <tr> 
 <td>canPlayType() </td> 
 <td>测试浏览器是否支持指定的媒体类型，其参数与soruce元素的type参数相同，都用播放文件的MIME类型来指定。该方法返回3个可能值：空字符串：表示浏览器不支持此种媒体类型；maybe：表示浏览器可能支持此种媒体类型；probably：表示浏览器确定支持此种媒体类型</td> 
 </tr> 
 </tbody> 
</table>

5、常用事件：

<table> 
 <tbody> 
 <tr> 
 <td>play </td> 
 <td>播放时触发 </td> 
 </tr> 
 <tr> 
 <td>pause </td> 
 <td>暂停时触发 </td> 
 </tr> 
 <tr> 
 <td>ended </td> 
 <td>播放结束后触发 </td> 
 </tr> 
 <tr> 
 <td>abort </td> 
 <td>下载完全部媒体数据，终止下载时触发 </td> 
 </tr> 
 <tr> 
 <td>error </td> 
 <td>错误时触发 </td> 
 </tr> 
 <tr> 
 <td>loadstart </td> 
 <td>开始寻找媒体数据时触发 </td> 
 </tr> 
 <tr> 
 <td>progress </td> 
 <td>正在获取媒体数据时触发</td> 
 </tr> 
 </tbody> 
</table>

6、浏览器不支持video、audio时的处理（以video为例）：

1) 提示用户

<video src="movie.ogg" controls> 
 如果浏览器不支持，提示用户 
 </video>

2) 通过source元素设置多个类型的源文件

浏览器会按照类型声明的顺序判断，如果支持的不止一种，浏览器会选择支持的第一个来源。

<video controls> 
 <source src="movie.ogg"> 
 <source src="movie.mp4"> 
 如果浏览器不支持，提示用户 
 </video>

3) 将flash作为后备的插入方法

<video src="movie.ogg" controls> 
 <object data="movie.swf" type="application/x-shockwave-flash"> 
 <param name="movie" value="movie.swf" /> 
 </object> 
 如果浏览器不支持，提示用户 
 </video>

注：通常情况下，IE 系列浏览器通过 ActiveX 插件使用 object元素引入 Flash，而其他浏览器则是通过相应的 NPAPI 插件使用 embed元素。