【html】Video元素的属性介绍和用法

简言

HTML <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。
平常若涉及到视频内容，就会使用到它。

video

Video使用

只有一个视频源

只有一个视频的话，在\video元素中的src属性填入即可。

<video src="/video.mp4"></video>

多个视频源。

多个视频源，需要搭配source元素指定视频源，然后浏览器将会使用它所支持的第一个源。

<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

浏览器不支持该元素。在不支持 video 元素的浏览器中，<video></video> 标签中间的内容会显示，作为降级处理。

<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />

  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="/media/cc0-videos/flower.webm">WEBM</a>
  or
  <a href="/media/cc0-videos/flower.mp4">MP4</a>
  video.
</video>

video属性

常见的属性

这些属性是可以写在元素身上的属性。

属性	描述
autoplay	布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
controls	加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
crossorigin	该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：anonymous（跨域请求不验证）、use-credentials（跨域请求携带验证信息）
height	视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）
width	视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。
loop	布尔属性；循环播放。指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
muted	布尔属性，指明在视频中音频的默认设置。是否静音，默认false,即不静音
playsinline	布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内. 请注意，没有此属性并不意味着视频始终是全屏播放的。
poster	海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。
preload	该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：none: 表示不应该预加载视频。metadata: 表示仅预先获取视频的元数据（例如长度）。auto: 表示可以下载整个视频文件，即使用户不希望使用它。空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。
src	要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。

其他属性

video元素的Dom对象是HTMLVideoElement类型。
HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了HTMLMediaElement 和 HTMLElement 的属性与方法。

属性	描述
videoHeight	只读属性。返回一个unsigned long 值，以 CSS pixels 的单位给出视频资源的实际高度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 HAVE_NOTHING，这个属性的值为 0。
videoWidth	只读属性。返回一个unsigned long 值，以 CSS pixels 的单位给出视频资源的实际宽度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 HAVE_NOTHING，这个属性的值为 0。
buffered	只读属性。 buffered属性会告诉浏览器哪一部分的媒体已经被下载（如果浏览器支持的话），按照标准会返回一个TimeRanges对象。
currentTime	double类型。当前播放时间，单位为秒。为其赋值将会使媒体跳到一个新的时间。
defaultPlaybackRate	double类型。控制媒体的播放速度。1.0 表示正常的播放速度，如果值小于 1.0，则播放速度会比”正常速度“慢，如果值大于 1.0，则播放速度会比”正常速度“快。0.0 是一个无效的值，并且会抛出 NOT_SUPPORTED_ERR 错误。
duration	只读double类型。媒体以秒为单位的总长度时间，如果媒体不可用，则为 0. 如果媒体可用，但时间长度未知，值为 NAN. 如果媒体是以 stream 形式传输并且没有预定长度，则值为 Inf。
ended	只读属性。表示媒体是否已经播放完毕。
paused	只读属性。指示媒体元素是否被暂停。
playbackRate	当前媒体播放的速度。该值用于实现快进、慢动作等用户控制。正常播放速度乘以该值即可得到当前速度，因此 1.0 表示正常速度。如果 playbackRate 为负值，则媒体将向后播放。
played	只读属性。媒体可被播放的范围。 TimeRanges对象。
readyState	媒体的准备状态。具体可查看
volume	表示音频的音量。值从 0.0（静音）到 1.0（最大音量）。

video方法

video方法也是继承了HTMLMediaElement 和 HTMLElement 的方法。

方法	作用
canPlayType(in DOMString type)	确定是否可以播放指定的媒体类型。返回 ‘probably’（可以）、‘maybe’（可能可以）和空字符串（不行）。
fastSeek(double time)	跳到指定时间
load()	重置媒体元素并重新开始选择媒体资源。任何待处理的事件都会被丢弃。获取多少媒体数据仍受 preload 属性的影响。在删除任何 src 属性和源元素后代后，此方法可用于释放资源。否则，除非需要在动态变化后重新扫描源元素子元素，否则通常不需要使用此方法。
pause()	暂停播放
play()	开始播放

video事件

video事件大部分是从HTMLMediaElement继承的。

事件	触发时机
canplay	浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。
canplaythrough	浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。
complete	OfflineAudioContext 渲染完成。
durationchange	duration 属性的值改变时触发。
emptied	媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。
ended	视频停止播放，因为 media 已经到达结束点。
loadeddata	media 中的首帧已经完成加载。
loadedmetadata	已加载元数据。
pause	播放已暂停。
play	播放已开始。
playing	由于缺乏数据而暂停或延迟后，播放准备开始。
progress	在浏览器加载资源时周期性触发。
ratechange	播放速率发生变化。
seeking	跳帧（seek）操作开始。
seeked	跳帧（seek）操作结束。
stalled	正在尝试获取媒体数据，但数据意外未出现。
suspend	媒体数据加载已暂停。
timeupdate	currentTime 属性指定的时间发生变化。
volumechange	音量发生变化。
waiting	由于暂时缺少数据，播放已停止。

案例

这个我写的视频画面截取网页

结语

video元素的出现，使得网页文档可以播放音视频，弥补了本无法播放视频的缺陷，以前使用其他插件播放（例如flash）。
它也可以替代canvas，作为WebRTC数据的载体。