html5 <video> 元素同样拥有 方法 、 属性 和事件。
其中的 方法 用于播放、暂停以及加载等。其中的 属性 （比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够 通知 您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
下例中简单的 方法 ，向我们演示了如何使用 <video> 元素，读取并设置 属性 ，以及如何 调用 方法 。
html5 <video> - 方法 、 属性 以及事件
下面列出了大多数浏览器 支持 的视频 方法 、 属性 和事件：
方法 属性 事件 play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error ? duration timeupdate ? ended ended ? error abort ? paused empty ? muted emptied ? seeking waiting ? volume loaded Meta data ? height ? ? width ?注释：在所有 属性 中，只有 videoWidth 和 videoHeight 属性 是立即可用的。在视频的元数据已加载后，其他 属性 才可用。
方法 、 属性 、事件的使用
一： 属性 ???
error 属性 ：在正常读取时候，使用媒体数据的过程中，video元素或au dio 元素的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 dio 元素的networkState 属性 读取当前网络状态，共有4个可能的值；
1．? NETWORK_EMPTY（数字值为0）：元素处于初始状态。
2．? NETWORK_IDLE(数字值为1)，浏览器已选择好用什么编码格式来播放媒体，但是尚未建立网络连接。
3．? NETWORK_LOADING(数字值为2)：媒体数据加载中
4．? NETWORK_NO_SOURCE(数字值为3)，没有 支持 的编码格式，不执行加载。
currentTime 属性 与duration 属性
video元素或au dio 元素的currentTime 属性 来读取媒体的当前播放位置(单位是s)，也可以通过 修改 currentTime 属性 来 修改 当前播放位置，如果 修改 的位置上没有可用的媒体数据时，将抛出INVALID_STATE_ERR异常；
video元素或au dio 元素的duration 属性 来读取媒体 文件 总的播放时间。
我们可以来做demo如下：
HTML代码 如下：
<video?id="video"?controls?width=640?height=360?a utop lay> ????<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? bro wser?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 dio 元素的played 属性 来返回 一个 TimeRanges对象，从该对象中可以读取媒体 文件 的已播放部分的时间段。开始时间为已播放部分的开始时间，结束时间为已播放部分的结束时间。
paused 属性 ：使用video元素或au dio 元素的paused 属性 来返回 一个 布尔值，表示是否处于暂停播放中，true表示媒体暂停播放，false表示媒体正在播放；
ended 属性 ：使用video元素或au dio 元素的ended 属性 来返回 一个 布尔值，表示是否播放完毕，true表示媒体播放完毕，false表示媒体还没有播放完毕。
HTML代码 如下：
<video?id="video"?controls?width=640?height=360?a utop lay?loop> ????<source?src="Wildlife/Wildlife.ogv"?type='video/ogg;?codecs="theora,most?likely?your? bro wser?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 dio 元素的defaultPlaybackRate 属性 读取或 修改 媒体 默 认的播放速率。
? ? ?playbackRate 属性 ：可以使用video元素或者au dio 元素的playbackRate 属性 读取或 修改 媒体当前的播放速率。
volume 属性 与muted 属性
volume 属性 ：使用video元素或au dio 元素的volume 属性 读取或 修改 媒体的播放音量，范围为0到1,0为静音，1为最大音量。
muted 属性 ：使用video元素或au dio 元素的muted 属性 读取或 修改 媒体的静音状态，该值为布尔值，true表示处于静音状态，false表示处于非静音状态。
HTML代码 如下：
<video?id="video"?controls?width=640?height=360?a utop lay?loop> ????<source?src="Wildlife/Wildlife.ogv"?type='video/ogg;?codecs="theora,most?likely?your? bro wser?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 dio 元素有以下四种 方法 ；
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? bro wser?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 dio 元素，该 方法 使用 一个 参数type，该参数的指定 方法 与source元素的type参数的指定 方法 相同，用播放 文件 的MIME类型来指定，可以在指定的字符串中 加上 表示媒体编码格式的codes参数。
该 方法 可能返回的值如下所示：
空字符串：表示浏览器 不支持 此种 媒体类型 。
maybe: 表示浏览器可能 支持 此种 媒体类型 。
probably： 表示浏览器确定 支持 此种 媒体类型 。
HTML代码 如下：
<video?id="video"?controls?width=640?height=360> ????<source?src="Wildlife/Wildlife.ogv"?type='video/ogg;?codecs="theora,most?likely?your? bro wser?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 dio 元素的事件方式有2种，第一种是监听的方式，使用video元素或au dio 元素的addEventListener 方法 来对事件的发生进行监听，该 方法 定义如下：
videoElement.addEventListener(type,listener,userCapture);
如上的监听方式和我们的JS的监听的方式一样，不做详细介绍，我们来看看第二种事件监听方式是为JavaScript脚本中常见的 获取 事件句柄的方式，如下所示：
<video?id=””?src=””??onplay=”begin()”></video>
function?begin(){}
?2.???事件介绍
Video元素与au dio 元素的相关事件
?事件 ?描述 ?loadstart ?浏览器开始在网上寻找媒体数据 ?progress ?浏览器正在 获取 媒体数据 ?suspend ?浏览器暂停 获取 媒体数据，但是下载过程中并没有正常结束 ?abort ?浏览器在下载完全部媒体数据之前中止 获取 媒体数据，但是并不是由 错误 引起的 ?error ? 获取 媒体数据过程中出错 ?emptied ?暂不考虑，可以网上看 ?stalled ?浏览器尝试 获取 媒体数据失败 ?play ?即将开始播放，当执行了play 方法 时触发，或数据下载后元素被设为a utop lay ?pause ?播放暂停，当执行了pause 方法 触发 ?loaded Meta data ?浏览器 获取 完媒体的时长和字节数 ?loadeddata ?浏览器已加载完毕当前播放位置的媒体数据，准备播放 ?waiting ?可以暂不看 ?playing ?正在播放 ?canplay ?浏览器能够播放媒体，但估计以当前播放速率不能直接将媒体播完，播放期间需要缓冲 ?canplaythrough ?浏览器能够播放媒体，但估计以当前播放速率能将媒体播完，不再需要缓冲 ?seeking ?Seeking变为true，表示浏览器正在请求数据 ?seeked ?Seeking 属性 变为false，表面浏览器停止请求数据 ?timeupdate ?当前播放位置发生改变，可能是播放过程中的自然改变，也可能是人为改变，或由于播放不能连续而发生的跳变。 ?ended ?播放结束后停止播放 ?ratechange ?DefaultplaybackRate 属性 或playbackRate 属性 发生改变 ?durationchange ?播放时长发生改变 ?volumechange ?volume 属性 或muted 属性 发生改变 ? ?下面我们来看个demo,在播放过程中会经常触发timeupdate事件来 通知 当前播放位置的改变，我们下面来看看timeupdate事件来 显示 当前的播放进度。
HTML代码 如下：
<video?id="video"?controls?width=640?height=360?a utop lay?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?time dis play?=?document.getElementById("time");
????????//?使用秒数来 显示 当前播放进度
????????time dis play.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?=?"播放";
????????}
????}
HTML5 Audio 音频 ? ?HTML5 Video 视频
查看更多关于HTML 5 Video + DOM的详细内容...