HTML Tags
Advertisements

HTML5 <source> Tag

Topic: HTML5 Tags ReferencePrev|Next

Description

The <source> element is used to specify multiple alternative media resources for the media elements like <audio> and <video>.

The following table summarizes the usages context and the version history of this tag.

Permitted Parent: A media element, like <audio> or <video>
Content: None. It is an empty element.
Start/End Tag: Start tag: required, End tag: forbidden
Version: New in HTML5

Syntax

The basic syntax of the <source> tag is given with:

HTML: <source>; XHTML: <source />

The example below shows the <source> tag in action.

<video controls="controls">
    <source src="shuttle.mp4" type="video/mp4">
    <source src="shuttle.ogv" type="video/ogg">
    Your browser does not support the HTML5 Video element.
</video>

Note: The <source> element is commonly used to provide the same media resource in multiple formats supported by different browsers.


Tag-Specific Attributes

The following table shows the attributes that are specific to the <source> tag.

Attribute Value Description
Required — The following attribute must be specified on this tag for the markup to be valid.
src URL Specifies the URL of the media file.
Optional — The following attributes are optional.
media media-query Specifies the type of the media resource i.e. what media or device the file is intended for. See CSS media types for more details.
type media-type Specifies the media type of the media resource.

Global Attributes

Like all other HTML tags, the <source> tag supports the global attributes in HTML5.


Event Attributes

The <source> tag also supports the event attributes in HTML5.


Browser Compatibility

The <source> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 3.5+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 4+
  • Opera 10.5+

Further Reading

See tutorial on: HTML5 Audio, HTML5 Video.

Related tags: <audio>, <video>.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties