2386

12 分钟

#HTML 的 <video> 标签

<video> HTML 元素用于在文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。

#属性

  • autoplay: 一个布尔属性;声明该属性后,视频会尽快自动开始播放,不会停下来等待数据全部加载完成。
  • controls: 如果存在该属性,浏览器会在视频底部提供一个控制面板,允许用户控制视频的播放,包括音量、拖动进度、暂停或恢复播放。
  • controlslist: 当浏览器显示视频底部的播放控制面板(例如,指定了 controls 属性)时,controlslist 属性会帮助浏览器选择在控制面板上显示哪些 video 元素控件。
  • crossorigin: 该枚举属性指明是否使用 CORS 来获取相关视频。允许 CORS 的资源可在 <canvas> 元素中被重用,而不会被污染。允许的值如下:
    • anonymous : 在发送跨源请求时不携带凭据(credential)信息。也就是说,浏览器在发送 Origin: HTTP 标头时将不会携带 cookie、X.509 证书,也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任(也就是说没有设置 Access-Control-Allow-Origin: HTTP 标头),资源会被污染,并且它的使用会受到限制。
    • Origin: : 在发送跨源请求时不携带凭据(credential)信息。也就是说,浏览器在发送 HTTP 标头时将不会携带 cookie、X.509 证书,也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任(也就是说没有设置 Access-Control-Allow-Origin: HTTP 标头),资源会被污染,并且它的使用会受到限制。
    • use-credentials : 在发送跨源请求时携带凭据信息。也就是说,浏览器在发送 Origin: HTTP 标头时将会携带 cookie、证书,或执行 HTTP 基本身份验证。如果服务器没有给予源站点信任(通过设置 Access-Control-Allow-Credentials: HTTP 标头),图像会被污染,并且它的使用会受到限制。 不加这个属性时,获取资源不会使用 CORS 请求(即不会发送 Origin: HTTP 请求标头),保证其在 <canvas> 元素中使用时不会被污染。如果指定无效值,会被当作指定了枚举关键字 anonymous 一样使用。查看 CORS 设置属性获取更多信息。
    • Origin: : 在发送跨源请求时携带凭据信息。也就是说,浏览器在发送 HTTP 标头时将会携带 cookie、证书,或执行 HTTP 基本身份验证。如果服务器没有给予源站点信任(通过设置 Access-Control-Allow-Credentials: HTTP 标头),图像会被污染,并且它的使用会受到限制。
  • disablepictureinpicture: 防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。
  • disableremoteplayback: 一个布尔属性,用于在使用有线(HDMI、DVI 等)和无线技术(Miracast、Chromecast、DLNA、AirPlay 等)连接设备时,禁用远程播放功能。
  • height: 视频显示区域的高度,单位是 CSS 像素(仅限绝对值;不支持百分比)。
  • loop: 一个布尔属性;指定后会在视频播放结束的时候,自动返回视频开始的地方,继续播放。
  • muted: 一个布尔属性,指明在视频中音频的默认设置。设置后,音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。
  • playsinline: 一个布尔属性,指明视频将内嵌(inline)播放,即在元素的播放区域内。请注意,没有此属性并不意味着视频始终是全屏播放的。
  • poster: 海报帧图片 URL,用于在视频处于下载中的状态时显示。如果未指定该属性,则在视频第一帧可用之前不会显示任何内容,然后将视频的第一帧会作为海报(poster)帧来显示。
  • preload: 该枚举属性旨在提示浏览器,作者认为在播放视频之前,加载哪些内容会达到最佳的用户体验。可能是下列值之一:
    • none : 表示不应该预加载视频。
    • metadata : 表示仅预先获取视频的元数据(例如长度)。
    • auto : 表示可以下载整个视频文件,即使用户不希望使用它。
    • auto 空字符串: 与 值一致。
  • src: 要嵌到页面的视频的 URL。可选;你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。
  • width: 视频显示区域的宽度,单位是 CSS 像素(仅限绝对值;不支持百分比)。

创建于 2025/5/22

更新于 2025/5/27