HTML video 视频标签

html video 标签

一念花开fyg

1668人浏览 · 2025-04-26 07:36:43

一念花开fyg · 2025-04-26 07:36:43 发布

在这里插入图片描述

1 简介

MDN-URL

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

2 快速尝试

快速使用

示例说明：上例中展示了 video 元素的简单用法。和 img 元素的使用类似，在 src 属性里加入我们需要展示的视频地址，同时也可用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。

3 特殊

<video> 标签是 HTML 5 的新标签。

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

<video>您的浏览器不支持，请更换[谷歌浏览器]()查看</video>

4 属性

全局属性

类似于其他 HTML 元素，支持全局属性；

src

要嵌到页面的视频的 URL。

可选，也可使用 video 块内的 source 元素来指定需要嵌到页面的视频。

width

视频区域的宽度，单位是 CSS 像素（仅限绝对值，不支持百分比）

height

视频区域的宽度，单位是 CSS 像素（仅限绝对值，不支持百分比）

controls

作用：若存在该属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量、拖动进度、暂停或恢复播放。

controlslist

当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些 video 元素控件。

允许的值：

nodownload 无下载
nofullscreen 禁用全屏
noremoteplayback ?未知

禁用“画中画”模式（和控件）使用 disablepictureinpicture 属性。

问题：第 1 个视频点击后下拉控件出现在最后一个视频上了。

disablepictureinpicture

防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。

禁用”画中画“

poster

作用：海报帧图片 URL, 用于在视频处于下载中的状态时提示。如果未指定该属性，则在视频第 1 帧可用之前不会显示任何内容，然后会将视频的第 1 帧作为海报(poster)帧来显示。

注意：先占位的图片会保持其自有大小，而非视频容器大小。

loop

一个布尔属性
指定后会在视频播放结束的时候，自动返回视频开始的地方，继续播放。

muted

一个布尔属性
指明在视频中音频的默认设置。
设置后，音频会初始化为静音。
false （默认）意味着视频播放的时候音频也会播放。

preload

枚举属性
指示浏览器，作者认为在播放视频之前，加载那些内容会达到最佳的用户体验。

可能是下列值：

none: 表示不应该加载视频；
metadata: 表示仅预先获取视频的元数据（例如长度）；
auto: 表示可以下载整个视频文件，即使用户不希望使用它；
‘’: 空字符串与 auto 值一致；

注意：
autoplay 属性的优先级比 preload 高。如果指定了 autoplay 属性，浏览器显然需要开始下载视频以便回放。
规范中没有强制浏览器去遵循该属性的值，这仅仅只是个提示。

以下为不常用属性

playsinline

一个布尔属性
指明视频将内嵌(inline)播放，即在元素的播放区域内。
注意：没有此属性并不意味着视频始终是全屏播放的。

crossorigin

枚举属性
指明是否使用 CORS 来获取相关视频。

允许 CORS 的资源可在 canvas 元素中被重用，而不会被污染。

允许的值：

anonymouse:
在发送跨源请求时不携带凭据（credential）信息。
也就是说，浏览器在发送 Origin: HTTP 标头时将不会携带 cookie、X.509 证书，也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置 Access-Control-Allow-Origin: HTTP 标头），资源会被污染，并且它的使用会受到限制。

user-credentials:
在发送跨源请求时携带凭据信息。
也就是说，浏览器在发送 Origin: HTTP 标头时将会携带 cookie、证书、或执行 HTTP 基本身份验证。如果服务器没有给予源站点信任（通过设置 Access-Control-Allow-Credentials: HTTP 标头），图像会被污染，并且它的使用会受到限制。

不加：
不加这个属性时，获取资源不会使用 CORS 请求（即不会发送 Origin： HTTP 请求标头），保证其在 canvas 元素中使用时不会被污染。如果指定无效值，会被当作指定了枚举关键字 anonymous 一样使用。

autoplay

作用：布尔属性，声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。

备注：自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽量避免。如果一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。

注意 1：无法用 autoplay=“false” 来关闭视频的自动播放功能，只要 video 标签中有这个属性，视频就会自动播放。要移除自动播放，需要完全删除该属性。

在某些浏览器中（例如 Chrome 70.0）中，如果没有设置 muted 属性，autoplay 将不会生效。

disableremoteplayback

一个布尔属性
用于在使用有线（HDMI, DIV 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。

在 Safari 中，可使用 x-webkit-airplay="deny" 作为兜底方案。

5 事件

loadstart

浏览器开始加载资源时触发

play

播放已开始

playing

已经在暂停或因数据不足而延迟后准备好进行播放。

pause

播放已暂停

canplay

浏览器可以播放媒体，但估计尚未缓冲足够的数据，无法流畅播放至视频结束，期间可能出现停顿以缓冲更多内容。

canplaythrough

浏览器估计它可以不间断地播放到媒体末尾，无需暂停以进行内容缓冲。

ended

视频停止播放，因为媒体已经达到结束点。

error

获取媒体数据时出现错误，或者资源的格式不受支持。

loadeddata

媒体的首帧已加载完成。

loadedmetadata

元数据已加载完毕

progress

在浏览器加载资源期间周期性触发。

emptied

媒体内容已清空；
例如：如果媒体已加载（或部分加载）完成，并调用 load() 方法重新加载。

以下为不常用

ratechange

播放速率发生变化；

seeked

拖动进度(seek)操作完成；

seeking

拖动进度操作开始；

stalled

用户代理尝试获取媒体数据，但意外地无法获取数据；

suspend

媒体数据加载已暂停；

timeupdate

由 currentTime 属性指示的播放时间已更新；

volumechange

音量发生变化；

waiting

由于暂时缺少数据而停止播放；

audioprocess

ScriptProcessorNode 的输入缓冲区已准备好进行处理。
（音频缓冲相关）

complete

已终止 OfflineAudioContext 的渲染

durationchange

duration 属性已更新

6 使用说明

提供多个视频源

浏览器并不全部支持相同的视频格式，可在嵌套的 source 元素中提供多个媒体源，浏览器会使用它能识别的第一个源。

<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    你的浏览器不支持 HTML5 视频。这里有一个
    <a href="myVideo.mp4" download="myVideo.mp4">视频</a>
    链接。
  </p>
</video>