html5 <video> 元素同样拥有、和事件。

其中的用于播放、暂停以及加载等。其中的（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

下例中简单的，向我们演示了如何使用 <video> 元素，读取并设置，以及如何。

html5 <video> - 、以及事件

下面列出了大多数浏览器的视频、和事件：

注释：在所有中，只有 videoWidth 和 videoHeight 是立即可用的。在视频的元数据已加载后，其他才可用。

、、事件的使用

一：   

error：在正常读取时候，使用媒体数据的过程中，video元素或au元素的error为null，但是任何时候只要出现，error将返回MediaError对象，该对象的code返回对应的状态，共有4个可能值：

MEDIA_ERR_ABORTED(数字值为1)，媒体数据的下载过程由于的操作原因而被终止。

MEDIA_ERR_NETWORK(数字值为2)，确认媒体资源可用，但是在下载出现网络，媒体数据的下载过程被中止。

MEDIA_ERR_DECODE(数字值为3)，确认媒体资源可用，但是解码时发生。

MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4)，媒体资源不可用或媒体格式不被。

如下：

<video src="" id="videoElement"></video>var video = document.getElementById("videoElement");
video.addEventListener('error',function(){var error = video.error;
    swicth(error.code) {
        case 1:
           alert("视频的下载过程被中止");
        break;

        case 2:
           alert("网络发生故障，视频的下载过程被中止");
        break;

        case 3:
           alert("解码失败");
        break;

        case 4:
           alert("媒体资源不可用或媒体格式不被");
        break;
    }
},false);

networkState

在媒体数据加载过程中可以使用video元素或au元素的networkState读取当前网络状态，共有4个可能的值；

1．  NETWORK_EMPTY（数字值为0）：元素处于初始状态。

2．  NETWORK_IDLE(数字值为1)，浏览器已选择好用什么编码格式来播放媒体，但是尚未建立网络连接。

3．  NETWORK_LOADING(数字值为2)：媒体数据加载中

4．  NETWORK_NO_SOURCE(数字值为3)，没有的编码格式，不执行加载。

currentTime与duration

video元素或au元素的currentTime来读取媒体的当前播放位置(单位是s)，也可以通过currentTime来当前播放位置，如果的位置上没有可用的媒体数据时，将抛出INVALID_STATE_ERR异常；

video元素或au元素的duration来读取媒体总的播放时间。

我们可以来做demo如下：

如下：

<video id="video" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
    <p>Video is not visible,most likely your browser does not support HTML5 video</p>
</video>
<button onclick="getCurTime()" type="button">获得当前时位置</button>
<button onclick="setCurTime()" type="button">把时间位置设置为 5 秒</button>
<button onclick="duration()" type="button">读取媒体总的播放时间</button>

js如下：

var myVid=document.getElementById("video");
function getCurTime(){ 
    // 获得当前视频或者音频时位置
    alert(myVid.currentTime);   
} 
function setCurTime(){ 
// 给当前的视频或者音频设置5s时位置
    myVid.currentTime=5;        
} 
function duration() {
    //读取媒体总的播放时间 单位为S
    alert(myVid.duration); 
}

大家可以复制，换一张视频地址就可以看到了~；

played，paused与ended

played：video元素或au元素的played来返回TimeRanges对象，从该对象中可以读取媒体的已播放部分的时间段。开始时间为已播放部分的开始时间，结束时间为已播放部分的结束时间。

paused：使用video元素或au元素的paused来返回布尔值，表示是否处于暂停播放中，true表示媒体暂停播放，false表示媒体正在播放；

ended：使用video元素或au元素的ended来返回布尔值，表示是否播放完毕，true表示媒体播放完毕，false表示媒体还没有播放完毕。

如下：

<video id="video" controls width=640 height=360 autoplay loop>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p>
</video>
<button onclick="played()" type="button">读取媒体的已播放部分的时间段</button>
<button onclick="paused()" type="button">是否处于暂停播放</button>
<button onclick="ended()" type="button">是否播放完毕</button>

js如下：

var myVid=document.getElementById("video");
function played() {
    //读取媒体的已播放部分的时间段
    console.log(myVid.played);
}
function paused() {
    // 是否处于暂停播放
    alert(myVid.paused);
}
function ended() {
    // 是否播放完毕
    alert(myVid.ended);
}

