本文概述
HTML <source>标记用作子元素, 用于为<audio>, <video>和<picture>元素定义多个媒体资源。
它用于以不同的格式(例如mp3, mp4等)提供相同的媒体内容。
当我们嵌入具有相同内容但格式不同的多个资源时, 浏览器可能会选择最兼容的格式并显示或播放该媒体文件。
<source>标记是在HTML5中引入的。
句法
<source src=" " type=" ">
以下是有关HTML <source>标记的一些规范
Display | Inline |
开始日期/结束日期 | Empty tag( Only start tag) |
Usage | Media resource |
例
<!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 | 视频/ ogg视频/ mp4视频/ webm音频/ ogg音频/ mpeg | 它确定资源的媒体类型。 |
全局属性:
<source>标记支持HTML中的Global属性。
事件属性:
<source>标记支持HTML中的Event属性。
支持的浏览器
Element | Chrome | IE | Firefox | Opera | Safari |
<source> | Yes | Yes | Yes | Yes | Yes |
评论前必须登录!
注册