HTML <source>标签
HTML<source>标签作用
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 |
Media_query |
它确定链接源针对哪种媒体/设备进行了优化。 |
sizes |
|
它为不同的页面布局指定可接受的图像尺寸。 |
src |
|
它确定媒体文件的URL。 |
srcset |
|
指定不同情况下图像的URL。仅当 <source>是<picture>元素的子元素时使用。 |
type |
video/ogg video/mp4 video/webm audio/ogg audio/mpeg |
它确定资源的媒体类型。 |
全局属性:
<source>标签支持HTML中的全局属性。
事件属性:
<source>标签支持HTML中的Event属性。
支持浏览器