05-video属性
视频地址分类,
1. 虚拟地址 blob:http
2. 真实地址 http
controls控制条
控制条 controls
controllist控制条项目
控制条显示哪些项目 controllist="nodownload nofullscreen"
poster贴图
贴图,也就是海报 poster="./xxx.png"
muted静音
静音播放muted
autoplay自动
自动播放, 在谷歌浏览器中以及移动端是禁止自动播放的, 如果非要自动播放的话,需要设置静音属性
loop循环
循环播放, 视频结尾的地方,自动返回视频开始的地方
preloader预加载
预加载 有三个值
None
: 提示不需要查看该视频, 服务器省流量, 提醒浏览器该视频不要缓存
Metadata
: 提示用户不需要查看数据,但是抓取元数据是很有效的,比如计算视频的长度
Auto
优先加载,如果需要的话,下载整个视频,
空字符串: 就是auto
,
如果不设置的话,会遵循浏览器的默认配置, 不同浏览器的默认设置是不同的,规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示
注意: autoplay
属性优先于 preload
, 假如用户想自动播放视频,那么很明显浏览器需要下载视频
volum音量
音量控制 , 如果直接赋值是没有用的,需要在js中进行控制
let v = document.getElementById("video")
v.volume = 0.5
currentTime时间控制
读取, 只能用js.只能使用js进行读取document.querySelector("video").currentTime
,
如果非要控制时间的话,是可以直接赋值的document.querySelector("video").currentTime = 100
// 单位是:秒
src地址
地址作用: 切换清晰度: 就是改变了播放的地址, 然后把切换之前的时间设置进入新的清晰度视频的里面, 在地址赋值的时候是相对地址,但是在输出src的时候是全路径
blod:http
虚拟地址
source多个地址
可以作为备用地址的切换
加入CDN
不稳定,那么会自动启动备用的地址
可以用source
注意,当使用一个source
的时候,是和直接使用src
是没有区别的,
也就是多个source
的时候,当前一个出错了,那么会自动寻找下一个source
, 利用这个原理,我们可以给每一个source
切换不同的域名,这样子就可以解决这些问题
currentSrc地址
在用source
的时候,那么获取的src
永远是空的值,需要用currentSrc
进行来输出当前播放的地址,
也可以检测视频报错
通过这个原理,检测当前的currentSrc
是哪一个source
的值,如果是第一个source
的值,
那么就证明没有报错,如果不是第一个source
的值了,那么就是前面的source
的地址出现了,
之后进行上报错误信息给服务器