MULTIMEDIA IN HTML - VIDEO AND AUDIO CONTENT
MULTIMEDIA IN HTML - VIDEO AND AUDIO CONTENT
MULTIMEDIA IN HTML - VIDEO AND AUDIO CONTENT
We have previously discussed the uses of multimedia like images and video with audio. In the previous article we discussed how to embed images in html and the different advantages that come with it. Today we will look at embedding videos with audio content, now we are comfortable with adding simple images to a webpage.
In this article we will look at doing just that with the <video> and <audio> elements; we will then finish off by looking at how to add captions/subtitles to your videos.
TOPICS
Let us break this article into topics in order to make this article for us to understand completely. Please note that we won't be teaching you how to create video and audio files, we will be learning to embed them in html elements.
- Video and audio content on the web
- Audio element on the web
VIDEO AND AUDIO CONTENT ON THE WEB
The first video and audio content on the web was made possible by proprietary plugin based technologies like flash “https://en.wikipedia.org/wiki/Adobe_Flash” and silverlight “https://en.wikipedia.org/wiki/Microsoft_Silverlight” . Both of these have security and accessibility issues, and are now obsolete in favor of native html solutions <video> and <audio> elements. With newer technologies on the web, there are easier ways with such tags. Let us look at them now.
The Video Element
The <video> element allows you to embed a video very easily. Let us look at a very simple example in the codeblock below:
<video src="rabbit320.webm" controls>
<p>
Your browser doesn't support HTML video. Here is a
<a href="rabbit320.webm">link to the video</a> instead.
</p>
</video>
The features of note are as follows:
Src: In the same way for the <img> element, the src source attribute contains a path to the video you want to embed. It works in the exact same manner. Remember the path could be absolute or relative, for better conditions it is more favorable to make the path to the video to be relative (in the same folder of webpage).
Controls: Users must be able to control video and audio playback (it's especially critical for people with epilepsy. You must either use the controls attribute to include the browsers own control interface or build your own interface using the appropriate API. At minimum, the interface must include a way to start and stop the media, and to adjust the volume.
Fallback Content: This will be displayed if the browser accessing the page does not support the <video> element, allowing us to provide a fallback for older browsers. This can anything you like; in this case, we have provided a direct link to the video file on the internet, so the user can at least access it some way regardless of what browser they are using.
Let us look at the diagram below to see how it will look like in an html page:
Using multiple sources formats to improve compatibility
There is one problem with the above example. It is possible that the video might not play for you, because different browsers support different video and audio formats. Fortunately there are some things that you can do to improve this from being an issue.
<video controls>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support this video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>
Here we have taken the src attribute out of the actual <video> tag, and instead included separate <source> elements that point to their own sources. In this case the browser will go through the <source> elements that point to their own sources. In this case the browser will go through the <source> elements and play the one that it has the codec to support, Inslucing the webM and MP4 sources should be enough to play your video on most platforms and browsers these days. Each of the <source> elements also has a type attribute, it is important to include it in webpages.
Other Video Features
There are a number of other features you can include when displaying an HTML video.Take a look at this example below:
<video
controls
width="400"
height="400"
autoplay
loop
muted
preload="auto"
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support this video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>The resulting user interface will look like the picture below:
Some Features include:
Width and Height : You can control the video size either with these attributes or with css. In both cases, maintain their width and height ratio. If the aspect ratio is not maintained by sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.
Autoplay : Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.
Loop: Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use it if really necessary.
Poster: The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.
THE AUDIO ELEMENT
The <audio> element works just like the <video> element, with a few small differences as outlined below. A typical example might look like so:
<audio controls>
<source src="viper.mp3" type="audio/mp3" />
<source src="viper.ogg" type="audio/ogg" />
<p>
Your browser doesn't support this audio file. Here is a
<a href="viper.mp3">link to the audio</a> instead.
</p>
</audio>
This produces something like this in the browser, notice how a fallback “href” link to the video was placed incase the browser does not support the audio format:
The audio element takes up less space than a video player, as there is no visual component, you just need to display controls to play the audio. Let us look at some other differences from HTML video:
- The <audio> element doesn't support the width and height attributes. Again, there is no visual component, so there is nothing to assign a width or height to.
- It also doesn't support the poster attribute again, since there is no visual component.
Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them. In this article, we have successfully learnt and understood how to embed video and audio elements in html documents. Remember to practice as that is the best way to become a better coder.
Want to watch videos? Check out our youtube channel
What's Your Reaction?
