HTML 视频标签（video）详解笔记

1. 什么是 HTML 视频标签

HTML 中的 <video> 标签用于在网页中嵌入视频内容。它是 HTML5 新增的多媒体标签，无需依赖 Flash 等第三方插件即可播放视频。

基本语法：

html 复制代码

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

2. 常用属性

属性	说明
`src`	视频文件地址
`controls`	显示播放控件（播放/暂停、音量、进度条等）
`autoplay`	自动播放
`loop`	循环播放
`muted`	静音播放
`poster`	视频封面图
`width` / `height`	视频宽高
`preload`	预加载方式（`auto` / `metadata` / `none`）

2.1 controls（显示控件）

html 复制代码

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

加上 controls 后，浏览器会显示播放、暂停、音量、全屏等控件。

2.2 autoplay（自动播放）

html 复制代码

<video src="movie.mp4" autoplay muted></video>

注意：现代浏览器通常要求 autoplay 与 muted 同时使用才会生效，否则会被拦截。

2.3 loop（循环播放）

html 复制代码

<video src="movie.mp4" controls loop></video>

2.4 poster（封面图）

html 复制代码

<video src="movie.mp4" controls poster="cover.jpg"></video>

视频加载前或未播放时显示封面图片。

3. 多源视频（source 标签）

当需要兼容不同浏览器支持的视频格式时，可以使用 <source> 标签提供多个视频源：

html 复制代码

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 video 标签。
</video>

浏览器会从上到下依次尝试，直到找到能播放的格式。

4. 常用视频格式

格式	说明
MP4（H.264）	兼容性最好，几乎所有浏览器都支持
WebM	体积小，Chrome / Firefox 支持好
Ogg	较老格式，兼容性一般

5. JavaScript 控制视频

通过 JavaScript 可以控制视频的播放、暂停、音量等：

html 复制代码

<video id="myVideo" src="movie.mp4" width="400"></video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>

<script>
  var video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

5.1 常用属性和方法

属性 / 方法	说明
`video.play()`	播放视频
`video.pause()`	暂停视频
`video.currentTime`	获取 / 设置播放位置（秒）
`video.duration`	视频总时长（秒）
`video.volume`	音量（0 ~ 1）
`video.muted`	是否静音

6. 完整示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>视频标签示例</title>
</head>
<body>
  <h2>HTML 视频播放器</h2>

  <video id="myVideo" width="640" controls poster="cover.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 video 标签。
  </video>

  <br><br>

  <button onclick="playVideo()">播放</button>
  <button onclick="pauseVideo()">暂停</button>
  <button onclick="setVolume()">音量 50%</button>

  <script>
    var video = document.getElementById("myVideo");

    function playVideo() {
      video.play();
    }

    function pauseVideo() {
      video.pause();
    }

    function setVolume() {
      video.volume = 0.5;
    }
  </script>
</body>
</html>

7. 总结

<video> 是 HTML5 内置的视频播放标签，无需第三方插件。
controls 显示控件，autoplay 自动播放（需配合 muted）。
使用 <source> 提供多格式视频源，提升兼容性。
通过 JavaScript 可以灵活控制视频播放行为。