视频元素-source标签-source标签的用法-前端-HTML5-书闪BookChips

100 - 视频元素 - source标签 - source 标签的用法

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:17:57

视频元素 - source 标签 - source 标签的用法

在 HTML5 中，<video> 元素为网页开发者提供了在网页上嵌入视频的便捷方式。然而，不同的浏览器对视频格式的支持存在差异，为了确保视频能在各种浏览器中正常播放，我们可以使用 <source> 标签。本文将详细介绍 <source> 标签的用法。

一、`<source>` 标签简介

<source> 标签是 HTML5 中新增的标签，它主要用于为 <video> 或 <audio> 元素指定多个媒体资源。通过使用 <source> 标签，我们可以提供多种不同格式的视频文件，浏览器会根据自身对视频格式的支持情况，选择最合适的视频文件进行播放。

二、基本语法

<source> 标签是一个空标签，它的基本语法如下：

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

在上述代码中，<video> 元素用于创建一个视频播放器，<source> 标签用于指定视频文件的来源。每个 <source> 标签都有 src 属性和 type 属性：

src 属性：用于指定视频文件的 URL。
type 属性：用于指定视频文件的 MIME 类型，这样浏览器可以在下载视频文件之前就知道该文件的类型，从而快速判断是否支持该格式。

如果浏览器不支持任何一个 <source> 标签指定的视频格式，就会显示 <video> 元素中的文本内容，提示用户浏览器不支持视频播放。

三、不同浏览器对视频格式的支持情况

不同的浏览器对视频格式的支持有所不同，常见的视频格式及其支持情况如下表所示：
| 视频格式 | MIME 类型 | Chrome | Firefox | Safari | Edge |
| —— | —— | —— | —— | —— | —— |
| MP4 | video/mp4 | 支持 | 支持 | 支持 | 支持 |
| WebM | video/webm | 支持 | 支持 | 不支持 | 支持 |
| Ogg | video/ogg | 支持 | 支持 | 不支持 | 不支持 |

从表中可以看出，MP4 格式的兼容性最好，几乎所有主流浏览器都支持。因此，在使用 <source> 标签时，建议将 MP4 格式的视频文件放在前面。

四、演示代码及解释

以下是一个完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Source 标签演示</title>
</head>
<body>
  <h1>使用 source 标签播放视频</h1>
  <video width="640" height="360" controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <source src="example.ogg" type="video/ogg">
    您的浏览器不支持视频播放。
  </video>
</body>
</html>

在这个示例中，我们创建了一个视频播放器，并使用 <source> 标签指定了三种不同格式的视频文件：MP4、WebM 和 Ogg。浏览器会按照 <source> 标签的顺序依次检查，找到第一个支持的视频格式并播放。如果所有格式都不支持，就会显示提示信息。

五、总结

<source> 标签是 HTML5 中一个非常实用的标签，它可以帮助我们解决不同浏览器对视频格式支持不一致的问题。通过为 <video> 元素提供多种视频格式的选择，我们可以确保视频在各种浏览器中都能正常播放。在使用 <source> 标签时，建议将兼容性最好的 MP4 格式放在前面，以提高视频的播放成功率。

希望本文能帮助你更好地理解和使用 <source> 标签，让你的网页视频播放更加流畅和兼容。