学科分类
目录
HTML5+CSS3

视频音频嵌入技术概述

在全新的视频、音频标签出现之前,W3C并没有视频和音频嵌入到页面的标准方式,音、视频内容在大多数情况下都是通过第三方插件或浏览器的应用程序嵌入到页面中。例如可以运用Adobe的FlashPlayer插件将视频和音频嵌入到网页中。图1所示为网页中FlashPlayer插件的标志。

img

图1 FlashPlayer插件安装对话框

通过插件或浏览器的应用程序嵌入音视频,这种方式不仅需要借助第三方插件,而且实现的代码复杂冗长,图2所示为运用插件方式嵌入视频代码的截图。

img

图2 嵌入视频的脚本代码

从图2所示的视频嵌入代码截图中可以看出,该代码不仅包含HTML代码,还包含JavaScript代码,整体代码复杂冗长,不利于初学者学习和掌握。那么该如何化繁为简呢?可以运用HTML5中新增的video标签和audio标签来嵌入视频或音频。例如,图3所示的示例代码截图,图中所示代码就是使用video标签嵌入视频的代码,在这段代码中仅需要1行代码就可以实现视频的嵌入,让网页的代码结构变得清晰简单。

img

图3 video标签嵌入视频

在HTML5语法中,video标签用于为页面添加视频,audio标签用于为页面添加音频。到目前为止,绝大多数的浏览器已经支持HTML5中的video和audio标签。各浏览器的支持情况如表1所示。

表1 浏览器对video和audio的支持情况

浏览器 支持版本
IE 9.0及以上版本
Firefox(火狐浏览器) 3.5及以上版本
Opear(欧朋浏览器) 10.5及以上版本
Chrome(谷歌浏览器) 3.0及以上版本
Safari(苹果浏览器) 3.2及以上版本

表1列举了各主流浏览器对video和audio标签的支持情况。需要注意的是,在不同的浏览器上运用video或audio标签时,浏览器显示音视频界面样式也略有不同。图4和图5所示为视频在Firefox浏览器和Chrome浏览器中显示的样式。

img

图4 Firefox浏览器视频播放效果

img

图5 Chrome浏览器视频播放效果

对比图4和图5我们会发现,在不同的浏览器中,同样的视频文件,其播放控件的显示样式却不同。例如,调整音量的按钮、全屏播放按钮等。控件显示不同样式是因为每个浏览器对内置视频控件样式的定义不同。

点击此处
隐藏目录