vedeo与audio标签的使用

浏览器原生支持音视频无疑是一件大事——尤其对移动设备而言。不依赖Flash，意味着更加省电、安全和快速的播放体验，而且只需要引入一个标签，就能播放自如。

<video src="daomei.mp4" autoplay controls></video>

仅仅一行代码，就可以实现一个带控件(controls 属性) 的视频播放器。如下图所示。

如果浏览器不支持video元素，我们可以在video标签中嵌入提示文字来实现fallback。

<video src="daomei.mp4" autoplay controls>
    你的浏览器不支持<code>video</code>元素，是时候升级了！
</video>

音频播放也是类似的： 

<audio src="单车.mp3" controls autoplay>
    <p>没有声音，再好的戏也出不来。</p>
</audio> 

指定 autoplay 属性可以使视频在加载页面的时候自动播放，loop 属性则可以让其循环播放：

<video src="daomei.mp4" autoplay controls loop></video>

poster 属性可以为视频指定一张海报（播放前会显示它）：

<video src="daomei.mp4" controls loop poster="1.png"></video>

对于较大的文件还可以指定 preload 属性进行预载入：

<audio src="单车.mp3" controls perload="auto"></audio>

preload 可以从三个值中指定。

　　1. none：不缓冲此文件。

　　2. auto：缓冲整个媒体文件。

　　3. metadata：只缓冲部分元数据(比如该媒体的时长)。

* 由于不同浏览器支持的文件格式不同，HTML5提供了 source 元素让我们可以提供多种格式编码的文件以兼容这些浏览器：

<video controls autoplay>
    <source src="daomei.ogg" type="video/ogg"></source>
    <source src="daomei.mp4" type="video/mp4"></source>
    <source src="daomei.webm" type="video/webm"></source>
    你的浏览器不支持<code>video</code>元素，是时候升级了！
</video> 

上面的代码在支持ogg格式的浏览器里会直接播放daomei.ogg文件，如果不支持ogg，浏览器会依次检测MP4和webm格式的支持情况。这里需要注意的是，浏览器会根据type里的MIME值和服务器最终返回的值来判断文件是否可以播放，src里的文件扩展名并不是判断格式的依据。

 

^_^ 当然除了标签本身提供的这些功能之外，我们还可以使用JavaScript更加细致地控制媒体文件，比如 play 和 pause 方法可以控制媒体的播放与暂停：

var oVideo=document.querySelector('video');
oVideo.play();
setTimeout(function(){
    oVideo.pause();    
},2000);

当然我们可以写一个简单的MP3播放器，以控制播放/暂停以及控制声音大小：

<audio src="单车.mp3"></audio><br/>
<input type="button" value="播放" onclick="document.querySelector('audio').play();"/>
<input type="button" value="暂停" onclick="document.querySelector('audio').pause();"/>
<input type="button" value="加音量" onclick="document.querySelector('audio').volume+=0.1;"/>
<input type="button" value="减音量" onclick="document.querySelector('audio').volume-=0.1;"/>

* 在这里我们需要注意的就是HTML5提供了暂停接口却并没有提供给我们停止的接口，而且即便是暂停后浏览器依然会继续下载媒体文件。如果想提供停止功能，简单的做法就是将 src 属性设置为空：

var oVideo=document.querySelector('video');
oVideo.play();
setTimeout(function(){
    oVideo.pause();
    oVideo.src='';
},2000);

媒体元素( video / audio )本身还提供了非常强大的控制功能，我们还可以控制播放的进度：

var oVideo=document.querySelector('video');
oVideo.seekable.start(0);      //返回开始时间 (单位为秒，通常都会返回0);
oVideo.seekable.end(0);        //返回结束时间，通常是媒体文件的时长;
oVideo.currentTime;            //返回当前播放到多少时间;
oVideo.currentTime=122;        //跳转到第122秒;
oVideo.played.end(0);          //返回浏览器已经播放了多长时间;
oVideo.buffered.end(0);        //返回浏览器已经缓冲了多长时间;
oVideo.muted=true;             //静音;
oVideo.volume=1;               //将音量调至最大;

 媒体元素上的seekable、played 和 buffered 属性都是一个 TimeRanges 类型的对象，表示一个时间范围，我们可以通过访问它的 start 和 end 方法来确定开始和结束的时间。currentTime

表示当前时间，它是可读可写的值。一个媒体的开始时间和结束时间通常是固定的。但是我们也可以通过 hash mark(#)的方式来设置，语法是：

<video src="daomei.mp4#t=100,200" autoplay controls></video>

这样视频将自动从第100秒开始播放，并在200秒时停止。时间设置也可以是冒号分割的形式，诸如1:04:00。

<video src="daomei.mp4#t=1:04:00" autoplay controls></video>

注意： 在Android或IOS设备上，HTML5视频元素将会调用设备内置的播放器来播放音视频，定制的播放器外观将失去效果，所以不必纠结。