Main Audio and Video HTML Features

HTML Embedded Content – Part 2

Foreword: In this part of the series I talk about the source element and other features of the HTML audio and video elements.

By: Chrysanthus Date Published: 18 Jan 2016

Introduction

This is part 2 of my series, HTML Embedded Content. In this part of the series I talk about the source element and other features of the HTML audio and video elements. You should have read the previous part of the series before coming here, as this is a continuation. Audio and video elements are called, media elements, in HTML.

The source Element
HTML has an element called the source element, but this element does not operate independently. It works with the audio and video elements. It has to be typed between the start and end tags of the audio or video element, but before any track element – see later. A code example for the source element is:

<source src='site.com/dir1/video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

The details of this tag are given below. There is no end tag for the source element. Attributes of the source element are: src and type.

Why the source element? – The audio or video element has the src attribute. This attribute is the URL of the audio (sound) or video file (resource). Before a web page plays a resource, it must be downloaded (automatically) from the server, first. However, the audio or video element may attempt to download a resource and the file is not at the server, or after downloading, the browser cannot play the file type. With the source elements, it is possible to have multiple URLs, beginning with the highest priority. If the first resource fails, the second one should work; if the second one fails, the third one should work; if the third one fails, the fourth one should work, and so on. It may happen that none works.

In this case, each URL goes into a source element; that is, each URL becomes a value for the src attribute of a source element. So you can have more than one source element: one URL per src attribute per source element. In this situation, there would be more than one source element per audio or video element. In this case the audio or video element may not use (have coded) its own src attribute.

The src attribute for the source element is for the URL of the resource. The type attribute is optional but handy. It enables the browser to know if it can play the resource (audio or video). Its value consists of two parameters, known as the MIME type and codecs parameter, both in the same pair of quotes.

Examples of MIME Types are:

video/mp4
video/3gpp
video/ogg
audio/ogg

Each MIME type value consists of two components. The first component, refers to the content of the file. This is followed by a forward slash. The second component is the extension of the file. It is possible for two different files with two different technologies to have the same file extension. For example, it is possible for a text file and a Microsoft document file to have the same extension, doc. That is why the first component is necessary.

The type attribute for the source element is optional. However, you should always use it. If you use it, it must have the value of the MIME type, as in, "video/ogg". The MIME parameter does not have a name part. In some situations, the MIME parameter is not enough for the type attribute. In this case the MIME parameter should be followed by the codecs parameter, which gives more precision. The codecs parameter consists of the name, codecs, followed by = , and then text in quotes. This text is given to you by the manufacturer of the resource. The codecs parameter is separated from the MIME parameter (value only) by a semicolon. Both MIME and codecs parameters are in enclosing quotes. The quotation marks for the codecs parameter and the quotations marks for the enclosing type value, have to be different.

Before we leave this section, note that the audio or video element can have more than one source element, each with its own src attribute and value. In this case, the src attribute of the audio or video element is not necessary.

Sound Files
Like images, sound exists in files in the server. Such a file is called a resource. 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 (MIME types). These different types are of different technologies. In HTML, audio means sound.

Basic Inclusion of Audio
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 the web page:

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

The audio element has an attribute called the src attribute. 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). The audio element is a double tag element. It is also an inline-block element: this means it would fit itself within a line of text, as a block.

Audio Element Attributes
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. Audio element attributes and their brief meanings are as follows (details below):

src – Address (URL) of the resource
autoplay - Hint that the media resource can be started automatically when the page is loaded
loop - Whether to loop the media resource
muted - Whether to mute the media resource by default
controls - Show user agent controls
crossorigin - How the element handles crossorigin requests
preload - Hints how much buffering the media resource will likely need
mediagroup - Groups media elements together with an implicit MediaController

loop: Like the autoplay attribute, the loop attribute is a Boolean attribute, meaning its presence means true and its absence means false. The presence of loop means, that after the media has started, each time it reaches the end, it will repeat.

muted: This is a Boolean attribute. If present, the media can be played but the sound is not heard.

controls: This is also a Boolean attribute. Its presence means that the audio element should be displayed. Its absence means that the audio element should not be displayed. When displayed, you should see the play, forward, fast-forward, reverse, rewind, stop, pause and volume buttons, within the rectangle of the audio element.

I will talk about the rest of the Audio element attributes later.

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 MIME (media) 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). The video element is an inline-block element. It is a double tag element.

Video Element Attributes
Video element attributes and their brief meanings are as follows (details below):

src - Address of the resource
poster - Poster frame to show prior to video playback
autoplay - Hint that the media resource can be started automatically when the page is loaded
loop - Whether to loop the media resource
muted - Whether to mute the media resource by default
controls - Show user agent controls
width - Horizontal dimension
height - Vertical dimension
crossorigin - How the element handles crossorigin requests
mediagroup - Groups media elements together with an implicit MediaController
preload - Hints how much buffering the media resource will likely need

src: The value of this attribute is the URL of the resource (file).

poster: video would take time to download. While it is downloading, the user should see an image (poster) of the video. The value of this attribute is the URL of the image.

autoplay: This is a Boolean attribute. If present, the media would start playing automatically, without the play button pressed.

loop: Like the autoplay attribute, the loop attribute is a Boolean attribute, meaning its presence means true and its absence means false. The presence of loop means, that after the media has started, each time it reaches the end, it will repeat.

muted: This is a Boolean attribute. If present, the media can be played but the sound is not heard.

controls: This is also a Boolean attribute. Its presence means that the video element should show the play, forward, fast-forward, reverse, rewind, stop, pause and volume buttons in the rectangle of the video element.

width: You can give the video element a width that is different from that at the server (in px). The width should be the same or smaller, in order to maintain good resolution.

height: You can also give the video element a height that is different from that at the server (in px). However, avoid doing this; whenever you give the width to an HTML element, the browser chooses an appropriate height for you.

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

Chrys

Broad Network

Related Articles

Main Audio and Video HTML Features

HTML Embedded Content – Part 2

Introduction

Related Links

Comments