此文章记载学习的一些笔记 有问题可以交流
前端直播–video详解
属性
基础用法
<video src="./text.mp4" width="400" height="225" controls></video>
autoplay 如果出现该属性,则视频在就绪后马上播放。
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop 循环播放。
muted muted 静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload 预加载。如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
controlslist="nodownload nofullscreen" (控制条的一些操作) 不让下载 不让全屏
稍微高级得用法
volume(要用js控制,先获取节点 值为0-1) 音量控制
currentTime(要用js控制,先获取节点 单位为秒) 播放时间控制
src (要用js控制,先获取节点 ) 地址切换 高清换超清什么的都是这么做的。如果错误了 采取另外得方式
*<video controls width="400" height:"225">
<source src="备用地址" type="video/mp4">
</video>* //这一块是备用地址切换 可以多个source 现在取src 要用currentSrc
事件
**loadstart** 视频开始播放得时候触发得事件 (视频查找) 不常用
**durationchange** 监听时间得变化 初始化得时候duration是NaN v.duration拿到视频得时长,可能只能拿到一部分,跟视频得格式有关系。
**loadedmetadata** 表示元数据已经下载完成
**loadeddata** 没有足够的事件
**progress** 下载
**canplay** 可播放监听 就是可以播放了
**canplaythrough** 可以播放 在这就可以监听播放暂停了
**play** 点击播放按钮 从暂停到播放就会触发
**pause** 点击暂停按钮 从播放到暂停就会触发
**seeking** 点击进度条某个点 只是一点击就会触发seeking 还不可播放
**seeked** 触发查找结束 这次点击结束下载完之后触发 可播放了 ***这个很关键***
**waiting** 没有足够的数据 在seeked之前 触发的事件
**playing** 没有播放到播放会触发 解码完全之后canplay之后 也会触发这个
**timeupdata** 用作播放更新得一个事件 播放会一直触发 ***非常重要***
**ended** 视频播放结束 多数用在视频结束之后插播一段广告
**error** 错误时触发 错误之后浏览器会自带重试机制
上边是一些video得用法
上一篇:直播原理
下一篇:直播流得制作