h5 video方法,事件,属性详解

闲下来的的时间里,我一直总结之前学习过的知识,今天到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网速失速
playplay()和autoplay开始播放时触发
pausepause()触发
loadedmetadata成功获取资源长度
loadeddata 
waiting等待数据,并非错误
playing开始回放
canplay可以播放,但中途可能因为加载而暂停
canplaythrough可以播放,视频全部加载完毕
seeking寻找中
seeked寻找完毕
timeupdate播放时间改变
ended播放结束
ratechange播放速率改变
durationchange资源长度改变
volumechange音量改变

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

  • 9
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值