Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Video Resilient Web Pages and the Audio Tag

Video Resilient Web Pages and the Audio Tag

In this lesson, we'll learn how to tackle the situation where our web browser does not support the video tag or usage of the audio and track tags. Let's begin!

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 ...