html5_音视频元素_audio&video

浏览器兼容性：IE9以上以及其它现代浏览器均支持

<h2>音频播放</h2> 
<audio src="music.mp3" controls>     
    您的浏览器不支持audio元素 
</audio>

<h2>视频播放</h2> 
<video src="movie.mp4" controls>     
    您的浏览器不支持video元素 
</video>

 

audio、video支持的元素：

src：

autoplay：布尔值，设置为true后音视频会自动播放（新版浏览器大多禁止自动播放，实测没用）。

controls：布尔值，也可以直接添加。会显示音视频的进度条。

loop：布尔值，也可直接添加。设置为true后会循环播放。

preload：指定是否预加载音视频。有三个值：

auto：预加载音视频。

metadata：只预加载音视频元数据。如媒体字节数、第一帧、播放列表、持续时间等。

none：不执行预加载。

（指定了autoplay属性后preload会被自动忽略）

poster：只对<video>元素有效，该属性指定一张图片的URL地址。在视频下载完成、开始播放之前，该元素将会显示该属性指定的图片。视频不可用时同样显示它。

width、height：只对<video>元素有效，指定视频播放器的宽高。

 

目前HTML5推荐使用VP8作为视频压缩格式。

对于音频格式而言：

IE9不支持OGG Vobis，FF和Opera不支持MP3。

对于视频格式而言：

IE9不支持OGG Theora，FF和Opera不支持H.264。

 

鉴于此，开发者可以借助<source>子元素指定多个媒体源。它包括src和type两个属性：

src：音视频的URL地址。

type：指定音视频的格式。该值的格式可为简单的MIME字符串：”audio/ogg“，"audio/mpeg"；也可以是MIME字符串并带codecs属性，codecs属性用于指定视频文件的编码格式，例如” audio/ogg;codecs='vobis' “。

通常推荐指定type属性。如果不指定type浏览器需要先下载一小段音频或视频才能判断文件的类型，会造成流量浪费。

示例：

<h2>音频播放</h2> 
<audio controls>     
    <source src="demo.ogg" type="audio/ogg" media="aaa">
    <source src="demo.mp3" type="audio/mpeg">     
    <source src="demo.wav" type="audio/x-wav"> 
</audio>

 

如上所示，浏览器会自己寻找可播放的格式资源进行下载。