跳到主要内容

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