Embedding audio/video in your webpages.
If you ever created a webpage, writing yourself the HTML code, you certainly know that it's really easy to add a picture to your page. HTML includes, since its
beginnings (?), a tag, called <img>, and including this tag into your HTML code adds the picture, that is referenced by the URL assigned to the
src attribute, to the page. For example, for a JPG image, called "mypic", and stored at /pics, we could simply write:
<img src="/pics/mypic.jpg">
To do it as it should be done, we would also add an alt and a title attribute, and if we want add a width and a
height, or a border.
But, do you know how to add an audio or a video file to your page? What I mean, is not add a link to a multimedia file (that, if clicked by the page visitor, will result in the audio or video file being played with the default audio/video player), but embed the media in the HTML page, just as we do with pictures?
Years ago, this was not possible without some helper, as for example Flash, or Silverlight, that nowadays are obsolete, and because of serious security and accessibility issues should no longer be used. No reason to use them, anyway, because with HTML5 came the possibility to embed audio and video just the same way as pictures, using the tags <audio>, resp. <video>
For our example code, suppose that we have placed the files solarmusic.mp3 and lucy.mp4 in the directory "media", subdirectory of the Apache htdocs (if you don't know what the Apache htdocs is, have a look at my article Web development environment setup on MS Windows: Apache webserver).
Here is the HTML code of an elementary webpage, including the embedded audio file solarmusic.mp3 (I called the HTML file audio.html, and placed it in my webserver's root directory):
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>HTML audio and video</title>
</head>
<body>
<h1 align="center">HTML audio test page.</h1><br/>
<table border="0" width="100%">
<tr><td align="center">Free online music.<br/>Listen to SOLAR MUSIC LIVE by GROBSCHNITT.</td></tr>
<tr><td> </td></tr>
<tr><td align="center">
<audio
controls
width="400"
src="/media/solarmusic.mp3">
<p>
Your browser doesn't support HTML audio. Here is a <a href="/media/solarmusic.mp3">link to the audio</a> instead.
</p>
</audio>
</td></tr>
</table>
</body>
</html>
Looking at the code above, you recognize the src attribute, that is set to the URL of the audio file (just as with pictures). Then, there's something new, an attribute called controls. What might this be? It is obvious, that the webpage visitor must have a minimum possibility to control audio playback. Thus, we must include some interface, with at least a button to start/pause/resume the play of the file. One possibility is to write this interface ourselves using Javascript. Another, simple way, is to use the browser's build-in audio playback control interface. This is what's actually done by adding the controls attribute.
Now, we also understand what the width attribute is for: It defines the size of the control interface.
Remains to explain the HTML paragraph, added to the <audio> tag. Playing an embedded audio file only works in a web browser that has support for this technique. Thus, to give visitors, who use an older browser, the possibility to access the audio file directly by its URL, we add some fallback content (content that will be displayed if the browser doesn't support the <audio> element), including a link to the MP3 file.
The screenshot below shows the webpage localhost/audio.html opened in Firefox on my Windows 10 laptop.
 |
Windows 7 is shipped with Internet Explorer 11, which does not support the <audio> and <video> tags. The screenshot below shows how the webpage looks like in IE 11, accessed from my Windows 7 computer. Note, that thanks to the fallback content, it remains possible to play the MP3 file; clicking the link, opens it in Windows Media Player (this is also true for the MP4 video of the example further down in the text).
 |
The HTML code of an elementary webpage, including the embedded video file lucy.mp4 (I called the HTML file video.html, and placed it in my webserver's root directory) is very similar to the code of the audio webpage, described above:
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>HTML audio and video</title>
</head>
<body>
<h1 align="center">HTML video test page.</h1><br/>
<table border="0" width="100%">
<tr><td align="center">Free online video streaming.<br/>Watch this marvellous movie called LUCY.</td></tr>
<tr><td> </td></tr>
<tr><td align="center">
<video
controls
width="636"
height="360"
src="/media/lucy.mp4">
<p>
Your browser doesn't support HTML video. Here is a <a href="/media/lucy.mp4">link to the video</a> instead.
</p>
</video>
</td></tr>
</table>
</body>
</html>
In this case, the controls attribute adds the browser's build-in video playback control interface to the page. The attributes width and height may be used to define the size of the video frame. Note, that using these attributes will always keep the video aspect ratio unchanged.
The screenshot shows the webpage localhost/video.html opened in Firefox on my Windows 10 laptop (during playback).
 |
Here is a list of further attributes that may be used with the <audio> and <video> tags:
- autoplay makes the audio or video start playing automatically when the webpage is loading;
- loop makes the audio or video restart playing when it is finished;
- mute makes the audio or video start playing with the sound turned off by default;
- poster allows to define the URL of a picture that is displayed before the video playback is started;
- preload allows to define buffering of large files; possible values are: none (do not buffer the file), auto (do buffer the file), and metadata (only buffer the file metadata).
If you find this text helpful, please, support me and this website by signing my guestbook.