IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素

4d7482427b564e75b752e1f9e4eecbf4.jpg

 

在HTML5之前,要在网站上展示视频、音频、动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢。HTML5的出现使这一局面得到了改观。在HTML5中提供了音频的标准接口,多媒体播放再也不需要安装插件了,只需要一个支持HTML5的浏览器就可以了。本节介绍video和audio这两个HTML5新增加的元素,它们分别用来处理视频与音频数据。目前Safari 3以上、Firefox 4以上、Opera 10以上,以及Google Chrome 3.0以上的浏览器都实现了对这两个媒体元素的支持。以audio元素为例,只要把播放音频的URL地址指定给该元素的src属性就可以了。代码如下所示:

0aa3203e21b243208bd82864a2ba94ba.jpg

 

将上包含上述代码的html文件在浏览器中打开,如果浏览器支持音频功能则出现音频播放器,否则页面显示“您的浏览器不支持音频audio功能”。效果如图4所示:

d35df90ac3f64005890ef173b2fbcc8d.jpg

图4  音频<audio>标签

 

视频video元素的使用方法和audio相似,只要设定好元素的长、宽等属性即可。代码如下所示:

7b8fcdb80117473a83fd8f02d5e5323c.jpg

8d9b5a98535b44bba5d364b157414bdd.jpg

图4.5  视频<video>标签

 

各浏览器对于各种媒体类型及编码格式的支持情况各不相同,可以通过source元素来为同一个媒体数据指定多种播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放。浏览器的选择顺序为代码中的书写顺序,它会从上往下判断自己对该播放格式是否支持,选到为止。各浏览器对于编码格式的支持情况如表3所示。

表3  各浏览器对于编码格式的支持情况

 

878f747d53a44893865ca7d7beedc58e.png

 

audio和video元素通过一些常用属性的使用,可以定义和扩展一些功能,它们所具有的属性大致相同。两个元素常用的属性如表4所示。

表4  audio和video元素常见属性说明

 

351555546be74015a2542988289e8cc8.png

 

除了表4中提供的属性,还有一些属性、方法和事件可用,但需要结合JavaScript来实现一些特定的效果。例如,通过error属性可以处理出现的错误;使用networkState属性读取当前网络状态;使用play方法来播放媒体;使用load方法重新载入媒体进行播放;通过timeupdate事件来通知当前播放位置的改变;结合JavaScript来显示当前的播放进度等。

posted on 2019-10-10 13:31  老码农的一亩三分地  阅读(...)  评论(...编辑  收藏

导航