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的地址出现了,
之后进行上报错误信息给服务器