video与audio元素的基础知识

video元素用来播放视频或电影, 而audio元素用来播放音频数据。
audio元素只要把播放视频的URL地址指定给该元素的src属性就可以了。video元素只要设定好元素的长、宽等属性, 并且把播放视频的URL地址指定给该元素的src属性就可以了。

<audio src="test.mp3">
  您的浏览器不支持audio元素
</audio>
<video src="test.mp4" width="600" height="360">
  你的浏览器不支持video元素
</video>

另外，还可以通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放, 浏览器的选择顺序为代码中的书写顺序，它会从上往下判断自已对该播放格式是否支持, 直到选择到自己支持的播放格式为止。

<video>
  <source src="simple.ogv" type="video/ogg;codes='theora,vorbis'">
  <source src="simple.mov" type="video/quicktime">
</video>

source元素具有几个属性：src属性是指播放媒体的URL地址，type表示媒体类型, 其属性值为播放文件的MIME类型, 该属性中的codes参数表示所使用的媒体的编码格式。type属性是可选属性，但是最好不要省略type属性，否则浏览器会在从上往下选择时无法判断自已能不能播放而先行下载一小段视频 (或音频) 数据。
因为各浏览器对于各种媒体的媒体类型及其编码格式的支持情况都各不相同，所以使用source元素来指定多种媒体类型是非常有必要的。

属性

audio元素与video元素都具有的属性：

src

在该属性中指定媒体数据的URL地址。

autoplay

指定媒体是否在页面加载后自动播放。

<video src="" autoplay></video>

preload

指定视频或音频数据是否预加载。该属性有三个值：none（不进行预加载）、auto（预加载全部视频或音频）、metadata（只预加载媒体的元数据），默认值为auto。

<video src="" preload="auto"></video>

poster(video元素独有)

当视频不可用时，可以使用该元素向用户展示一幅替代图片。

<video src="" poster="cannotUse.png"></video>

loop

指定是否循环播放视频或音频。

<video src="" loop></video>

controls

指定是否为视频或音频添加浏览器自带的播放用的控制条。

<video src="" controls></video>

width和height(video元素独有)

指定视频的宽度与高度。

error

在正常情况下video和audio元素的error属性为null，出现错误时，error属性将返回一个MediaError对象，该对象的code返回对应的错误状态，错误状态有4个可能值：

• MEDIA_ERR_ABORTED(1)：媒体数据的下载过程由于用户的操作原因而被终止
• MEDIA_ERR_NETWORK(2)：确认媒体资源可用，但在下载时出现网络错误，媒体数据的下载过程被中止
• MEDIA_ERR_DECODE(3)：确认媒体资源可用，但解码时发生错误
• MEDIA_ERR_SRC_NOT_SUPPORTED(4)：媒体格式不被支持

error属性为只读属性。

video = document.getElementById("video1");
// 发生错误
video.addEventListener("error",function(){  
switch (video.error.code) {
    case MediaError.MEDIA_ERROR_ABORTED: //或者用数字1
        alert("视频的下载过程被中止。");
        break;
    case MediaError.MEDIA_ERROR_NETWORK: //或者用数字2
        alert("网络发生故障，视频的下载过程被中止。");
        break;
    case MediaError.MEDIA_ERROR_DECODE: //或者用数字3
        alert("解码失败。");
        break;
    case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED: //或者用数字4
        alert("不支持播放的视频格式。");
        break;
    default:
        alert("发生未知错误。");
    }    
},false);

networkState

在媒体数据加载过程中，networkState属性可以读取当前网络状态，有4种可能值：

• NETWORK_EMPTY(1)：元素处于初始状态
• NETWORK_IDLE(2)：浏览器已选好编码格式，但尚未建立网络连接
• NETWORK_LOADING(3)：媒体数据加载中
• NETWORK_NO_SOURCE(4)：没有支持的编码格式，不执行加载

networkState属性为只读属性。

