总结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 | 音量改变 |
此时,就可以依靠各种属性以及事件方法来重置视频的央视是以及功能了>.<