HTML的音频和视频

前面的话

　　多媒体元素(好比视频和音频)存储于媒体文件中，肯定媒体类型的最经常使用的方法是查看文件扩展名。如.swf、.wmv、.mp三、.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     设置嵌入内容的URL
type     设置嵌入内容的类型    

<embed src="helloworld.swf" width="200" height="200" type="application/x-shockwave-flash"/>

 

<object>

　　定义一个嵌入的对象

　　<后备内容机制>

　　object能够嵌套object或其余元素，若是浏览器不能渲染优先的选择就显示后备的内容
【属性】

height    设置嵌入对象的高度
width     设置嵌入对象的宽度
type     设置嵌入对象的类型    
name    设置对象的名称，以便在脚本中使用
data     设置对象的URL
usemap    设置与对象一同使用的客户端图像映射的URL
form     规定对象所属的一个或多个表单(将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="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="song.mp3" />

【2】<object>

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

【3】<audio>

<audio controls="controls">
  <source src="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="song.mp3" type="audio/mp3" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

 

HTML视频

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

【1】<embed>

<embed  height="240" width="320" src="movie.mp4" />

【2】<object>

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

【3】<video>

<video controls="controls">
  <source src="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="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>