PHP小码农

Appearance

source 媒体源 ​

<source> 元素为 <audio>、<video> 和 <picture> 提供多个媒体源选项。浏览器会按顺序检查每个 <source>，使用第一个它支持的格式。本节将深入介绍 <source> 的各种属性和用法。

前置知识

阅读本节前，建议先了解：video 视频

基础概念 ​

<source> 是一个空元素，用于为父级媒体元素指定多个备选媒体资源。当浏览器遇到 <audio>、<video> 或 <picture> 中的 <source> 列表时，会从上到下依次检查每个 <source> 的 type 或 media 属性，选择第一个匹配的源。

这种机制让开发者可以为不同浏览器和设备提供最优的媒体格式，同时保持向后兼容。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>source 媒体源</title>
</head>
<body>
  <h1>source 元素</h1>

  <!-- video 中的 source -->
  <video controls width="640" height="360">
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogv" type="video/ogg">
    <p>不支持 HTML5 视频播放</p>
  </video>

  <hr>

  <!-- audio 中的 source -->
  <audio controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    <p>不支持 HTML5 音频播放</p>
  </audio>
</body>
</html>

详细说明 ​

source 属性详解 ​

属性说明示例
src媒体资源 URLsrc="movie.mp4"
type媒体的 MIME 类型type="video/mp4"
media媒体查询条件media="(max-width: 600px)"
srcset图片候选集（仅 picture 中）srcset="img.webp"
sizes尺寸条件（仅 picture 中）sizes="100vw"

type 属性与 codecs ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>type 与 codecs</title>
</head>
<body>
  <h1>type 与 codecs 参数</h1>

  <video controls width="640" height="360">
    <!-- 完整的 MIME 类型 + codecs 参数 -->
    <source src="movie-vp9.webm"
            type="video/webm; codecs=vp9,opus">
    <source src="movie-vp8.webm"
            type="video/webm; codecs=vp8,vorbis">
    <source src="movie-h264.mp4"
            type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
    <source src="movie-h265.mp4"
            type="video/mp4; codecs=hvc1">
    <p>不支持 HTML5 视频播放</p>
  </video>
</body>
</html>

codecs 参数的作用

指定 codecs 参数可以让浏览器在不下载文件的情况下判断是否支持该编码格式，避免浪费带宽下载不支持的文件。

media 属性（条件选择） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>source media</title>
</head>
<body>
  <h1>source media 属性</h1>

  <!-- 根据屏幕宽度选择不同视频 -->
  <video controls playsinline width="640" height="360">
    <!-- 手机：小分辨率视频 -->
    <source src="movie-480p.mp4"
            type="video/mp4"
            media="(max-width: 600px)">
    <!-- 桌面：高分辨率视频 -->
    <source src="movie-1080p.mp4"
            type="video/mp4"
            media="(min-width: 601px)">
    <!-- 回退 -->
    <source src="movie-720p.mp4" type="video/mp4">
    <p>不支持 HTML5 视频播放</p>
  </video>
</body>
</html>

source 在 picture 中的用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>source 在 picture 中</title>
</head>
<body>
  <h1>picture 中的 source</h1>

  <!-- picture 中的 source 使用 type 和 media 进行格式协商和艺术指导 -->
  <picture>
    <source media="(max-width: 480px)"
            srcset="photo-mobile.avif" type="image/avif">
    <source media="(max-width: 480px)"
            srcset="photo-mobile.webp" type="image/webp">

    <source srcset="photo-desktop.avif" type="image/avif">
    <source srcset="photo-desktop.webp" type="image/webp">

    <img src="photo-desktop.jpg"
         alt="风景照片"
         width="1200" height="800">
  </picture>
</body>
</html>

格式兼容回退策略 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>格式回退策略</title>
</head>
<body>
  <h1>推荐格式回退策略</h1>

  <!-- 视频推荐：WebM(VP9) -> MP4(H.264) -->
  <video controls width="640" height="360">
    <source src="movie.webm" type="video/webm; codecs=vp9,opus">
    <source src="movie.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
    <p>不支持视频播放：<a href="movie.mp4">下载 MP4</a></p>
  </video>

  <hr>

  <!-- 音频推荐：Opus -> Ogg Vorbis -> MP3 -->
  <audio controls>
    <source src="music.opus" type="audio/opus">
    <source src="music.ogg" type="audio/ogg; codecs=vorbis">
    <source src="music.mp3" type="audio/mpeg">
    <p>不支持音频播放：<a href="music.mp3">下载 MP3</a></p>
  </audio>
</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 {
      width: 100%;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <h1>HTML5 视频教程</h1>
  <p>本视频介绍 HTML5 video 标签的基本用法。</p>

  <video controls
         playsinline
         preload="metadata"
         poster="tutorial-cover.jpg">
    <source src="tutorial.webm" type="video/webm; codecs=vp9,opus">
    <source src="tutorial.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
    <p>您的浏览器不支持 HTML5 视频。
       请<a href="tutorial.mp4">下载视频文件</a>观看。</p>
  </video>

  <p>视频时长约 5 分钟，建议在 WiFi 环境下观看。</p>
</body>
</html>

注意事项 ​

  • <source> 必须放在 <audio>、<video> 或 <picture> 内部
  • <source> 是空元素，不需要结束标签
  • 当父元素设置了 src 属性时，<source> 会被忽略
  • type 属性应包含完整的 MIME 类型（含 codecs 参数）
  • 浏览器按 <source> 的顺序检查，将最优格式放在前面
  • 降级文本（<p> 标签）放在所有 <source> 之后

最佳实践 ​

  • 为视频提供 WebM（VP9）+ MP4（H.264）两种格式
  • 为音频提供 Opus/Ogg + MP3 两种格式
  • 在 type 中包含 codecs 参数提高格式判断准确性
  • 将新格式放在前面，旧格式放在后面
  • 在 <audio>/<video> 末尾提供降级文本和下载链接
  • picture 中使用 type 做格式协商，用 media 做艺术指导

下一节

继续学习：track 字幕与文本轨道

参考链接 ​