代码拉取完成，页面将自动刷新
带有两个源文件的音频播放器。 浏览器会选择第一个
<audio controls>
<source type="video/mp4" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
<source type="video/webm" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">
您的浏览器不支持音频元素。
</audio>
<source> 标签用于为媒体元素指定多个媒体资源，例如 <video>、<audio> 和 <picture>。
<source> 标签允许您指定浏览器可以选择的替代视频/音频/图像文件，基于浏览器支持或视口宽度。 浏览器会选择它支持的第一个 <source>。
表中的数字指定了完全支持该元素的第一个浏览器版本。
| Element |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
| 属性 | 值 | 描述 |
|---|---|---|
| media | media_query | 接受通常在 CSS 中定义的任何有效媒体查询 |
| sizes | 指定不同页面布局的图像大小 | |
| src | URL | 在 <audio> 和 <video> 中使用 <source> 时需要。 指定媒体文件的 URL |
| srcset | URL | 在 <picture> 中使用 <source> 时是必需的。 指定要在不同情况下使用的图像的 URL |
| type | MIME-type | 指定资源的 MIME 类型 |
<source> 标签支持 HTML 中的全局属性。
<source> 标签支持 HTML 中的事件属性。
在 <video> 中使用 <source> 播放视频：
<video width="320" controls>
<source type="video/mp4" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
<source type="video/webm" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">
您的浏览器不支持 video 标签。
</video>
在 <picture> 中使用 <source> 根据视口宽度定义不同的图像：
<picture>
<source srcset="../assets/example.png" media="(max-width: 600px)">
<source srcset="../assets/sublime_text.png" media="(max-width: 1500px)">
<source srcset="../assets/chrome.svg">
<img src="../assets/example.png" alt="Flowers" style="width:auto;">
</picture>
HTML 教程: HTML Video
HTML 教程: HTML Audio
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手