Search⌘ K
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Video Resilient Web Pages and the Audio Tag

Explore how to embed audio and video elements in web pages using HTML5 tags. Understand fallback methods when video is unsupported, discover audio formats like MP3 and Ogg, and learn to add subtitles with the track tag for better accessibility and richer user experience.

We'll cover the following...

Catering non-support for <video> tag in the browser

If your web browser does not support the <video> tag, you can fall back to the old style of embedding video:

HTML
<video controls >
  <source src="Video/Caribbean.webm" type="video/webm" />
  <source src="Video/Caribbean.mp4" type="video/mp4" />
  <embed>
    <!-- Old style markup for playing video -->
  </embed>
</video>

In the body of <video>, simply add the <embed>, <object>, or <iframe> markups to provide the non-HTML5 video.

Now let’s see what we can do if we have audio files on our hands and want to embed those into our webpage.

Using the <audio> tag

The <audio> tag is as simple to use as <video>, it follows the same pattern shown in the following code snippet:

HTML
<body>
  <h1>Hey dude, listen to one of my favorite ringtones!</h1>
  <audio controls>
    <source src="Audio/Good%20News.mp3" type="audio/mpeg" />
  </audio>
</body>

Similarly to <video>, the audio player is displayed on the web page, as ...