前端多媒体（4）—— video标签全面分析

测试地址：https://young-cowboy.github.io/gallery/html5_video/index.html

属性

一些属性是只读的，一些属性是可以修改从而影响视频播放的。

• autoplay：视频会马上自动开始播放，不会停下来等着数据载入结束。
  • 值可以是：autoplay；空；或者什么都不写
• preload：该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：
  • none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
  • metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
  • 空字符串：也就代指 auto 值。
  • 规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。
• controls： 提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
• loop: 视频结尾的地方，自动返回视频开始的地方。
  • 值为可以是："loop"；空；或者什么都不写
• poster： 一个海报帧的URL，用于在用户播放或者跳帧之前展示。
• height : 视频展示区域的高度，单位是CSS像素。
• width: 视频显示区域的宽度，单位是CSS像素。
• muted: 布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false
  • 值类型为："loop"；空；或者什么都不写
• src: 要嵌到页面的视频的URL。你也可以使用video块内的 source 元素来指定需要嵌到页面的视
• currentSrc: 返回当前音频/视频的 URL
• duration: 返回当前音频/视频的长度，以秒计。
• ended: 播放是否已结束
• paused: 视频是否已暂停。
• webkit-playsinline: 值：webkit-playsinline，在移动端是否原地播放而不全屏播放视频，从ios10 Safari开始支持，android场景不同效果不同
• playbackRate: 设置或返回视频的当前播放速度。
  • 只有 Google Chrome 和 Safari 支持 playbackRate 属性。
  • 1.0 正常速度
  • 0.5 半速（更慢）
  • 2.0 倍速（更快）
  • -1.0 向后，正常速度
  • -0.5 向后，半速
• seekable: 返回 TimeRanges 对象。
  • TimeRanges 对象表示音频/视频中用户可寻址的范围。
• seeking: 返回用户目前是否在视频中寻址。
• volume: 设置或返回视频的当前音量。
• buffered: 这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
• networkState : 网络状态
  • NETWORK_EMPTY = 0; // 音频/视频尚未初始化
  • NETWORK_IDLE = 1; // 音频/视频是活动的且已选取资源，但并未使用网络
  • NETWORK_LOADING = 2; //浏览器正在下载数据
  • NETWORK_NO_SOURCE = 3; // 未找到音频/视频来源
• readyState : 准备状态
  • HAVE_NOTHING = 0; 没有关于音频/视频是否就绪的信息
  • HAVE_METADATA = 1; 关于音频/视频就绪的元数据
  • HAVE_CURRENT_DATA = 2; 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
  • HAVE_FUTURE_DATA = 3; 当前及至少下一帧的数据是可用的
  • HAVE_ENOUGH_DATA = 4; 可用数据足以开始播放

事件

• abort : 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
• canplay : 媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
• canplaythrough : 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
• emptied :媒体被清空（初始化）时触发。
• ended :播放结束时触发。
• error :在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
• loadeddata : 媒体的第一帧已经加载完毕。
• loadedmetadata : 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
• loadstart :在媒体开始加载时触发。
• pause :播放暂停时触发。
• play : 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
• playing :在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
• durationchange : 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件
• progress : 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
• ratechange : 在回放速率变化时触发。
• seeked : 在跳跃操作完成时触发。
• seeking : 在跳跃操作开始时触发。
• stalled : 在尝试获取媒体数据，但数据不可用时触发。
• suspend : 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
• timeupdate : 元素的currentTime属性表示的时间已经改变。
• volumechange : 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）。
• waiting : 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。

方法

• play : 开始播放
• pause: 暂停播放
• load: 更改视频来源，并重载视频：Safari 不支持

document.getElementById("mp4_src").src="movie.mp4";
document.getElementById("ogg_src").src="movie.ogg";
document.getElementById("video1").load();

• canPlayType()：检测浏览器是否能播放指定的音频/视频类型
  • 所有浏览器都支持 canPlayType() 方法。
  • probably： 浏览器最可能支持该音频/视频类型，这里的词都是可难这种词语，是因为视频播放器不真正的播放视频是无法知道是否支持播放
  • maybe: 浏览器也许支持该音频/视频类型
  • "" （空字符串）：浏览器不支持该音频/视频类型
  • 常见的类型+解码器
    • video/ogg; codecs="theora, vorbis"
    • video/mp4; codecs="avc1.4D401E, mp4a.40.2"
    • video/webm; codecs="vp8.0, vorbis"
    • audio/ogg; codecs="vorbis"
    • audio/mp4; codecs="mp4a.40.5"

参考资料

• https://www.w3.org/wiki/HTML/Elements/video