MediaS2C Home « Media

• <<    Image Maps
• Graphics & Visuals     >>

HTML5 saw the introduction of new HTML tags specifically designed to deal with the audio and video media types, tracking and image sizing. Before this we had to rely on the 'one hat fits all' <object> tag which is more suitable for use with Embedded Objects.

In this lesson we investigate the new media tags, these being <audio>, <source>, <track> and <video>.

The Audio Element

The <audio> tag and its' closing </audio> tag are used to embed audio content into a HTML document.

The <audio> tag can be used in conbination with the <source> element to provide a list of audios where the first valid one is played, or standalone.

The Source Element

The <source> tag is a self closing tag used for specifying multiple media resources on media elements <audio>, <picture> and <video>.

The Track Element

The <track> tag is a self closing tag used to define timed text tracks for captions, chapters, descriptions, metadata and subtitles.

The Video Element

The <video> tag and its' closing </video> tag are used to embed video content into a HTML document.

The <video> tag can be used in conbination with the <source> element to provide a list of videos where the first valid one is played, or standalone.

Audio Example

<audio controls>
  <source src="../pages/bensound-summer.mp3" type="audio/ogg">
  <source src="../pages/bensound-summer.mp3" type="audio/mpeg">
</audio>

In the example above we are using the <audio> element in conjunction with two <source> elements. The browser will select the first <source> element it supports.

Source Example

<p>Resize the screen to see the picture change.</p>
<picture>
  <source media="(min-width:1100px)" srcset="../images/chips.webp">
  <source media="(min-width:600px)" srcset="../images/chillifriedseafoodmedium.webp">
  <img src="../images/chickenpiesmall.webp" alt="Chicken Pie" style="width:auto;">
</picture>

Resize the screen to see the picture change.

In the example above we are using the <picture> element in conjunction with two <source> elements. The browser will select the first <source> element that matches the width specified by the media attribute. When neither minimum width is reached a default image (chicken pie) is shown.

Track Example

<video controls src="../pages/HD0405.mp4" width="200" height="200">
  <track src="../pages/example_en.vtt" kind="subtitles" label="English subtitles" srclang="en">
  Sorry, your browser doesn't support embedded videos.
</video>

To see the subtitles make sure they are turned on in controls.

Contents of Example_en.vtt file

WEBVTT  

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

1
00:00:01.000 --> 00:00:03.000
Contents of example_en.vtt file

2
00:00:04.000 --> 00:00:07.000
Example_en.vtt file specified using 'track' element

3
00:00:08.000 --> 00:00:10.000
Using the 'track' element we can provide subtitles for video

Video Example

<video controls autoplay width="200" height="200" poster="../images/fbimg.JPG">
  <source src="../pages/HD0405.mp4" type="video/ogg">
  <source src="../pages/HD0405.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

Lesson 9 Complete

Play around with the media files and change the options to see what happens.

Related Tutorials/Quizzes

HTML5 Advanced Tutorials - Embedded Objects

Media Quiz

What's Next?

In the next lesson we look at the graphic and visual tags available in HTML5.

HTML5 Reference

The <audio> audio tag

The <source> source tag

The <track> track tag

The <video> video tag

• <<    Image Maps
• Graphics & Visuals     >>