一、HTML5中的新属性
1、autoplay属性;
autoplay属性是布尔属性。其规定一旦视频就绪马上开始播放。即设置了该属性,属性将自动播放。
<video controls autoplay>
<source src="" type="">
</video>
2、controls属性;
controls属性也是布尔属性。其规定浏览器应该为视频提供播放控件。当设置了该属性时,规定不存在作者设置的脚本控件。
浏览器控件应包括:播放,暂停,定位,音量,全屏切换,字幕(可用时),音轨(可用时)。
<video controls >
<source src="" type="">
</video>
3、height属性;width属性
设置视频播放器的高度。以像素计。如:100px或者100
<video width="320" height="240" controls>
<source src="" type="">
</video>
4、loop属性;
设置循环播放属性。也是一个布尔属性。
<video controls loop>
<source src="" type="">
</video>
5、muted属性;
muted 属性是一个 布尔属性。muted 属性设置或返回音频/视频是否应该被静音。
<video controls muted>
<source src="" type="">
</video>
6、poster属性;
poster属性指定视频下载是显示的图像,或者在用户点击播放按钮前显示的图像。属性值为指定图片文件的URL。
<video controls poster=" url">
<source src="" type="">
</video>
7、perload属性;
perload属性规定是否在页面加载后再入视频。当设置了autoplay属性,则会忽略该属性。
属性值:
auto:指示一旦页面加载,则开始加载视频;
metadata:指示当页面加载后仅加载视频的元数据;
none:指示页面加载后不用加载视频。
8、src属性;
src属性指定vedio文件的本地路径。
<video controls>
<source src="URL">
</video>
二、HTML vedio事件
1、abort事件;
abort事件在视频/音频终止加载是触发。是在多媒体数据终止加载时触发,而非发生错误时触发。
var video_ele = document.querySelector("#video");
video_ele.onabort = function () {
alter("视频终止加载");
};
2、canplay事件;
canplay事件:当浏览器可以开始播放视频/音频时触发。
3、ended事件;
ended事件:当目前播放列表已经结束的时候触发。
4、error事件;
error事件:当视频加载期间发生错误时触发。
var video_ele = document.getElementById("#Video");
video_ele.onerror = function() {
alert("Error! 出错了");
};
5、durationchange事件;
durationchange事件:当视频时长已更改时触发。
var video_ele = document.getElementById("#Video");
video_ele.ondurationchange = function() {
alert("视频长度发生更改");
};
6、loadeddata事件;
loadeddata事件:当浏览器加载视频数据时触发。
video_ele.onloadeddata = function () {
alter("加载视频数据的时候");
}
7、loadstart事件;
loadstart事件:开始加载视频数据时触发。
video_ele.onloadstart = function () {
alter("开始加载视频数据");
}
8、pause事件;
pause事件:视频已经暂停时触发。
video_ele.onpause = function () {
alter("视频暂停播放");
}
9、play事件;
play事件:视频开始播放时触发。
video_ele.onplay = function () {
alter("视频开始播放");
}
10、playing事件;
playing事件:当视频因为缓冲二暂停或者停止的时候触发。
video_ele.onplaying = function () {
alter("视频正在播放");
}
11、progress事件;
progress事件:当视频正在下载时触发。
video_ele.onprogress = function () {
alter("视频正在下载");
}
12、ratechange事件;
ratechange事件:当视频播放速度发生改变时触发。
video_ele.onratechange = function () {
alter("播放速度改变");
}
13、timeupdate事件;
timeupdate事件:当视频播放位置发生变化时触发。
video_ele.ontimeupdate = function () {
alter("视频位置发生改变");
}
14、volumechange事件;
volumechange事件:当视频音量发生改变时触发。
video_ele.onvolumechange = function () {
alter("视频位置发生改变");
}
15、waiting事件;
waiting事件:当视频因需要缓冲下一帧而停止时触发。
video_ele.onwaiting = function () {
alter("等待缓冲");
}