PHP小码农

Appearance

video 视频 ​

HTML5 的 <video> 元素让在网页中嵌入视频变得简单直接。本节将介绍 <video> 标签的语法、属性、多格式兼容、poster 封面图以及各种控制方式。

前置知识

阅读本节前，建议先了解：audio 音频

基础概念 ​

<video> 是 HTML5 引入的原生视频元素，用于在网页中播放视频内容。与 <audio> 类似，<video> 提供了统一的 API 来控制视频播放，无需 Flash 等第三方插件。

<video> 元素支持多种视频格式，可以通过 <source> 子元素提供多种格式实现浏览器兼容，还可以通过 poster 属性设置视频封面图。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>video 视频</title>
</head>
<body>
  <h1>video 标签</h1>

  <!-- 最简单的用法 -->
  <video src="movie.mp4" controls width="640" height="360"></video>

  <hr>

  <!-- 带多格式回退和封面图 -->
  <video controls poster="cover.jpg" width="640" height="360">
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 元素。
  </video>
</body>
</html>

video 的常用属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>video 属性</title>
</head>
<body>
  <h1>video 属性</h1>

  <!-- controls：显示播放控件 -->
  <video src="movie.mp4" controls width="640" height="360"></video>

  <hr>

  <!-- poster：视频封面图（加载前或用户未播放时显示） -->
  <video src="movie.mp4" controls
         poster="movie-cover.jpg"
         width="640" height="360"></video>

  <hr>

  <!-- autoplay muted loop：静音自动循环播放 -->
  <video src="promo.mp4" autoplay muted loop
         width="640" height="360"></video>

  <hr>

  <!-- preload="none"：不预加载视频数据 -->
  <video src="movie.mp4" controls preload="none"
         width="640" height="360"></video>
</body>
</html>

详细说明 ​

video 属性详解 ​

属性值说明
srcURL视频文件路径
controls布尔显示播放控件
autoplay布尔自动播放
loop布尔循环播放
muted布尔静音
posterURL视频封面图 URL
width像素显示宽度
height像素显示高度
preloadauto/metadata/none预加载策略
playsinline布尔在 iOS Safari 中内联播放（不全屏）

poster 封面图 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>poster 封面图</title>
</head>
<body>
  <h1>poster 封面图</h1>

  <!-- poster 在视频加载前或未播放时显示 -->
  <video controls
         poster="https://example.com/thumbnails/video-cover.jpg"
         width="640" height="360">
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
  </video>

  <p>
    poster 的作用：
  </p>
  <ul>
    <li>提升视觉体验：视频未播放时显示有意义的图片</li>
    <li>减少空白：大视频加载时不会显示黑色区域</li>
    <li>引导用户：通过封面图吸引注意力</li>
  </ul>
</body>
</html>

playsinline 属性（iOS 重要） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>playsinline</title>
</head>
<body>
  <h1>playsinline 属性</h1>

  <!--
    iOS Safari 默认全屏播放视频
    添加 playsinline 属性可以在页面内内联播放
    这对于自动播放的背景视频特别重要
  -->

  <!-- 推荐：添加 playsinline 避免 iOS 全屏 -->
  <video src="promo.mp4"
         autoplay muted loop playsinline
         width="100%"
         style="max-width: 640px;"></video>

  <!-- 不推荐：iOS 上会强制全屏 -->
  <!-- <video src="promo.mp4" autoplay muted loop></video> -->
</body>
</html>

playsinline 的重要性

在 iOS 10+ 的 Safari 中，不添加 playsinline 属性的视频会自动全屏播放。如果你需要在页面中内联播放视频（如背景视频、产品展示），务必添加此属性。

多 source 格式回退 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多格式回退</title>
</head>
<body>
  <h1>视频格式回退</h1>

  <video controls poster="cover.jpg" width="640" height="360">
    <!-- 浏览器按顺序检查，使用第一个支持的格式 -->
    <source src="movie.webm" type="video/webm; codecs=vp9">
    <source src="movie.mp4" type="video/mp4; codecs=avc1.42E01E">
    <!-- 降级内容 -->
    <p>您的浏览器不支持 HTML5 视频。请
       <a href="movie.mp4">下载视频文件</a>。
    </p>
  </video>
</body>
</html>

实战示例 ​

响应式视频播放器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式视频</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 宽高比 */
      background: #000;
      border-radius: 12px;
      overflow: hidden;
    }

    .video-wrapper video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <h1>响应式视频播放器</h1>

  <div class="video-wrapper">
    <video controls playsinline preload="metadata"
           poster="video-cover.jpg">
      <source src="movie.webm" type="video/webm">
      <source src="movie.mp4" type="video/mp4">
      <p>您的浏览器不支持 HTML5 视频。</p>
    </video>
  </div>
</body>
</html>

注意事项 ​

  • 始终设置 width 和 height 或使用 CSS 保持宽高比
  • iOS Safari 需要 playsinline 属性来内联播放视频
  • autoplay 需要配合 muted 才能在大多数浏览器中工作
  • poster 图片应使用与视频相同的宽高比
  • 大视频文件应使用 preload="none" 避免浪费带宽
  • <video> 标签内的文本仅在浏览器不支持时显示

最佳实践 ​

  • 始终添加 controls 属性（除非是纯背景视频）
  • 设置 poster 封面图提升首屏体验
  • iOS 端添加 playsinline 避免强制全屏
  • 提供 WebM + MP4 两种格式确保兼容性
  • 使用 preload="metadata" 平衡加载速度和带宽
  • 使用 CSS aspect-ratio 或 padding-bottom 实现响应式视频容器

下一节

继续学习：source 媒体源

参考链接 ​