10-9 钟申义 日志

10-9 钟申义 日志

视频(video)

支持的视频格式
.ogv/.mp4/.webm

Ogg:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4:带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM:带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

视频标签属性
width 设置播放器的宽度
height 设置播放器的高度
controls 显示播放原生控件,比如:播放按钮(兼容性极差),取值为布尔值
loop 循环播放,取值为布尔值
autoplay 自动播放视频(大多数浏览器禁用此功能),取值为布尔值 注意:设置该属性后,视频就绪后马上播放,需要与muted属性组合使用
muted 静音播放,取值为布尔值
poster 在播放视频之前显示广告,取值为广告的URL 缺点:如果暂停视频不能显示图片
preload 视频的预加载方式 none不预加载任何数据,即不缓存视频,尽可能减少流量的浪费 metadata只预加载视频时长、视频第一帧画面、视频宽高的信息 auto浏览器会尽可能的下载视频文件,使其播放流畅,但是会造成网络流量的浪费(默认)
注意:设置该属性后,则视频在页面加载时进行加载,并预备播放。如果使用 " autoplay ",则忽略该属性
使用DOM操作视频
HTMLVideoElement属性
获取:vde.width 设置:vde.width=800 获取:vde.height 设置:vde.height=300
vde.videoWidth 用于获取视频对象的原始宽度
vde.videoHeight 用于获取视频对象的原始高度
poster 用于获取/设置视频的海报帧 获取:vde.poster 设置 vde.poster="myvideo.mp4"
HTMLMediaElement
属性
autoplay 用于获取/设置媒体对象是否自动播放 获取 vde.autoplay 设置 vde.autoplay=true
muted 用于获取/设置媒体对象在播放时是否静音 获取:vde.muted 设置:vde.muted=true
controls 用于获取/设置媒体对象在播放时是否显示播放控件 获取:vde.controls 设vde.controls=true
loop 用于获取/设置媒体对象是否循环播放 获取:vde.loop 设置:vde.loop=true
src 用于获取/设置媒体文件的URL地址 获取:vde.src 设置:vde.src=“myvideo.mp4”
volume 用于获取/设置媒体的音量(取值范围来[0,1]) 获取:vde.volume 设置:vde.volume=0.3
playbackRate用于获取/设置媒体的播放速率,如果其值为1.0,为正常速率,如果小于1.0则低于正常速率,否则高于正常速率 获取:vde.playbackRate 设置:vde.playbackRate=1.5
paused 用于获取媒体对象是否在暂停,返回值为布尔值 vde.paused
ended 用于获取媒体对象是否播放完毕 vde.ended
currentTime 用于获取/设置媒体对象的当前播放时间(单位为秒) 获取:vde.currentTime设置:vde.currentTime=20
duration 用于获取媒体对象的总时长(单位为秒)vde.duration
方法
play() 用于实现媒体的播放 vde.play()
pause() 用于实现媒体的暂停 vde.pause()
事件
play 在媒体对象播放时触发
vde.addEventListener('play',()=>{})
vde.onplay=()=>{}
pause 在媒体对象暂停时触发
vde.addEventListener('pause',()=>{})
vde.onpause=()=>{}
ended 在媒体对象播放完毕后触发
vde.addEventListener('ended',()=>{})
vde.onended=()=>{}
loadeddata 在媒体文件的第一帧加载完成后被触发
vde.addEventListener('loadeddata',()=>{})
vde.onloadeddata=()=>{}
timeupdate 在媒体对象的currentTime属性发生变化时调用
vde.addEventListener('timeupdate',()=>{})
vde.ontimeupdate=()=>{}
canplaythrough 在媒体对象加载结束时触发
vde.addEventListener("canplaythrough",()=>{}
vde.oncanplaythrough=()=>{}
object-fit
fill 填充,默认值,不保证保持原有的比例,将视频拉伸操作填满父元素
contain 包含,保持原有视频比例,内容被缩放,父元素可能有空白区域
cover 覆盖,保持原有视频比例,宽度和高度至少有一个与父元素一致(裁剪)
none保留原有元素内容的长度和宽度,也就是说内容不会被重置
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些

心得

国庆回来的第一天,就只感觉到 “太快了” 。

标签

评论

this is is footer