HTML5Two

我们设置宽高,无法设置视频的比例,当宽高任意一方达到容器的最大值,另一边自动在video容器中居中
浏览器由上到下检测,支持哪一个就执行哪一个source 否则执行a标签

视频标签的

controls:显示播放控件
autoplay:自动播放
muted:
width、height:设置宽高
autoplay:只有用户开启静音的时候才能自动播放,以后js控制当页面操作后自动播放
loop:是否循环播放
poster:展示图片

videoDom属性

currentTime:以秒为单位,是一个number格式
duration:获取视频总时长 秒为单位 number类型
volume:获取当前音量
muted:设置是否静音
video.play 控制视频播放
video.pause 控制视频暂停
video.playbackRate
video.onerror 请求出错 触发error事件
video.onplay 播放时触发
video.onpause 暂停时触发
video.ontimeupdate 视频播放时触发
video.onended 视频播完后触发
video.onvolumechange 声音改变的时候触发
video.onloadedmetadata 当前视频长度
开启全屏使用 requestFullScreen
取消全屏是document的方法,无论是哪一个元素全屏 都是使用document全屏
视频全屏会自动生成controls
video::-webkit-media-controls
伪元素:控制滚动条
浏览器全屏时 让document.documentElement调用requestFullScreen
当视频可以开始播放的时间,视频加载就绪 oncanplay

你可能感兴趣的:(HTML5Two)