H5 video

H5 video


source 标签

如果播放失败 video 会继续看下一个source 标签,直到兼容。

<video>
	<source src="">
	<source src="">
	浏览器不支持 请升级
</video>

video标签属性

src
视频的资源地址

width
改变视频宽度

height
改变 视频高度

controls
播放控件

autoplay
自动播放

loop
循环播放

poster
视频封面,没有播放时显示的图片(视频刚加载时没有播放)

muted
当设置改属性后,它规定视频的音频输出应该被静音


videoAPI事件

play(方法)
使其播放状态,在chrome浏览器不允许浪费电的带声音播放

pause(方法)
使其暂停状态

load(方法)
强制播放器重新加载(一般会用于在改变src地址后,重新加载一下)

RequestFullscreen(方法)
全屏化函数,用户必须主动调用才行


duration(对象属性)
返回视频的总长度,js对其显示和调整

currenttime(对象属性)
返回当前时间视频位置,通过js设置播放位置,实现快进效果(以秒的形式)

volume(对象属性)
声音大小从0到1,默认最大音量为1,可以用<input type="range">取代并设置默认样式

loop(对象属性)
是否循环播放
是否循环播放​​​​(true,false),js通过按钮传递值操作是否循环(音乐)

playbackRate(对象属性)
查看或设置视频的播放速度

currentsrc(对象属性)
当前视频的位置状态
在加载能播放后才能返回地址,只能返回视频地址,不能赋值(与src的区别)

networkStateP(对象属性)
获取视频的网络状态

0 未初始化
1 视频已加载完毕 但是未使用网络(本地视频?)
2 浏览器正在下载视频资源
3 未找到视频资源

readyState(对象属性)
返回视频当前状态

0:还没获取到就绪信息
1:有数据,但是快不足以支撑
2:当前数据可用,但是没有数据来播放下一帧
3:数据正在缓冲,当前及至少下一帧可用
4:可用数据足以开始播放了


canplay(事件)
视频已经加载好开始播放了

ended(事件)
监听视频是否播放结束

timeupdate(事件)
可以监听到视频目前的播放状态
监听视频目前的播放状态,如果播放就会自动执行函数内容,不播放则相反

volumnchang(事件)
当视频声音发生改变时触发事件

seeked(事件)
拖动进度条完成时就会触发的事件
当用户对视频的进度条并且已经完成操作时会触发的事件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Raccom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值