HTML的音频和视频

目录

前面的话

　　多媒体元素(比如视频和音频)存储于媒体文件中，确定媒体类型的最常用的方法是查看文件扩展名。如.swf、.wmv、.mp3、.mp4

媒体格式

音频格式

.mid/.midi

　　MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。大多数流行的网络浏览器都支持 MIDI

.rm/.ram

　　RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低

.wav

　　Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它

.wma

　　WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用

.mp3/.mpga

　　MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式

视频格式

.avi

　　AVI (Audio Video Interleave) 格式是由微软开发的。所有运行Windows的计算机都支持AVI格式

.wmv

　　Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外组件，就无法播放 Windows Media 电影

.mpg/.mpeg

　　MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持

.mov

　　QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是QuickTime 电影不能在没有安装额组件的Windows计算机上播放

.rm/.ram

　　RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低

.swf/.flv

　　Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放

.mp4

　　Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。越来越多的视频发布者将其作为 Flash 播放器和 HTML5 的因特网共享格式

元素

插件元素

<embed>

　　用来定义嵌入内容，比如flash插件

　　[注意]由于移动端设备对flash等浏览器插件支持比较差，IOS设备完全不支持，因此不建议使用flash,如果需要播放音频视频，可以使用video和audio来调用浏览器原生的播放器

【属性】

height  设置嵌入内容的高度width   设置嵌入内容的宽度src   设置嵌入内容的URLtype   设置嵌入内容的类型  

<embed src='/images/loading.gif' data-original="helloworld.swf" width="200" height="200" type="application/x-shockwave-flash"/>

<object>

　　定义一个嵌入的对象

　　<后备内容机制>

　　object可以嵌套object或其他元素，如果浏览器不能渲染优先的选择就显示后备的内容
【属性】

height  设置嵌入对象的高度width   设置嵌入对象的宽度type   设置嵌入对象的类型  name  设置对象的名称，以便在脚本中使用data   设置对象的URLusemap  设置与对象一同使用的客户端图像映射的URLform   规定对象所属的一个或多个表单(将object作为表单的一部分是为了解决让插件发送数据到服务器的需要)typemustmatch  检测资源类型和type属性是否相符(data和type同时设置的情况下)

<param>

　　用来给内嵌的插件传递参数

【属性】

name  定义参数的名称value  规定参数的值type  规定参数的MIME类型valuetype  规定值的MIME类型(data/ref/object)

<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">　　<param name="SRC" value="bookmark.swf">　　<embed src='/images/loading.gif' data-original="bookmark.swf" width="400" height="40"></embed></object>

HTML5元素

　HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是<audio>和<video>，且不被IE8-浏览器支持

　这两个标签支持的类型为：

　　　　视频 [1]video/ogg [2]video/mp4 [3]video/webm

　　　　音频 [1]audio/ogg [2]audio/mpeg

　　关于<audio>和<video>标签的详细信息移步至此

HTML音频

　　在HTML中播放音频的方法有很多种

【1】<embed>

<embed height="80" width="300" src='/images/loading.gif' data-original="song.mp3" />

【2】<object>

<object height="80" width="300" data="song.mp3"></object>

【3】<audio>

<audio controls="controls"> <source src='/images/loading.gif' data-original="song.mp3" type="audio/mp3" /></audio>

【4】<a>

<a href="song.mp3">Play the sound</a>

【5】更好的解决办法

<audio controls="controls" height="100" width="100">  <source src='/images/loading.gif' data-original="song.mp3" type="audio/mp3" />  <embed height="100" width="100" src='/images/loading.gif' data-original="song.mp3" /></audio>

HTML视频

　　在HTML中播放视频的方法也有好多种

【1】<embed>

<embed height="240" width="320" src='/images/loading.gif' data-original="movie.mp4" />

【2】<object>

<object height="240" width="320" data="movie.mp4"></object>

【3】<video>

<video controls="controls"> <source src='/images/loading.gif' data-original="movie.mp4" type="video/mp4" /></video>

【4】<a>

<a href="movie.mp4">Play the video</a>

【5】更好的解决办法

<video width="320" height="240" controls="controls"> <source src='/images/loading.gif' data-original="movie.mp4" type="video/mp4" /> <object data="movie.mp4" width="320" height="240">  <embed src='/images/loading.gif' data-original="movie.mp4" width="320" height="240" /> </object></video>

原标题：HTML的音频和视频

关键词：HTML