HTML5 Audio and Video

Basics of HTML 5 - Part 8

Foreword: In this part of the series, I explain how to display and play video and audio at a web page.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 8 of my series, Basics of HTML 5. In this part of the series, I explain how to display and play video and audio at a web page. I assume you have read all the previous parts of the series before reaching here; this is a continuation.

Sound Files
Like images, sound exists in files in the server. In order to have sound played in a web page, you have to type the HTML 5 audio element into the web page. Sound files also exist in different types. These different types are of different technologies.

Basic Inclusion of Sound
Assuming that you know the URL of a sound file in the Internet and you have the right to access the file. The basic way to have that file into your web page is to type the following audio element in the code of your web page:

<audio src="http://www.URL.com/to/the/file.ext">
</audio>

The audio element has an attribute called the source attribute. This attribute is abbreviated to src and it is the abbreviation that is used in the start tag of the element. This attribute has the same meaning as the src attribute you saw for images in the previous part of the series. With images, the value of this attribute is the URL to the image file in a server. Here, the value is the URL to the sound file in a server. The URL ends with the name of the sound file and the file extension (ext).

An example of a sound file type (technology) for the src attribute is, ogg. The extension for ogg sound files is, .ogg. So if you have the ogg file, mysound.ogg, in the same directory as your web page, the following code will include the sound in the web page.

<audio src="mysound.ogg">
</audio>

Audio Element Attributes
There is a problem with the above audio tags: they are more or less the same thing and they are too basic. The above tags would function, but the sound may not play. If you want the sound to start playing as soon as the web page and sound file are completely downloaded, then you would have to type the autoplay attribute into the start tag as follows:

<audio src="mysound.ogg" autoplay>
</audio>

In practice there may be some delay before you hear the sound.

The autoplay attribute does not take a value. Its presence alone means that there should be auto-play. Its absence means that there should be no auto-play. There are other attributes for the audio element. You can have more than one attribute in the start tag for any HTML 5 element, as long as they are relevant. Here is a list of the attributes and their meanings.

Attribute: 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.

Boolean Attributes
An attribute such as autoplay, which does not take a value and whose effect depends on whether it is present or not, is called a Boolean attribute.

Video Files
Like images, video exists in files in the server. In order to have video played in a web page, you have to type the HTML5 video element into the web page. Video files also exist in different types. These different types are of different technologies.

Basic Inclusion of Video
Assuming that you know the URL of a video file in the Internet and you have the right to access the file. The basic way to have that file played in your web page is to type the following video element in the code of your web page:

<video src="http://www.URL.com/to/the/file.ext">
</video>

The video element has the src attribute. The value of this attribute is the URL to the video file in a server. The URL ends with the name of the video file and the file extension (ext).

An example of a video file type (technology) for the src attribute is, ogg. The extension for ogg video files is, .ogg. So if you have the ogg file, myvideo.ogg, in the same directory as your web page, the following code will include the video in the web page.

<video src="myvideo.ogg">
</video>

Video Element Attributes
There is a problem with the above video tags: they are more or less the same thing and they are too basic. The above tags would function, but the video may not play. If you want the video to start playing as the web page and video file are completely downloaded, then you would have to type the autoplay attribute into the start tag as follows:

<video src="myvideo.ogg" autoplay>
</video>

In practice there may be some delay before you see the video.

The autoplay attribute does not take a value. Its presence alone means that there should be auto-play. Its absence means that there should be no auto-play. There are other attributes for the video element. You can have more than one attribute in the start tag for any HTML5 element, as long as they are relevant. Here is a list of video element attributes and their meanings.

Attribute: 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 views 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.
muted: this attribute does not have a value. If the attribute is present, the sound of the video would be muted (silenced), at the start.
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 image.
width: The width of the video element (not the computer screen). It is in pixels (screen dots). You type the number without units; e.g. width="320".
height: The height of the video element (not the computer screen). It is in pixels (screen dots). You type the number without units e.g. width="240"

Boolean Attributes
An attribute such as autoplay, which does not take a value and whose effect depends on whether it is present or not, is called a Boolean attribute.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

HTML5 Audio and Video

Basics of HTML 5 - Part 8

Introduction

Related Links

Comments