<source>
HTML <source> Tag
The <source> tag is an empty element. It means that the tag does not have any content, as well as a closing tag.
The <source> tag is one of the HTML5 elements. It is used to define multiple media resources in different formats: video, audio or image. This is necessary to achieve the best possible cross-browser compatibility. From the possible options browser can choose the format, which it supports and play audio and video files without any difficulty.
The <source> element can be used multiple times in one document to indicate the alternative audio/video files and images of numerous formats.
If the <source> tag is included in the <audio> or <video> tags, it should be placed before the <track> tag and after media files. It should be placed before
<img> if it’s inside a <picture> tag.
Syntax
Syntax （语法）
The <source> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<source>) tag must be closed (<source/>).
Example of the HTML <source> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
<img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
</picture>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
Example of the HTML <source> tag with the src and type attributes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type=video/ogg>
<source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Some information about video</p>
</body>
</html>
Attributes
Attributes （属性）
| Attributes | Value | Description |
|---|---|---|
| media | media_query | Indicates that the file is adapted to certain type of devices. |
| sizes | Indicates the relative acceptable size of the source.Added in HTML5. | |
| src | URL | Indicates the URL address of the media file. |
| srcset | URL | Indicates images which are used in different situations (for ipad screens, for retina screens, etc.)Added in HTML5. |
| type | Value for video:video/oggvideo/mp4video/webmValue for audio: audio/oggaudio/mpeg | Indicates the mime-type of media source. |
The <source> tag also supports the Global Attributes and the Event Attributes.