HTML video 标签 - 绿叶网

HTML video 语法

在 HTML 中，video 标签用于在网页中嵌入一个视频播放器。它类似于 img 标签，用于嵌入一张图片。

语法：

<video width="宽度" height="高度">
    <source type="video/mp4" src="文件路径">
    <source type="video/ogg" src="文件路径">
    <source type="video/webm" src="文件路径">
    你的浏览器不支持视频播放
</video>

说明：

video 标签内部一般包含多个 source 标签和 1 个文本。source 标签用于指定视频源，你必须为它指定 src 和 type 属性。

src（必选）：表示视频文件的路径。
type（必选）：表示视频格式。常用取值有 "video/mp4"、"video/ogg"、"video/webm"。如果当前浏览器能同时识别几种视频格式，则最终将使用第一个可识别的格式文件。

如果浏览器不支持 video 标签，就会显示最后一行文本（即 “你的浏览器不支持视频播放”），如果浏览器支持 video 标签，则不会显示该文本。

video 标签的属性有很多，常用的如下表所示。

video 标签的属性
属性	说明
autoplay	是否自动播放
controls	是否显示控件
loop	是否循环播放
preload	是否预加载

autoplay、controls 和 loop 属性无需多说；而 preload 属性表示是否预加载，它有 3 个取值，如下表所示。

preload 属性取值
属性	说明
auto	预加载（默认值）
metadata	只预加载元数据（即媒体字节数、第一帧、播放列表等）
none	不预加载

提示: video 和 audio 这 2 个支持的属性几乎是一样的，小伙伴们可以对比理解一下。

HTML video 摘要

属于	HTML 标签
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML video 示例

接下来，我们通过几个简单的例子来讲解一下 HTML video 标签是如何使用的。

示例 1：video 标签的基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <video autoplay muted>
        <source type="video/ogg" src="medias/movie.ogg">
        <source type="video/mp4" src="medias/movie.mp4">
        <source type="video/webm" src="medias/movie.webm">
        你的浏览器不支持此视频
    </video>
</body>
</html>

页面效果如下图所示。

HTML video标签示例

分析：

autoplay 属性用于自动播放视频。默认情况下，video 标签实现的播放器是没有显式 “暂停/播放”、音量控制等控件的。我们可以使用 controls 属性来显示这些控件，请看下面例子。

注意: 为了不打扰用户，现代浏览器（包括 Chrome、Edge、Firefox 等）一般要求必须同时设置 muted（静音）属性，autoplay 属性才会生效。

示例 2：video 标签的 controls 属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <video controls>
        <source type="video/ogg" src="medias/movie.ogg">
        <source type="video/mp4" src="medias/movie.mp4">
        <source type="video/webm" src="medias/movie.webm">
        你的浏览器不支持此视频
    </video>
</body>
</html>

页面效果如下图所示。

HTML video标签的controls属性

分析：

controls 属性用于定义是否显示控件。