Understanding the and elements for multimedia

Understanding the <source> and <track> elements for multimedia

The <source> tag and <track> tag in HTML5 web page are used to insert or embed <audio> tag and <video> tag in web page. Multimedia source and track caption attributes features are enhanced with these tags, which provide subtitle or caption related features for audio and video formats embedded in web page. Generally, the source tag and track tag in HTML5 web page provide audio and video track language text caption text information in the inserted multimedia object or file.

Understanding the and elements for multimedia

The <source> tag in HTML5.

The <source> tag in HTML5 web page provides web developer with multiple media resources features control in <audio> tag and <video> tag. This feature provides you audio or video file format selection features in web browser.

HTML5 Source Attributes.

  • Multiple Formats – The source tag provides you alternative format selection features, it provides compatibility features in your audio video source web browser.
  • Fallback mechanism – It provides you web browser first <source> tag selection, it executes on audio video MIME type format extension.
  • src – Defines the online URL location to insert multimedia file storage location in web page.
  • type – Indicates the MIME type of multimedia file embedded in web page, e.g., audio/mp3, video/mp4 is the file extension. Here your multimedia file object compatibility is tested.

HTML5 Source Attributes example.

<video controls width=”800″ height=”400″>

<source src=”video1.mp4″ type=”video/mp4″>

<source src=”video2.webm” type=”video/webm”>

<source src=”video3.ogv” type=”video/ogg”>

Youu web browser too old, and you need to update it.

</video>

Source tag explanation.

Your web browser will first try to start video1.mp4 file. If the current web browser cannot play this media file extension, it will try to play the video2.webm file secondly, if this file execution fails, it will try to play the video3.ogv media file. If all the above media file extensions are not supported, the current web browser will not execute these media file extensions properly.

The <track> tag in HTML5.

The <track> tag is used in HTML5 web pages to add text information to objects used in the <video> tag and <audio> tag, such as, multimedia file subtitles, media file captions, audio video file descriptions and title topics of the media object. The track tag previews the caption text track related audio video track text information in the preview multimedia object in the web browser.

HTML5 track tag attributes.

  • Text track attributes – used as text-track based information of audio video objects in multimedia content in web pages.
  • Optional attributes – The <track> tag in a multimedia object is an optional option. Track displays video audio text track information with the multimedia object being played.
  • type attributes – Indicates the type of text track in the multimedia object being played, in default properties.
  • subtitles attributes – Plays a translation of the spoken dialogue in the multimedia object used in a web page.
  • captions attributes – Provides track captions for disabled Internet users as an added multimedia object to a web page, including different sounds and multimedia object dialogue previews.
  • description attributes – Provides audio descriptions to be played in the web browser for disabled Internet users in the current web page.
  • chapter attributes – Provides marker information to be displayed in the form of multiple topic titles within the inserted multimedia object in a web page.
  • src attributes – Defines the online URL location of the track file in a web page.
  • label attributes – Provides a label as a track for the multimedia object playing in the current web page, in this you can display the language track as well as any other country language information of the multimedia playing in the web page, e.g., “Hindi”, “English”, “Japanese”, etc.
  • srclang attributes – Displays the default play language of the multimedia file track playing in the web page, e.g., hi for Hindi, en for English, jp for Japanese, etc. It helps the internet user to select the desired play multimedia object track language.

Track tag example in HTML5.

<video controls width=”700″ height=”440″>

    <source src=”video1.mp4″ type=”video/mp4″>

    <source src=”video2.webm” type=”video/webm”>

 <track src=”file2subtitles.vtt” kind=”subtitles” srclang=”hi” label=”hindi”>

    <track src=”file1subtitle.vtt” kind=”subtitles” srclang=”en” label=”English”>

    Youu web browser too old, and you need to update it.

</video>