Lesson 6 – HTML5 Audios And Videos

In addition to images, you can also include audios and videos to your HTML5 document without using an external plugin.

Let us start with the audio first.

Adding Audios

You can directly embed an audio file into your HTML5 document or browser using the audio <audio> element. Have a look at the following code snippet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Audios</title>
</head>
<body>
    <h1>Including Images in HTML5 Document</h1>

    <audio controls autoplay>
        <source src="audio.mp3" type="audio/ogg">
        <source src="audio.ogg" type="audio/mpeg">
        <source src="audio.wav" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
</body>
</html>

An alternative method is to add source attribute directly into the opening audio tag such as:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Audios</title>
</head>
<body>
    <h1>Including Images in HTML5 Document</h1>

    <audio controls src="audio.mp3" controls autoplay>
        Your browser does not support the audio element.
        </audio>
</body>
</html>

The above example uses the browser’s default set of controls to include audio to an HTML5 document. The source attributes only defines one source in this particular case.

You can also convert your audio files to links and play these files by clicking on them. Let’s try out the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Audios</title>
</head>
<body>
    <h1>Including Images in HTML5 Document</h1>

   <p><a href="audio.mp3"></a>Track 1</p>
   <p><a href="audio.ogg"></a>Track 2</p>
   <p><a href="audio.wav"></a>Track 3</p>
</body>
</html>

All the modern browsers support the <audio> tag. However, there is no standard when it comes to actual file formats. For example, IE9 and Safari prefer Mp3 whereas rest of the browsers support open-source Ogg standard. The best way to overcome this hurdle is to supply a version of each of these formats to the browsers.

Adding Videos

The process of adding videos to HTML5 document is very much similar to adding audios. The only difference is that you will use video <video> tag instead of audio <audio>. We will individually look at different methods of adding videos to HTML5 document.

Adding source attribute directly to the opening video tag with only one source assigned to source attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Videos</title>
</head>
<body>
    <h1>Including Videos in HTML5 Document</h1>

    <audio src="woods.mov" controls autoplay>
        Your browser does not support the audio element.
        </audio>
</body>
</html>

Here is another method of adding video using browser’s default set of controls but with multiple resources.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Videos</title>
</head>
<body>
    <h1>Including Images in HTML5 Document</h1>

    <audio controls autoplay>
        <source src="woods.mov" type="video/mp4">
        <source src="woods.mp4" type="video/ogg">
        Your browser does not support the HTML5 Video element.
        </audio>
</body>
</html>

We have only dealt with Quick Time File (mov) format in our examples. However, different browsers prefer different video formats. Therefore, it is better to supply a version of each format to avoid any video rendering problem.

You can also embed videos directly from the internet by using iframe (iframe) tag. The following example demonstrates how to embed a video from YouTube.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Videos</title>
</head>
<body>
    <h1>Including Videos in HTML5 Document</h1>

    
</body>
</html>

The browser will start playing The History of Earth – Full Documentary as soon as it executes the above code.

In the next chapter, we will discuss how to create lists in HTML5