HTML5视频播放标签video和音频播放标签audio标签的正确用法

在网页里嵌入视频和音频，其实比想象中要简单得多。HTML5 提供了原生的 和 标签，让这件事变得异常直接。先看一个视频播放的例子：

上面这段代码，就能让页面支持视频播放，并且露出控制按钮。下面这个则是音频嵌入的方式：

注意，这里的 src 属性，既可以是一个完整的网络 URL，也可以是一个本地文件路径。

这几个关键属性决定了播放行为：

controls 是标配，它让播放器露出控制条，用户能自由操作。 autoplay 让页面加载后自动播放，但实际使用中需要注意浏览器对自动播放的限制。 loop 则让文件循环播放。

对于大体积的媒体文件，preload 属性可以帮助控制缓存策略。它有三个可选值：

"none" 表示不缓存，适合用户可能根本不点击播放的场景。 "auto" 则让浏览器自行决定是否下载完整文件。 "metadata" 是个折中方案，只缓存文件的基本信息，比如时长和封面，既节省流量又保证了交互的流畅性。

考虑到不同浏览器支持的媒体格式各不相同，最稳妥的做法是提供多个备选源。用 元素来实现：

支持 Ogg 格式的浏览器会优先播放 Ogg 文件，否则会尝试 MPEG-4。如果想更精确地控制，还可以在 type 属性里指定解码器：

这里指定了视频需要 Dirac 和 Speex 解码器。如果浏览器支持 Ogg 但缺少指定的解码器，视频就不会被加载。如果没有提供 type 属性，浏览器会向服务器询问媒体类型来判断是否支持，然后决定是否跳到下一个 source。

用Ja vaScript控制视频/音频播放

嵌入只是第一步，想让它听话，还得靠 Ja vaScript。一旦视频成功嵌入，就可以通过 JS 来控制播放、获取状态。比如启动播放：

var v = document.getElementsByTagName("video")[0];v.play();

更复杂的控制，比如播放、暂停、快进、快退、音量调节，都可以通过 Ja vaScript 轻松实现：

 播放 暂停 降低音量 提高音量
 

停止下载视频文件

一个常见的陷阱是：虽然调用了 pause() 让视频停止播放，但浏览器可能并不会停止下载媒体文件，直到它达到一定的缓存量。如果希望真正停止下载，需要把 src 属性清空或移除：

var mediaElement = document.getElementById("myMediaElementID");mediaElement.pause();mediaElement.src='';//或mediaElement.removeAttribute("src"); 

通过删除 src 属性（或设置为空值），就能有效终止网络请求，节省带宽。

设定播放的时间点定位

想从特定时间点开始播放？关键在 currentTime 属性。在设置之前，可以用 seekable 属性来查看视频的有效播放时间范围，它返回一个 TimeRanges 对象，告诉你支持的开始和结束时间：

var mediaElement = document.getElementById('mediaElementID');mediaElement.seekable.start(0); // 返回开始时间 (秒)mediaElement.seekable.end(0);  // 返回结束时间 (秒)mediaElement.currentTime = 122; // 定位到第 122 秒播放mediaElement.played.end(0);   // 返回已经播放的时间长度(秒)

设定播放范围

如果只想播放视频的某一段，比如从10秒到20秒，也可以直接在URL里指定。它的语法是：在媒体文件URL后面加上 #t=[开始时间][,结束时间]。时间的表示可以用秒，也可以用“时:分:秒”的格式（例如 2:05:01）。

几个例子：

//www.jb51.net/video.ogg#t=10,20 指定视频从10秒开始，到20秒结束。

//www.jb51.net/video.ogg#t=,10.5 指定从头播放到10.5秒。

//www.jb51.net/video.ogg#t=,02:00:00 指定播放2小时。

//www.jb51.net/video.ogg#t=60 指定从第60秒开始播放，直到结束。

设置视频封面(poster参数)

视频在未播放时，有些浏览器默认显示一片空白，体验不太好。这时候 poster 属性就派上用场了，它可以指定一张图片作为视频的封面，通常用视频里最有代表性的画面截图：

当视频加载遇到错误时的补救方法

技术总有意外。视频加载失败、资源失效，或者浏览器不支持当前格式，都是可能遇到的问题。这时候需要给用户一个友好的反馈。常用的做法是用 Ja vaScript 监听 error 事件，然后替换视频内容。比如，对于下面的视频资源：

可以用下面的JS代码进行补救，在视频加载失败时，将视频元素替换为一张图片：

var v = document.querySelector('video'),  sources = v.querySelectorAll('source'),  lastsource = sources[sources.length-1];lastsource.addEventListener('error', function(ev) { var d = document.createElement('div'); d.innerHTML = v.innerHTML; v.parentNode.replaceChild(d, v);}, false);