var video=document.getElementById("videl");
video.addEventListener("progress",function(e){
    var networkStateDisplay=document.getElementById("networkState");
    if(video.networkState==2){
        //计算已加载的字节数和总字节数
        networkStateDisplay.innerHTML="加载中。。。["+e.loaded+"/"+e.total+"byte]";
    }else if(video.networkState==3){
        networkStateDisplay.innerHTML="加载失败"
    }
},false);

currentSrc

读取播放中的媒体数据的URL地址，只读属性。

buffered

返回一个对象，该对象实现TimeRanges接口，以确认浏览器是否已缓存媒体数据。TimeRanges对象表示一段时间范围，在大多数情况下，TimeRanges对象表示的时间范围是一个单一的以0开始的范围，但如果浏览器发出Range Requests请求，这时TimeRanges对象表示的时间范围是多个时间范围。
TimeRanges对象具有一个length属性，表示有多少个时间范围，大多数情况下存在时间范围时，该值为1；不存在时间范围时，该值为0，TimeRanges对象还有两个方法，TimeRanges.start(index)和TimeRanges.end(index)，大多数情况下将index值设为0就可以了。
当用videoElement.buffered语句来实现TimeRanges接口时，TimeRanges.start(0)表示当前缓存区内从媒体数据的什么时间开始进行缓存，TimeRanges.end(0)表示当前缓存区内的结束时间。
buffered属性为只读属性。

readyState

返回媒体当前播放位置的就绪状态，有5个可能值：

• HAVE_NOTHING(0)：没获取到媒体的任何信息，当前播放位置没有可播放数据。
• HAVE_METADATA(1)：已获取到足够的媒体数据，但当前播放位置没有有效的媒体数据，也就是说获取到的媒体数据无效，不能播放。
• HAVE_CURRENT_DATA(2)：当前播放位置已经有数据可以播放，但没有获取到可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获得，但还没有获取到下一帧的数据，或者当前帧已经是播放的最后一帧。
• HAVE_FUTURE_DATA(3)：当前播放位置已经有数据可以播放，而且也获取到可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获得，而且也获取到了下一帧的数据，当前帧是播放的最后一帧时，readyState属性不可能为HAVE_FUTURE_DATA。
• HAVE_ENOUGH_DATA(4)：当前播放位置已经有数据可以播放，而且也获取到可以让播放器前进的数据。而且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放。

readyState属性为只读属性。

seeking和seekable

seeking属性返回一个布尔值，表示浏览器是否正在请求某一特定播放位置的数据，true表示浏览器正在请求数据，false表示浏览器已停止请求。
seekable属性返回一个TimeRanges对象，该对象表示请求到的数据的时间范围。当媒体为视频时，开始时间为请求到视频数据第一帧的时间，结束时间为请求到视频数据最后一帧的时间。
seeking属性和seekable属性均为只读属性。

currentTime、startTime和duration

currentTime属性可以读取或修改媒体的当前播放位置，如果修改的位置上没有可用的媒体数据，将抛出INVALID_STATE_ERR异常。如果修改位置超出了浏览器在一次请求中可以请求的数据范围，将抛出INDEX_SIZE_ERR异常。
startTime属性可以读取媒体播放的开始时间，通常为0。
duration属性可以读取媒体文件总的播放时间。
这三个属性的值均为时间，单位为秒，currentTime为可读写属性，其余两个为只读属性。

played、paused和ended

played属性返回一个TimeRanges对象，从该对象中可以读取媒体文件的已播放部分的时间段。开始时间为已播放部分的开始时间，结束时间为已播放部分的结束时间。
paused属性返回一个布尔值，true表示暂停播放，表示是否处于暂停播放中，false表示正在播放。
ended属性返回一个布尔值，表示是否播放完毕，true表示播放完毕，false表示还没播放完。
这三个属性均为只读属性。

defaultplaybackRate和playbackRate

defaultplaybackRate属性可以读取或修改媒体默认的播放速率。
playbackRate属性可以读取或修改媒体当前的播放速率。

volume和muted

