Audio
An <audio> element is quite similar to an <img> element, but it is a more modern part of HTML and typically of more modern elements, it has a closing tag. In a sense, you could say that a <picture> gives more flexibility to an <img> element because it provides a closing tag so you can use some features such as a sources list. For this reason, when the audio element was introduced, it had a closing tag so that it offered this kind of flexibility without needing another element.
An example of an <audio> element is shown below.
<audio src="audio/06 - Natural Science.mp3"></audio>
If we put this into a webpage as is, we don't actually see anything because essentially, we have a link to an audio file, but no controls to play, rewind and so on. There are a couple of ways we can do this. The first and simplest way is to use controls that the browser provides. The second way, which we won't cover here, is to create your own controls.
To use the built-in controls, we just need to add the controls attribute (with no value) to the <audio> element. Our HTML will now look like this.
<audio controls src="audio/06 - Natural Science.mp3"></audio>
In a browser, that is going to look like
So there we have a usable, if not spectacular, audio player right in the browser and it is very easy to implement.
There are some other attributes which are used in a similar way to controls and these include loop and autoplay which are self-explanatory.
As was mentioned earlier, we can use a sources attribute instead of src to provide a list of alternative sources. The browser will play the first one in the list that it is able to. This might seem pointless because most audio files that you will encounter on a web page these days are mp3 files, but there are other formats such as ogg files (which have never become commonplace). The point, really, is that in the future, other formats may become available so it is useful to know that the option to support different formats is available.
If we update our audio element with a sources attribute, it will look something like this.
<audio controls> <source src="audio/06 - Natural Science.mp3" type="audio/mpeg"> <source src="audio/06 - Natural Science.ogg" type="audio/ogg; codec=opus"> Sorry, your browser doesn't support this audio. </audio>
Note that the text inside the <audio> element will be displayed if the browser does not recognise any of the audio formats. So this demonstrates that the <audio> element is quite powerful and allows you to quite easily include a very basic audio player into a web page.
Video
We can add a video file to a webpage in much the same way as an audio file, not surprisingly using a <video> element and it will look like this.
<video src="video/MovieCreator_20170528184319.mp4"></audio>
In the browser, it will look like this.
Again, as with audio files, we can use a sources attribute to list videos w9th different formats which would look like this.
<video controls width="560" height="315"> <source src="video/MovieCreator_20170528184319.mp4" type="video/mp4"> <source src="video/MovieCreator_20170528184319.webm" type="video/webm"> Sorry, your browser doesn't support this video. </audio>
As with images, we might want to send different sizes of video files with different resolutions, depending on the platform. However, with images, the browser decides which image file to send and it sends it. With video, file sizes are much larger and the decision on which resolution, for example, to display the video at will vary depending on the screen and the speed of the link. However, unlike images, this isn't something that is just decided before the file is sent. If you are streaming a video file, such as a movie on Netflix, the connection speed may change a number of times while you are viewing the video and the server can compensate by switching between resolutions on the fly. How that is done is beyond the scope of this course, but one of the consequences of this is that you will often find that a website will use embedded code rather than the <video> element. To illustrate this, here is as video from YouTube on inserting and embedding video in HTML. The code for this comes from YouTube (click share and then embed and you can copy the code into your HTML).
Captions and Subtitles
There are a number of reasons why a user may want to see captions or subtitles with a video. For example, it can be helpful for users with hearing difficulties or where the audio quality is poor and it is difficult to make out what is being said on the video.
To add captions or subtitles to a video, we use the <track> element and this points to a text file. The video player itself provides the control for these captions and allows them to be turned on or off or to switch between different captions. For example, we might want to switch between different languages.
There are various file formats for captions. For the web, we would normally use a webvtt (web video text tracks) file and this is simply a text file with a vtt extension. The text file contains the captions, but also a time. AS an example, a file might contain the following lines.
WEBVTT 00:00:00.00 --> 00:00:04.440 align:middle:90% This is a caption 00:00:04.440 --> 00:00:06.570 align:middle:90% This is another caption NOTE - This is a note 00:00:06.570 --> 00:00:08.540 align:middle:90% This is the last caption
There is a handy page describing how to create a webvtt file on 3PlayMedia.
A couple of points to note here are that we need to have a blank line between the captions (or caption sequences) and each each caption has a start and end time. The NOTE is just a comment in the file.
To show how this works, I have created a webvtt file called sample.vtt and I will add this to the video shown above using a <track> element.
<video controls width="560" height="315"> <source src="video/MovieCreator_20170528184319.mp4" type="video/mp4"> <source src="video/MovieCreator_20170528184319.webm" type="video/webm"> <track src="captions/sample.vtt" kind="captions" label="English" srclang="en" default> Sorry, your browser doesn't support this video. </audio>
Note the attributes associated with the <track> element. The kind attribute tells the browser what type of captions are in the file, and we will see the different types shortly. The label doesn't really specify the language as such, it is the label we give to that language option. In other words, when we click the CC button in the video player to bring up the available options, this is how the option for the vtt file we specified here will be labelled. Of course, it makes sense to use the name of the language but it is important to remember that we might want to use different names. It also helps to explain why we also need the srclang attribute because this does specify the language used in the captions. The default attribute simply specifies that this will be the option that is selected by default when we click the CC button.
The video shown below uses the <track> element to add captions to the video (note that for some reason this doesn't work at present so I may need to do some additional research on how to get this to work.
If we want to add another language option to our video, we just need to add a second <track> element such as
<track src="captions/sample.vtt" kind="subtitles" label="Spanish" srclang="es">
This would go directly after the previous <track> element
Going back to the kind attribute, notice that we used two different values for English (captions) and Spanish (subtitles). The implication here is that the spoken language in the video is English (although there is no dialog in this sample video) and the subtitles are used to translate this dialog to the users language.
We can also use a value of descriptions where the captions are being used to describe the video. For example, they may provide some information on what is happening in the video.
Another possible value is chapters and this can provide a list of chapters in the video, allowing the user to easily jump to different parts of it.
Embedding Other Media Through iframes
We have already seen a video earlier in this page which used code copied from YouTube to embed a video file. This is a really straightforward process so there is not really any need to describe it here, but there are a couple of other points worth making.
Firstly, video is not the only type of content we can embed with iframes. For example, we can also embed a map form Google or MapBox or a code demo from CodePen or Glitch amongst others.
Another important point to make is that embedding content in this way involves copying and pasting code from another site, so there are security implications. This isn't much of a concern on a page like this which I am creating for my own benefit, but if you are importing this code into a commercial site, the company you are doing this for may have policies relating to this type of thing which you may want to check out.