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 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

心得

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