volume属性可以读取或修改媒体的播放音量，范围为0到1，0为静音，1为最大音。
muted属性可以读取或修改媒体的静音状态，true表示处于静音状态，false表示非静音状态。

方法

video和audio元素都有4种方法。

• play方法：播放媒体，自动将元素的paused属性的值变为false
• pause方法：暂停播放，自动将元素的paused属性的值变为true
• load方法：重新载入媒体，自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值，自动将元素的error属性值变为null
• canPlayType方法：测试浏览器是否支持指定的媒体类型

var support=videoElement.canPlayType(type);

videoElement表示页面上的video或audio元素。type参数的指定方法与source元素的type参数的指定方法相同，都用播放文件的MIME类型来指定，可以在指定的字符串中加上表示媒体编码格式的codes参数。
该方法返回3个可能值：

• 空字符串：表示浏览器不支持此媒体类型
• maybe：表示浏览器可能支持此媒体类型
• probably：表示浏览器确定支持此媒体类型

<script>
var video;
function init() {
    video = document.getElementById("video1");
    //监听视频播放结束事件
    video.addEventListener("ended", function() {
      alert("播放结束。");
    }, true);
// 发生错误
video.addEventListener("error",function(){  
  switch (video.error.code) {
    case MediaError.MEDIA_ERROR_ABORTED: //或者用数字1
        alert("视频的下载过程被中止。");
        break;
    case MediaError.MEDIA_ERROR_NETWORK: //或者用数字2
        alert("网络发生故障，视频的下载过程被中止。");
        break;
    case MediaError.MEDIA_ERROR_DECODE: //或者用数字3
        alert("解码失败。");
        break;
    case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED: //或者用数字4
        alert("不支持播放的视频格式。");
        break;
    default:
        alert("发生未知错误。");
    }    
  },false);
}
function play() {
    video.play(); // 播放视频
}
function pause() {
    video.pause(); //暂停播放
}
</script>

<body onload="init()">
  <!--可以添加controls属性来显示浏览器自带的播放用的控制条 -->
  <video id="video1" src="test.ogv"></video><br/>
  <button onclick="play()">播放</button>
  <button onclick="pause()">暂停</button>
</body>

事件

事件处理方式

有两种方式，一种是使用addEventListener方法对事件监听，第二种是获取事件句柄的方式。

videoElement.addEventListener(type, listener, true / false);
<video onplay="begin_play()"></video>

videoElement表示页面上的video或audio元素。type为事件名，listener表示绑定的函数，最后一个值若为true，则浏览器采用Capture响应方式，若为false，浏览器采用bubbing响应方式，默认为false。

事件介绍

浏览器在请求媒体数据、下载媒体数据、播放媒体数据一直到结束这一过程中，触发了一系列事件。

事件捕捉示例

在播放过程中会经常触发timeupdate事件来通知当前播放位置的改变，可以通过捕捉timeupdate事件来显示当前播放进度。

<script type="text/javascript">  
function playOrPauseVideo() {  
    var videoUrl = document.getElementById("videoUrl").value;  
    var video = document.getElementById("video");  
    //使用事件监听方式捕捉事件
    video.addEventListener("timeupdate", function(){  
        var timeDisplay = document.getElementById("time");  
        //用秒数来显示当前播放进度
        timeDisplay.innerHTML = Math.floor(video.currentTime) +"/"+ Math.floor(video.duration) +"(秒)";
    }, false);  
    if(video.paused) {  
        if(videoUrl != video.src) {  
            video.src = videoUrl;  
            video.load();  
        } else {  
            video.play();  
        }  
        document.getElementById("playButton").value = "暂停";  
    } else {  
        video.pause();  
        document.getElementById("playButton").value = "播放";  
    }  
}  
</script>  
<body>  
  <video id="video" width="400" height="300" autoplay loop="loop"></video>  
  <br />  
  视频地址：<input type="text" id="videoUrl"/>  
  <input id="playButton" type="button" onclick="playOrPauseVideo()" value="播放"/>  
  <span id="time"></span>  
</body>