h5 视频方法、事件和属性详解

闲下来的的时间里，我一直总结之前学习过的知识，今天到video,发现对它还是不够熟悉，于是重新学习一遍。

举个例子：

<video id="video1" width="380" style="margin-top:15px;">
     <source src="video/movie.ogg" type="video/ogg"/>
     <source src="video/movie.mp4" type="video/mp4"/>
      Don't support!
</video>

虽然给video标签添上controls属性，就可以正常使用了，但是往往我们需要重置样式或者控制视频的播放，此时了解video的事件属性就非常有用了，现在我们来重新理一遍吧。

事件：play() ,pause(),load(),canPlayType()

let video = documnet.getElementById('video');
//检测该浏览器是否支持某种类型视频，例如MP4
let ability = video.canPlayType('video/mp4');//返回"probably","maybe",""
//播放
video.play();
//暂停
video.pause()
//加载，一般用于更改源，重新加载视频
video.src='other.mp4';
video.load();

属性：

currentSrc	当前视频地址
currentTime	视频已播放时间
videoWidth	视频本身的宽度
videoHeight	视频本身的高度
duration	视频长度，流返回无限
ended	是否播放结束
error	媒体错误（null:正常）
paused	是否停止
muted	是否静音
seeking	是否在seeking
volume	音量
height	播放框的高度
width	播放框的宽度

以上都是官方文档里的一般属性，下面将补充一些属性

startTime	开始时间，默认为0
defaultPlaybackRate	默认回放速度
playbackRate	当前播放速度

事件：

loadstart	客户端开始请求数据
progress	客户端正在请求数据
suspend	延迟下载
abort	客户端主动终止下载（不是因为错误引起）
error	请求数据时遇到错误
stalled	网速失速
play	play()和autoplay开始播放时触发
pause	pause()触发
loadedmetadata	成功获取资源长度
loadeddata
waiting	等待数据，并非错误
playing	开始回放
canplay	可以播放，但中途可能因为加载而暂停
canplaythrough	可以播放，视频全部加载完毕
seeking	寻找中
seeked	寻找完毕
timeupdate	播放时间改变
ended	播放结束
ratechange	播放速率改变
durationchange	资源长度改变
volumechange	音量改变

此时，就可以依靠各种属性以及事件方法来重置视频的央视是以及功能了>.<