defaultPlaybackRate与playbackRate

     defaultPlaybackRate：可以使用video元素或者au元素的defaultPlaybackRate读取或媒体认的播放速率。

     playbackRate：可以使用video元素或者au元素的playbackRate读取或媒体当前的播放速率。

volume与muted

volume：使用video元素或au元素的volume读取或媒体的播放音量，范围为0到1,0为静音，1为最大音量。

muted：使用video元素或au元素的muted读取或媒体的静音状态，该值为布尔值，true表示处于静音状态，false表示处于非静音状态。

如下：

<video id="video" controls width=640 height=360 autoplay loop>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p>
</video>
<button onclick="volume()" type="button">读取或媒体的播放音量</button>
<button onclick="muted()" type="button">读取或媒体当前的静音状态</button>

JS如下：

var myVid=document.getElementById("video");
function volume(){
    // 读取或媒体的播放音量
    myVid.volume = 0.1;
}
function muted() {
    //读取或媒体当前的静音状态
    myVid.muted = true;
}

大家可以使用下，当我点击”读取或媒体的播放音量”按钮时候，声音会变的很小，当我点击”读取或媒体当前的静音状态”按钮时候，视频完全就没有声音。

二：

video元素与au元素有以下四种；

play：使用play来播放媒体，将元素的paused的值变为false。

pause：使用pause来暂停播放，将元素的paused的值变为true。

load，使用load来重新载入媒体进行播放，将元素的playbackRate的值变为defaultPlaybackRate的值，将元素的error的值变为null。

下面是播放和暂停的demo如下：

<video id="video" controls width=640 height=360>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p>
</video>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>

JS如下：

var myVid=document.getElementById("video");
// 监听视频播放结束的事件
myVid.addEventListener("ended",function(){
    alert("播放结束");
},true);
// 发生
myVid.addEventListener('error',function(){
    switch(myVid.error.code) {
        case 1: 
          alert("视频的下载过程被中止");
        break;

        case 2:
              alert("网络发生故障，视频的下载过程被中止");
        break;

        case 3:
              alert("解码失败");
        break;

        case 4:
              alert("播放的视频格式");
        break;

        default:
              alert("发生未知");
        }
},false);

function play() {
    // 播放视频
    myVid.play();
}
function pause() {
    // 暂停播放
    myVid.pause();
}

如上，认的情况下是不播放，当我点击播放按钮时候，就播放，当我点击暂停按钮时候就停止当前的播放。

 4. canPlayType：使用canPlayType来测试浏览器是否指定的，该定义如下：var support = videoElement.canPlayType(type);

videoElement表示上的video元素或au元素，该使用参数type，该参数的指定与source元素的type参数的指定相同，用播放的MIME类型来指定，可以在指定的字符串中表示媒体编码格式的codes参数。

该可能返回的值如下所示：

空字符串：表示浏览器此种。

maybe: 表示浏览器可能此种。

probably： 表示浏览器确定此种。

如下：

<video id="video" controls width=640 height=360>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p>
</video>
<button onclick="canPlayType()">canPlayType</button>

JS如下：

var myVid=document.getElementById("video");
function canPlayType() {
    var support = myVid.canPlayType("video/webm");
    console.log(support); // maybe

    var support = myVid.canPlayType('video/ogg; codecs="theora,vorbis');
    console.log(support); // probably
}

三：事件

1.   事件处理方式

使用video元素或au元素的事件方式有2种，第一种是监听的方式，使用video元素或au元素的addEventListener来对事件的发生进行监听，该定义如下：

videoElement.addEventListener(type,listener,userCapture);

如上的监听方式和我们的JS的监听的方式一样，不做详细介绍，我们来看看第二种事件监听方式是为JavaScript脚本中常见的事件句柄的方式，如下所示：

<video id=”” src=””  onplay=”begin()”></video>
function begin(){}

 2.   事件介绍

Video元素与au元素的相关事件

下面我们来看个demo,在播放过程中会经常触发timeupdate事件来当前播放位置的改变，我们下面来看看timeupdate事件来当前的播放进度。

如下：

<video id="video" controls width=640 height=360 autoplay loop="loop"></video>
<br/>
视频地址：<input type="text" id="videoUrl"/>
<input id="playButton" type="button" onclick="playOrPauseVideo()" value="播放"/>
<span id="time"></span>

JS如下：

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 = "播放";
        }
    }