Audio and Video in HTML 5

Mastering HTML5 - Part 17

Forward: In this part of the series, we learn how to use the audio and video tags.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 17 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series, we learn how to use the audio and video tags. The audio tag is a double-tag element and the video tag is also a double-tag element.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Audio Tag-Pair
To have audio downloaded into your web page along with the wed page, after typing the web page address in the address bar of the browser, and clicking Go, the simplest code you need is:

<audio src="mysound.ogg" >
    You browser does not support the sound technology!
</audio>

In this code the sound file is mysound.ogg and it is in the same directory as the web page code. The extension of the audio file name is ogg, which indicates that the audio file is of type ogg. The user’s browser may not support the ogg file; in this case the text in between the audio tags would be display to the user.

Solution to Problem of supported Audio File Type
If a browser does not support one type of audio file, it can support some other type. So your audio element should be something like:

<audio>
    <source src="mysound.ogg" type="audio/ogg">
    <source src="mysound.mp3" type="audio/mpeg">
    You browser does not support the sound technology!
</audio>

Here, you have the start and end audio tags enclosing some elements. The src attribute is no longer in the start tag of the audio element. Instead you would have several source elements within the audio tags. A source element is a single tag element that fits itself between the audio or video tag pairs. The source element also has the src attribute whose value is the URL of the audio or video file. The source element also has the type attribute. In the case of audio, the value of the type attribute begins with the word, audio, followed by a forward slash and then the type of the audio file. Note: the type of the audio file may not necessarily be the extension of the audio file name.

When the web page is loaded, the browser will verify if it can play the audio type in the first source element. If it cannot, it would verify if it can play the second type in the second source element. It carries on like this for all the source attributes that are in the audio tag. You can have more than two source attributes within the audio tags. Each source element has one type. Of course the same audio information should be in the different type files. If at the end, none of the types in the source elements is supported by the browser, then the text at the end within the audio tags would be displayed. The browser should play the first audio type that it supports.

There is software you can use to create audio files; search the Internet. Consult the documentation of the software you used in producing the audio to know exactly the type of sound (audio) file produced and the extension of the sound file name produced.

Video Tag-Pair
The video tag-pair is explained in a similar way to the audio tag-pair. So, for video, you can have something like:

<video>
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
        You browser does not support the sound technology!
</video>

The Video width Attribute
The video tag has the width attribute, which is to give the width of the video at the browser in pixels (a pixel is the smallest dot that can be displayed on the screen). So the above code would be something like:

<video width="320">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
        You browser does not support the sound technology!
</video>

The width in your web page code should be the same or smaller than the actual width of the video at the server. If you make the width of the code bigger, then you would loose resolution (details) of the video display. Normally, you should give the width and height values of the video in the web page code. However, if you give only the width, a good browser will determine the corresponding height and display the video, appropriately.

Audio Tag Attributes: Meaning
src: the value is the URL of the sound file in a server.
autoplay: there is no value for this attribute. If the name (autoplay) is present, the sound will start playing as soon as the web page is downloaded. If absent, the user will have to click the play button (see below), before he hears the sound.
loop: this attribute does not have a value. If the name is present the sound will keep repeating from the beginning to the end over and over until the user leaves the web page. If absent, the sound would play only once.
controls: this attribute does not have a value. If present, the browser provides controls (buttons) such as the play, pause, and volume controls. With such controls the user can decide when and for how long he would play sound.

Video Tag Attributes: Meaning
src: the value is the URL of the video file in a server.
autoplay: there is no value for this attribute. If the name (autoplay) is present, the video will start playing as soon as the web page is downloaded. If absent, the user will have to click the play button (see below), before he sees the video.
loop: this attribute does not have a value. If the name is present the video will keep repeating from the beginning to the end over and over until the user leaves the web page. If absent, the video would play only once.
controls: this attribute does not have a value. If present, the browser provides controls (buttons) such as the play, pause, and volume controls. With such controls the user can decide when and for how long he would play the video.
audio: the value for this attribute is, muted. "muted” is the only possible value for now. If the attribute and its value are present, the sound of the video would be muted (silenced).
poster: the value for this attribute is a URL. In many cases videos take time to load. While the video is loading, an image (poster) that represents the video can be displayed. The URL, which is the value of this attribute should be that of the poster.

Time to take a break. We stop here and continue in the next part of the series.

Chrys

Broad Network

Audio and Video in HTML 5

Mastering HTML5 - Part 17

Introduction

Related Links

Comments