HTML <source> 标签作为 <audio><video><picture> 元素的子元素,用于定义多个媒体资源。

它用于提供相同的媒体内容的不同格式,如 mp3、mp4 等。

当我们嵌入具有相同内容但不同格式的多个资源时,浏览器可以选择最兼容的格式并显示或播放该媒体文件。

<source> 标签在 HTML5 中引入。

语法

<source src=" " type=" ">

下面是关于 HTML <source> 标签的一些规范说明:

显示内联
开始标签/结束标签空标签(只有开始标签)
用法媒体资源

示例

<!DOCTYPE html>
<html>
<head>
  <title>HTML source tag</title>
</head>
<body>
  <h2>Example of source tag</h2>
  <video controls="controls" height="200" width="300">
    <source src="flower.webm" type="video/webm">
    <source src="flower.mp4" type="video/mp4">
    Your browser does not support the HTML5 video element.
  </video>
</body>
</html>

属性:

标签特定属性:

属性描述
media媒体查询它确定链接源针对哪些媒体/设备进行了优化。
sizes 为不同页面布局指定可接受的图像尺寸。
src 它确定媒体文件的 URL。
srcset 指定不同情况下的图像 URL。仅在 <source><picture> 元素的子元素时使用。
typevideo/ogg video/mp4 video/webm audio/ogg audio/mpeg它确定资源的媒体类型。

全局属性:

HTML 中的 <source> 标签支持全局属性。

事件属性:

HTML 中的 <source> 标签支持事件属性。

支持的浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<source>

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML面试题, HTML笔试题, HTML编程思想