HTML5 vedio

一、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("等待缓冲");
    }