HTML5中的视频和音频标签及应用示例

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

目录

1.1 HTML5中的视频和音频标签 (2)

1.1.1 相关术语 (2)

1.1.2 在HTML4页面中播放视频示例 (3)

1.1.3 在XHTML1.1页面中播放视频示例 (4)

1.1.4 应用HTML5在线播放MP4视频和MP3音频 (5)

1.1.5 各个浏览器所支持的视频和音频格式 (5)

1.1.6

1.1.7 在实际应用中需要考虑的相关问题 (11)

1.1.8 编程动态创建和控制HTML5 的音频示例 (15)

1.1.9 应用JavaScript实现在线控制视频和音频的代码示例 (18)

1.1.10 与播放过程相关的典型事件名称及含义 (22)

1.1.11 与播放过程相关的典型事件的应用示例 (25)

1.1HTML5中的视频和音频标签

1.1.1相关术语

1、与视频和音频播放有关的几个术语

(1)视频容器

视频容器是一个封装体,主要封装了音频轨道、视频轨道、元数据(视频封面、标题、子标题、字幕等信息)。主流视频容器支持以下格式的视频文件:.avi、.flv、.mp4(包括音频和视频)、.mkv和.ogg。

(2)音频和视频编码器和解码器

一组用来对音频和视频信息进行编码、解码以便能正常播放的计算机算法。主流的音频编解码器有:AAC、MPEG-3和Ogg V orbis,而主流的视频编解码器有:H.264、VP8和Ogg Theora。

2、在HTML4页面中播放视频的相关HTML标签

(1)HTML标签的主要的功能

标签是用于Windows平台的IE浏览器,而标签则是用于Windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器。Windows 平台的IE浏览器利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。

标签中的“classid”和“codebase”属性主要告诉IE浏览器自动下载Flash Player 的地址;而其中的标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的浏览器如何下载Flash Player程序,标签中的“pluginspage”属性定义下载Flash Player的地址。

(2)主要的属性

1)CLASSID:设置浏览器的Activex控件,仅用于标签。

2)CODEBASE:设置flash Activex控件的位置,因而如果浏览器如果没有安装的话,

可以自动下载安装。仅用于标签。

3)WIDTH:以百分比或象素指定flash影片的宽度。

4)HEIGHT:以百分比或象素指定flash影片的高度。

5)SRC:指定影片的下载地址。仅用于标签。

6)PLUGINSPAGE:设置flash 插件的位置,因而如果浏览器如果没有安装的话,可

以自动下载安装。仅用于标签。

7)MOVIE:指定影片的下载地址。仅用于标签。

1.1.2在HTML4页面中播放视频示例

1、在HTML4页面中播放视频的应用示例

在HTML4页面中播放视频

height="344" codebase="swflash.cab#version=6,0,40,0">

src="myFlashMovie.swf"

allowscriptaccess="always" allowfullscreen="true">

2、如何实现兼容于不同的浏览器

为了确保大多数浏览器能正常显示页面中内嵌的flash,需要把标签嵌套放在标签内。支持Activex控件的浏览器将会忽略标签内的标签。Netscape和使用插件的IE浏览器将只读取标签而不会识别标签。

1.1.3在XHTML1.1页面中播放视频示例

在HTML4页面中播放视频

height="344" codebase="swflash.cab#version=6,0,40,0">

src="myFlashMovie.swf" allowscriptaccess="always"

allowfullscreen="true">

综上示例,为了达到兼容不同的浏览器,需要使用标签分别设置定义,并且为了它们能正确播放必须赋予一大堆的参数,最终导致等媒体标签将会非常复杂。