H5新特性-- 视频(笔记)

疫情严重,照顾好自己.阿风刚找到的工作没了.索性复习一下吧.
浏览器播放视频的三种方式:

<video></video>

Flash

第三方插件

标签属性
controls:显示播放的控件.(不太靠谱兼容性差)
auto-play:自动播放(兼容性差)
loop
muted:静音播放
poster:视频前的图片(广告?)
preload:预加载策略metadata,aotu,none

js属性方法
volume:0~1
playbackmate:1播放速率
play():播放,parse()暂停

特殊事件
-canplaythrough:当视频元素加载结束,立即触发此事件,视频可以播放.可以获得视频的属性duration:视频时长(单位:s)
-timeupdate:视频正在播放中(触发多次).可以获得属性currentTime:当前播放时间点.
ended:视频播放结束触发此事件.

视频专用样式
object-fit:
fill:默认拉伸,填满父元素(视频会变形)
contain:包含,不足部分留白
cover:覆盖,保持视频原有比例,令其高度或宽度有一个与父元素相同.
举个例子:<img src="xxx.mp4" style="object-fit:fill">