HTML source 标签

HTML source 语法

在 HTML 中，source 标签用于为媒体元素（如 video、audio、picture 等）指定一个或多个媒体资源。

语法：

<source type="" src="">

说明：

source 是一个空标签。在 HTML5 中，下面 2 种写法都是可行的：

<!--写法 1-->
<source type="" src="">

<!--写法 2-->
<source type="" src="" />

当 source 用于不同的媒体元素时，它的语法略有不同，具体请参考：

HTML source 摘要

属于	HTML 标签
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML source 示例

接下来，我们通过几个简单的例子来讲解一下 HTML source 标签是如何使用的。

示例 1：source 标签用于 video（视频）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <video controls>
        <source type="video/ogg" src="medias/movie.ogg">
        <source type="video/mp4" src="medias/movie.mp4">
        <source type="video/webm" src="medias/movie.webm">
        你的浏览器不支持此视频
    </video>
</body>
</html>

页面效果如下图所示。

HTML source标签用于video（视频）

示例 2：source 标签用于 audio（音频）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <audio controls>
        <source type="audio/ogg" src="./medias/music.ogg">
        <source type="audio/mpeg" src="./medias/music.mp3">
        你的浏览器不支持播放此音频
    </audio>
</body>
</html>

页面效果如下图所示。

HTML source标签用于audio（音频）

示例 3：source 标签用于 picture（图片）

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <picture>
        <source srcset="imgs/bird-2x.jpg" media="(min-width: 1200px)">
        <img src="imgs/bird-1x.jpg" alt="小鸟">
    </picture>
</body>
</html>

页面效果如下图所示。

HTML picture标签示例

分析：

在上面例子中，我们把 bird-1x.jpg（小图）放在 img 标签中作为默认图片。当设备屏幕宽度大于或等于 1200px 时，浏览器会优先加载 source 标签中的 bird-2x.jpg（大图）；否则，直接显示默认的 img 图片。