目录
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 <video>和<audio>标签的应用示例 (9)
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）<object>和<embed>HTML标签的主要的功能
<object>标签是用于Windows平台的IE浏览器，而<embed>标签则是用于Windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器。Windows 平台的IE浏览器利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。
<object>标签中的“classid”和“codebase”属性主要告诉IE浏览器自动下载Flash Player 的地址；而其中的<embed>标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的浏览器如何下载Flash Player程序，<embed>标签中的“pluginspage”属性定义下载Flash Player的地址。
（2）主要的属性
1)CLASSID：设置浏览器的Activex控件，仅用于<object>标签。
2)CODEBASE：设置flash Activex控件的位置，因而如果浏览器如果没有安装的话，
可以自动下载安装。仅用于<object>标签。
3)WIDTH：以百分比或象素指定flash影片的宽度。
4)HEIGHT：以百分比或象素指定flash影片的高度。
5)SRC：指定影片的下载地址。仅用于<embed>标签。
6)PLUGINSPAGE：设置flash 插件的位置，因而如果浏览器如果没有安装的话，可
以自动下载安装。仅用于<embed>标签。
navigator标签7)MOVIE：指定影片的下载地址。仅用于<object>标签。
1.1.2在HTML4页面中播放视频示例
1、在HTML4页面中播放视频的应用示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML    4.01//EN" "/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<title>在HTML4页面中播放视频</title>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425"
height="344" codebase="swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344"
src="myFlashMovie.swf"
allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>
</body>
</html>
2、如何实现兼容于不同的浏览器
为了确保大多数浏览器能正常显示页面中内嵌的flash，需要把<embed>标签嵌套放在<object>标签内。支持Activex控件的浏览器将会忽略<object>标签内的<embed>标签。Netscape和使用插件的IE浏览器将只读取<embed>标签而不会识别<object>标签。
1.1.3在XHTML1.1页面中播放视频示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML    1.1//EN" "/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<title>在HTML4页面中播放视频</title>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425"
height="344" codebase="swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344"
src="myFlashMovie.swf" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>
</body>
</html>
综上示例，为了达到兼容不同的浏览器，需要使用<embed>和<object>标签分别设置定义，并且为了它们能正确播放必须赋予一大堆的参数，最终导致<embed>和<object>等媒体标签将会非常复杂。
1.1.4应用HTML5在线播放MP4视频和MP3音频
1、HTML页面示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030"> <title>应用HTML5在线播放MP4视频和MP3音频</title>
</head>
<body>
<video src="1.mp4" controls autoplay width="300"
height="210"></video>
<audio src="1.mp3" controls autoplay> </audio>
</body>
</html>
2、示例执行的结果
因此，在HTML5播放视频和音频的标签定义非常简洁和可读性。1.1.5各个浏览器所支持的视频和音频格式
1、各个浏览器所支持的视频和音频格式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。