视频、音频

浏览器有一些插件可以实现多媒体文件的处理，有些插件需要安装，有些是浏览器自带的。

那如何告诉浏览器，我要处理的文件是个需要插件执行的文件呢？

object 标签

定义一个嵌入的对象(图像、音频、视频、html、Java applets、ActiveX、PDF 以及 Flash)有以下属性：1. data: 规定对象使用的资源的 URL2. form: 规定对象所属的一个或多个表单ID3. height: 规定对象的高度4. width: 规定对象的宽度5. name: 为对象规定名称6. type: 规定data属性中规定的数据的 MIME 类型(type="application/x-shockwave-flash")

1 <object width="400" height="50" data="bookmark.swf"></object>
2
3 <object width="100%" height="500px" data="snippet.html"></object>
4
5 <object data="audi.jpeg"></object>

embed标签

元素没有关闭标签。 不能使用替代文本有以下属性：1. height:2. width:3. type: 规定嵌入内容的 MIME 类型4. src: 规定被嵌入内容的 URL

1 <embed width="100%" height="500px" src="snippet.html">
2
3 <embed src="audi.jpeg">

video标签

定义视频，比如电影片段或其他视频流,支持三种视频格式：MP4、WebM、Ogg1. <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的2. <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式有以下属性：1. autoplay: 如果出现该属性，则视频在就绪后马上播放2. controls: 如果出现该属性，则向用户显示控件，比如播放按钮3. height: 设置视频播放器的高度4. width: 设置视频播放器的宽度5. loop: 如果出现该属性，则当媒介文件完成播放后再次开始播放6. muted: 如果出现该属性，视频的音频输出为静音7. poster: 规定视频正在下载时显示的图像，直到用户点击播放按钮8. src: 要播放的视频的URL

 1 <!-- 最优的html视频解决方案 -->
 2 <video width="320" height="240" controls>
 3   <source src="movie.mp4" type="video/mp4">
 4   <source src="movie.ogg" type="video/ogg">
 5   <source src="movie.webm" type="video/webm">
 6   <object data="movie.mp4" width="320" height="240">
 7     <embed src="movie.swf" width="320" height="240">
 8   </object>
 9 </video>
10
11
12 <!-- 优酷： 如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频 -->
13 <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
14
15
16 <!-- 如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
17 以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件 -->
18 <a href="intro.swf">Play a video file</a>

audio标签

定义声音，比如音乐或其他音频流, 支持三种音频格式文件: MP3, Wav, 和 Ogg1. 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 2. <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件有以下属性：1. autoplay: 如果出现该属性，则音频在就绪后马上播放2. controls: 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）3. loop: 如果出现该属性，则每当音频结束时重新开始播放4. muted: 如果出现该属性，则音频输出为静音5. src: 规定音频文件的 URL

 1 <!-- 最优的解决方案 -->
 2 <audio controls height="100" width="100">
 3   <source src="horse.mp3" type="audio/mpeg">
 4   <source src="horse.ogg" type="audio/ogg">
 5   <embed height="50" width="100" src="horse.mp3">
 6 </audio>
 7
 8
 9 <!-- 雅虎媒体播放器, 雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的HTML页面制作成 专业的播放列表 -->
10 <a href="horse.mp3">Play Sound</a>
11 <script src="http://mediaplayer.yahoo.com/latest"></script>
12
13
14 <!-- 如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
15 以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件 -->
16 <a href="horse.mp3">Play the sound</a>

操作视频、音频

video、audio 元素与一般的标签有些区别，比较特殊，他们有一些共同的方法：

1. canPlayType(): 检测浏览器是否能播放指定的音频/视频类型2. load(): 重新加载音频/视频元素3. play: 开始播放音频/视频4. pause(): 暂停当前播放的音频/视频

一些共同的属性

1. autoplay: 设置或返回是否在加载完成后随即播放音频/视频2. buffered: 返回表示音频/视频已缓冲部分的 TimeRanges 对象3. controls: 设置或返回音频/视频是否显示控件（比如播放/暂停等）4. currentSrc： 返回当前音频/视频的 URL5. currentTime: 设置或返回音频/视频中的当前播放位置（以秒计）6. duration: 返回当前音频/视频的长度（以秒计）7. ended: 返回音频/视频的播放是否已结束8. loop: 设置或返回音频/视频是否应在结束时重新播放9. muted: 设置或返回音频/视频是否静音10. paused: 设置或返回音频/视频是否暂停11. playbackRate: 设置或返回音频/视频播放的速度12. played: 返回表示音频/视频已播放部分的 TimeRanges 对象13. src: 设置或返回音频/视频元素的当前来源14. volume: 设置或返回音频/视频的音量15. readyState: 返回音频/视频当前的就绪状态

一些共同的事件

1. abort: 当音频/视频的加载已放弃时触发2. canplay: 当浏览器可以开始播放音频/视频时触发3. ended: 当目前的播放列表已结束时触发4. error: 当在音频/视频加载期间发生错误时触发5. pause: 当音频/视频已暂停时触发6. play: 当音频/视频已开始或不再暂停时触发7. playing: 当音频/视频在因缓冲而暂停或停止后已就绪时触发8. progress: 当浏览器正在下载音频/视频时触发9. ratechange: 当音频/视频的播放速度已更改时触发10. volumechange: 当音量已更改时触发11. waiting: 当视频由于需要缓冲下一帧而停止时触发12. timeupdate: 当目前的播放位置已更改时触发