视频元素-source标签-多格式视频支持-前端-HTML5-书闪BookChips

99 - 视频元素 - source标签 - 多格式视频支持

作者：

贺及楼

成为作者

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

视频元素 - source 标签 - 多格式视频支持

在当今的互联网世界中，视频已经成为了一种非常重要的信息传播媒介。HTML5 为我们提供了方便的视频元素 <video> 来直接在网页中嵌入视频，然而，不同的浏览器对视频格式的支持存在差异。为了确保视频能够在各种浏览器中正常播放，我们可以使用 <source> 标签来提供多种视频格式，下面就来详细介绍相关内容。

浏览器对视频格式的支持情况

不同的浏览器对视频格式的支持不尽相同，主要的视频格式有 MP4、WebM 和 Ogg，下面是一个简单的支持情况表格：

浏览器	MP4	WebM	Ogg
Chrome	支持	支持	支持
Firefox	支持	支持	支持
Safari	支持	不支持	不支持
Edge	支持	支持	不支持

从表格中可以看出，单一的视频格式很难保证在所有浏览器中都能正常播放，因此需要提供多种格式。

`<source>` 标签的作用

<source> 标签用于为 <video> 或 <audio> 元素指定多个媒体资源。浏览器会自动选择它支持的第一个视频格式进行播放。这样，即使某些浏览器不支持某种格式，也可以通过其他支持的格式来播放视频。

演示代码

下面是一个简单的 HTML 示例，展示了如何使用 <source> 标签为 <video> 元素提供多种视频格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多格式视频支持</title>
</head>
<body>
    <video width="640" height="360" controls>
        <!-- MP4 格式视频 -->
        <source src="video.mp4" type="video/mp4">
        <!-- WebM 格式视频 -->
        <source src="video.webm" type="video/webm">
        <!-- Ogg 格式视频 -->
        <source src="video.ogg" type="video/ogg">
        您的浏览器不支持视频播放。
    </video>
</body>
</html>

代码解释

<video> 元素：定义了一个视频播放器，width 和 height 属性设置了视频播放器的宽度和高度，controls 属性添加了视频播放的控制条。
<source> 标签：每个 <source> 标签都指定了一个视频文件的路径和类型。浏览器会按照 <source> 标签的顺序依次检查，选择它支持的第一个视频格式进行播放。
备用文本：如果浏览器不支持任何一种提供的视频格式，会显示 “您的浏览器不支持视频播放。” 这段文本。

总结

通过使用 <source> 标签，我们可以为 <video> 元素提供多种视频格式，从而确保视频能够在各种浏览器中正常播放。这种方法简单有效，是在网页中嵌入视频时的最佳实践。希望本文能帮助您更好地处理网页中的视频播放问题。