video标签的属性和⽅法总结
最近想做⼀个弹幕插件，查了很多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)，媒体资源不可⽤或媒体格式不被⽀持。
代码如下：
<video src="" id="videoElement"></video>
var video = ElementById("videoElement");
video.addEventListener("error",function(){
var error = ;
de) {
case 1:
alert("视频的下载过程被中⽌");
break;
case 2:
alert("⽹络发⽣故障，视频的下载过程被中⽌");
break;
case 3:
alert("解码失败");
break;
case 4:
alert("媒体资源不可⽤或媒体格式不被⽀持");
break;
}
},false);
networkState属性
在媒体数据加载过程中可以使⽤video元素或audio元素的networkState属性读取当前⽹络状态，共有4个可能的值；1． NETWORK_EMPTY（数字值为0）：元素处于初始状态。
2． NETWORK_IDLE(数字值为1)，浏览器已选择好⽤什么编码格式来播放媒体，但是尚未建⽴⽹络连接。
3． NETWORK_LOADING(数字值为2)：媒体数据加载中
4． NETWORK_NO_SOURCE(数字值为3)，没有⽀持的编码格式，不执⾏加载。
currentTime属性与duration属性
video元素或audio元素的currentTime属性来读取媒体的当前播放位置(单位是s)，也可以通过修改currentTime属性来修改当前播放位置，如果修改的位置上没有可⽤的媒体数据时，将抛出INVALID_STATE_ERR异常；
video元素或audio元素的duration属性来读取媒体⽂件总的播放时间。
我们可以来做demo如下：
HTML代码如下：
<video id="video"controls width=640height=360autoplay>
<source src="v"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代码如下：htmlbutton属性
var ElementById("video");
function getCurTime(){
/
/ 获得当前视频或者⾳频时间的位置
alert(myVid.currentTime);
}
function setCurTime(){
// 给当前的视频或者⾳频设置5s时间的位置
myVid.currentTime=5;
}
function duration() {
//读取媒体⽂件总的播放时间单位为S
alert(myVid.duration);
}
⼤家可以复制代码，换⼀张视频地址就可以看到效果了~；
played属性，paused属性与ended属性
played：video元素或audio元素的played属性来返回⼀个TimeRanges对象，从该对象中可以读取媒体⽂件的已播放部分的时间段。开始时间为已播放部分的开始时间，结束时间为已播放部分的结束时间。
paused属性：使⽤video元素或audio元素的paused属性来返回⼀个布尔值，表⽰是否处于暂停播放中，true表⽰媒体暂停播放，false表⽰媒体正在播放；
ended属性：使⽤video元素或audio元素的ended属性来返回⼀个布尔值，表⽰是否播放完毕，true表⽰媒体播放完毕，false表⽰媒体还没有播放完毕。
HTML代码如下：
<video id="video"controls width=640height=360autoplay loop>
<source src="v"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="played()"type="button">读取媒体⽂件的已播放部分的时间段</button>
<button onclick="paused()"type="button">是否处于暂停播放</button>
<button onclick="ended()"type="button">是否播放完毕</button>
JS代码如下：
var ElementById("video");
function played() {
//读取媒体⽂件的已播放部分的时间段
console.log(myVid.played);
}
function paused() {
// 是否处于暂停播放
alert(myVid.paused);
}
function ended() {
// 是否播放完毕
ded);
}
defaultPlaybackRate属性与playbackRate属性
defaultPlaybackRate属性：可以使⽤video元素或者audio元素的defaultPlaybackRate属性读取或修改媒体默认的播放速率。
playbackRate属性：可以使⽤video元素或者audio元素的playbackRate属性读取或修改媒体当前的播放速率。
volume属性与muted属性
volume属性：使⽤video元素或audio元素的volume属性读取或修改媒体的播放⾳量，范围为0到1,0为静⾳，1为最⼤⾳量。
muted属性：使⽤video元素或audio元素的muted属性读取或修改媒体的静⾳状态，该值为布尔值，true表⽰处于静⾳状态，false表⽰处于⾮静⾳状态。
HTML代码如下：
<video id="video"controls width=640height=360autoplay loop>
<source src="v"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="volume()"type="button">读取或修改媒体的播放⾳量</button>
<button onclick="muted()"type="button">读取或修改媒体当前的静⾳状态</button>
JS代码如下：
var ElementById("video");
function volume(){
// 读取或修改媒体的播放⾳量
myVid.volume = 0.1;
}
function muted() {
/
/读取或修改媒体当前的静⾳状态
myVid.muted = true;
}
⼤家可以使⽤下，当我点击”读取或修改媒体的播放⾳量”按钮时候，声⾳会变的很⼩，当我点击”读取或修改媒体当前的静⾳状态”按钮时候，视频完全就没有声⾳。
###⽅法
video元素与audio元素有以下四种⽅法；
play⽅法：使⽤play⽅法来播放媒体，⾃动将元素的paused属性的值变为false。
pause⽅法：使⽤pause⽅法来暂停播放，⾃动将元素的paused属性的值变为true。
load⽅法，使⽤load⽅法来重新载⼊媒体进⾏播放，⾃动将元素的playbackRate属性的值变为defaultPlaybackRate 属性的值，⾃动将元素的error的值变为null。
下⾯是播放和暂停的demo如下：
<video id="video"controls width=640height=360>
<source src="v"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="play()">播放</button>
<button onclick="pause()">暂停</button>
JS代码如下：
var ElementById("video");
// 监听视频播放结束的事件
myVid.addEventListener("ended",function(){
alert("播放结束");
},true);
// 发⽣错误
myVid.addEventListener("error",function(){
code) {
case1:
alert("视频的下载过程被中⽌");
break;
case2:
alert("⽹络发⽣故障，视频的下载过程被中⽌");
break;
case3:
alert("解码失败");
break;
case4:
alert("不⽀持播放的视频格式");
break;
default:
alert("发⽣未知错误");
}
},false);
function play() {
// 播放视频
myVid.play();
}
function pause() {
// 暂停播放
myVid.pause();
}
如上代码，默认的情况下是不⾃动播放，当我点击播放按钮时候，就播放，当我点击暂停按钮时候就停⽌当前的播放。
canPlayType⽅法：
使⽤canPlayType⽅法来测试浏览器是否⽀持指定的媒体类型，该⽅法定义如下：
var support = videoElement.canPlayType(type);
videoElement表⽰页⾯上的video元素或audio元素，该⽅法使⽤⼀个参数type，该参数的指定⽅法与source元素的type参数的指定⽅法相同，⽤播放⽂件的MIME类型来指定，可以在指定的字符串中加上表⽰媒体编码格式的codes参数。
该⽅法可能返回的值如下所⽰：
1. 空字符串：表⽰浏览器不⽀持此种媒体类型。
2. maybe: 表⽰浏览器可能⽀持此种媒体类型。
3. probably： 表⽰浏览器确定⽀持此种媒体类型。
HTML代码如下：
<video id="video"controls width=640height=360>
<source src="v"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="canPlayType()">canPlayType⽅法</button>
JS代码如下：
var ElementById("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元素或audio元素的事件⽅式有2种，第⼀种是监听的⽅式，使⽤video元素或audio元素的addEventListener⽅法来对事件的发⽣进⾏监听，该⽅法定义如下：
videoElement.addEventListener(type,listener,userCapture);
如上的监听⽅式和我们的JS的监听的⽅式⼀样，不做详细介绍，我们来看看第⼆种事件监听⽅式是为javascript脚本中常见的获取事件句柄的⽅式，如下所⽰：
<video id=”” src=”” onplay=”begin()”></video>
function begin(){}
事件描述
loadstart浏览器开始在⽹上寻媒体数据
progress浏览器正在获取媒体数据
suspend浏览器暂停获取媒体数据，但是下载过程中并没有正常结束
abort浏览器在下载完全部媒体数据之前中⽌获取媒体数据，但是并不是由错误引起的
error获取媒体数据过程中出错
emptied暂不考虑，可以⽹上看
stalled浏览器尝试获取媒体数据失败
play即将开始播放，当执⾏了play⽅法时触发，或数据下载后元素被设为autoplay
pause播放暂停，当执⾏了pause⽅法触发
loadedmetadata浏览器获取完媒体的时长和字节数
loadeddata浏览器已加载完毕当前播放位置的媒体数据，准备播放
waiting可以暂不看
playing正在播放
canplay浏览器能够播放媒体，但估计以当前播放速率不能直接将媒体播完，播放期间需要缓冲canplaythrough浏览器能够播放媒体，但估计以当前播放速率能将媒体播完，不再需要缓冲seeking Seeking变为true，表⽰浏览器正在请求数据
seeked Seeking属性变为false，表⾯浏览器停⽌请求数据
timeupdate当前播放位置发⽣改变，可能是播放过程中的⾃然改变，也可能是⼈为改变，或由于播放不能连续⽽发⽣的跳变。
ended播放结束后停⽌播放
ratechange DefaultplaybackRate属性或playbackRate属性发⽣改变
durationchange播放时长发⽣改变
volumechange volume属性或muted属性发⽣改变
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论