HTML5的音频和视频的巧用

一、音频和视频

<audio src="路径" controls></audio>

<audio>元素还支持另外三个属性：preload/autoplay和loop

preload属性告诉浏览器如何下载音频，下载过程是后台，网页访客不必等待下载完成,如果preload指定的值是auto，就是让浏览器下载整个文件，以便用户单击播放按钮时就 能播放。如果指定的值是none，告诉浏览器不必预先下载，如果指定的值是metadata，告诉浏览器先获取音频文件开头的数据块，从而确定一些基本信息。 如果使用的是 none或metadata，那么浏览器会在用户单击播放按钮时立即下载音频文件，浏览器在下载后续数据时会播放已经下载的部分

<audio src="路径" controls preload="metadata"></audio>

autoplay属性告诉浏览器在加载完音频后就立即播放,如果不是设置autoplay的属性，必须是用户点击播放按钮才会播放音频文件，要实现背景播放，去掉controls，加上autoplay属性就好了

<audio src="路径" controls autoplay></audio>

loop属性告诉浏览器在音频到达末尾时，再从头开始重新播放

<audio src="路径" controls loop></loop>

2、<video src="路径" controls></video>

height和width属性用于设置视频窗口（像素）大小，示例如下：<video src="路径" controls width="400" height="300"></video> 设置这个尺寸时应该注意按照视频的原始比例设置

  poster属性是用于设置替换视频的图片。浏览器会在这三种情况下会使用这个图片：（1）视频第一帧未加载完毕；（2）把preload属性设置为none；（3）没有找到指定的视频文件；

<video src="路径" controls poster=“路径”></video>

3、使用<source>元素使浏览器支持多种格式

第一把要从<video><audio>元素中删除src属性，然后嵌套一组<source>元素，示例如下：

<audio controls><source src = "路径" type = "audio/mp3"><source src = "路径" type = "audio/ogg"></audio><video controls width = "700" height = "400"><source src = "路径" type = "video/mp3"><source src = "路径" type = "video/ogg"></video>