HTML DOM and Media Element Basics
DOM and HTML Embedded Content – Part 2
Foreword: In this part of the series, I talk about HTML DOM and Media Element Basics.
By: Chrysanthus Date Published: 22 Mar 2016
Introduction
A media resource is a file that has been downloaded for an audio element or a video element. This tutorial, deals with the handling of this file during playback (play).
Do not confuse between a source element and a media element. The source element cannot be used on its own. It is an alternative to the src attribute for the audio or video element. In the absence of the src attribute, it can be used as a child for the audio or video element. Most of what is said in this part of the series concerns the audio or video resource file directly.
Audio and Video
Audio is talking, music, anything that sounds. Video consists of moving pictures plus sound (audio).
Timeline
If you have ever played an audio or video file on the computer or smartphone, you would have noticed that there is a horizontal line at the bottom of the element with a indicator that moves from left to right as the media plays. This is a timeline. Its length indicates the time, in seconds for the media. As the media is playing, the indicator indicates how much time has passed since the media (audio or video) started playing.
Streaming and Recorded Media
It is possible to have an audio or video file that has been recorded and stored in the web server computer. All of such resource can be downloaded to the client computer (browser) for playback (play). That is recorded or stored media. On the other have, sound (audio) from a radio station or video from a TV station, is live. This is streaming media. Either recorded or streaming media can be displayed by a media (audio or video) element in more or less the same way. The differences will be made clearer, as we go along, in this tutorial series.
HTML Media Interface
DOM has a media interface called, HTMLMediaElement. This is a set of attributes and methods (functions). Some of the attributes have default values, and others do not have default values. An interface has the signature (name and parameters) of a function. The implementation of the function (method) is done by the browser.
Obtaining Reference to Media Element
Assume that you have the video element,
<video src="scene.wmv" id=V1 controls>
</video>
You can obtain the reference to the video element in an ECMAScript as follows:
<script type="text/ecmascript">
media = document.getElementById('V1');
</script>
where media is a variable (name) of your choice and it holds the reference. It is also possible to create the element, using DOM (without HTML tags), creating the reference along. The following code illustrates this:
<section id=S1>
</section>
<script type="text/ecmascript">
media = document.createElement("video");
media.src = "scene.wmv";
media.controls = true;
media.id = "V1";
videoSection = document.getElementById('S1');
videoSection.appendChild(media);
</script>
At this point, no video element is seen on the page. The next line returns the reference of the HTML section element, to be held by the variable, videoSection. The last line, uses the video reference to append (include) the video element to the section element, thereby displaying the video element.
Above, you have seen two ways of obtaining the media element’s reference.
Location of Media Resource
The location of the media resource is the value of the src attribute. This value is the URL of the media resource (file). As with all src attributes, if the file is in the same directory as the HTML file, then the path can be omitted and only the name of the file (and extension) is necessary.
Now, while the media is playing, the value of the src attribute can be changed, using DOM. If this is done, the new resource will download and play. To use DOM to return the current value of the src attribute, use the expression,
media.currentSrc
where media is the media reference (a name of your choice) and currentSrc is the corresponding attribute.
Network States
The network is the Internet (cables and transmissions). When the web page is first displayed at the browser, the resource has to be downloaded (copied from the server to the browser). When the network (caused by browser) is looking for the resource but has not yet seen the file at the server, that is the NETWORK_NO_SOURCE state. When the network is downloading or trying to download the resource (file), that is the NETWORK_LOADING state. In this state, loading means copying file from server to browser and not from browser to memory (of the computer). When the network has found the resource but is not downloading (maybe part has been downloaded and stopped), that is the NETWORK_IDLE state. When the network has downloaded the resource (file), or a reasonable portion of it, but the HTML element has not yet been set up (initialized), that is the NETWORK_EMPTY state. Do not confuse between the NETWORK_NO_SOURCE and NETWORK_EMPTY states.
Each of these states is represented by a number in the DOM HTML media element interface. NETWORK_NO_SOURCE is the number 3, NETWORK_LOADING is the number 2, NETWORK_IDLE is the number, 1 and NETWORK_EMPTY is the number 0.
The name of the attribute of the DOM HTML Media Element interface, which can have any of these numbers as value is, networkState. To use DOM to return the network state (number) of the downloading process, use the expression,
media.networkState
Assuming that the resource has been downloaded successfully, then in the following code, the alert function will show 0 :
<video src="scene.wmv" id=V1 controls>
</video>
<script type="text/ecmascript">
media = document.getElementById('V1');
alert(media.networkState);
</script>
After the resource (file) or a reasonable amount of it has been downloaded to the browser, it has to be taken (copied) to the memory of the computer. Here, loading refers to taking the resource to the memory. If the value of the src attribute of the media (video or audio) is changed (by DOM), you can force the downloading and loading of the resource with the following expression:
media.load()
where media is a reference to the media element and load() is the loading method of the HTML Media Element interface. Normally, when the web page is displayed the first time or the value of the src attribute is changed, this loading process should take place automatically. However, you can still force the process using the above expression.
Media Ready States
After the media or a reasonable portion of it has been downloaded and sent to the memory, the media should play (for the user to see the video or hear the sound if it is a sound file). There are different states that indicate how ready the media is to play. The states are:
HAVE_NOTHING (numeric value 0)
No information regarding the media resource is available. No data for the current playback (playing) position is available. Media elements whose networkState attribute are set to NETWORK_EMPTY are always in the HAVE_NOTHING state. Note: playback means playing.
HAVE_METADATA (numeric value 1)
Enough of the resource has been obtained that the duration (length of program in seconds) of the resource is available. In the case of a video element (not sound element), the dimensions (length and width) of the video are also available. Width and height are part of media metadata. Duration is also part of meta data. At this state, no media data is available for the immediate current playback position.
The resource comes to the browser beginning with the meta data, followed by the actual media data (moving pictures and/or audio).
HAVE_CURRENT_DATA (numeric value 2)
Data for the immediate current playback position is available, but either not enough data is available that the user agent (browser) could successfully advance the current playback position in the direction of playback at all without immediately reverting to the HAVE_METADATA state, or there is no more data to obtain in the direction of playback.
Video (moving pictures) is a series of (still) pictures that are slightly different. They are displayed, one after another, very fast, and so you see a moving picture. Each picture is called a frame. The user agent (browser) takes some time to display each frame, but the time is very small.
In video, the Have_Current_Data state corresponds to the user agent having data from the current frame, but not the next frame, when the current playback position is at the end of the current frame; and to when playback has ended.
HAVE_FUTURE_DATA (numeric value 3)
Data for the immediate current playback position is available, as well as enough data for the user agent to advance the current playback position in the direction of playback at least a little without immediately reverting to the HAVE_METADATA state. For example, in video this corresponds to the user agent having data for at least the current frame and the next frame when the current playback position is at the instant in time between the two frames, or to the user agent having the video data for the current frame and audio data to keep playing at least a little when the current playback position is in the middle of a frame. The user agent cannot be in this state if playback has ended, as the current playback position can never advance in this case.
HAVE_ENOUGH_DATA (numeric value 4)
All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, either of the following conditions is also true:
- The user agent estimates that data is being fetched at a rate where the current playback position, if it were to advance at the effective playback rate, would not overtake the available data before playback reaches the end of the media resource.
- The user agent has entered a state where waiting longer will not result in further data being obtained, and therefore nothing would be gained by delaying playback any further.
The HAVE_CURRENT_DATA, HAVE_FUTURE_DATA and HAVE_ENOUGH_DATA states do not only have to occur at the beginning of playback. They can occur at the middle (or anywhere) of playback. Normal playing takes place only after the HAVE_ENOUGH_DATA state.
Each state is represented in the DOM HTML Element Interface by a number, as indicated above. The attribute, whose value is any of this numbers is, readyState.
If the media is not playing or if the media is just about to play, you can know (return) the exact ready state with DOM, using the following expression:
media.readyState
You can use DOM to play, pause and do a few other things on the media. The following expressions (and their meanings) can be used:
media.paused
Returns true if playback is paused; false otherwise.
media.ended
Returns true if playback has reached the end of the media resource.
media.defaultPlaybackRate [ = value ]
Returns the default rate of playback, for when the user is not fast-forwarding or reversing through the media resource. Can be set, to change the default rate of playback. The default rate has no direct effect on playback, but if the user switches to a fast-forward mode, when he returns to the normal playback mode, it is expected that the rate of playback will be returned to the default rate of playback. [ = value ] means, “= value” and it is optional in the syntax (it is for setting, in this case).
media.playbackRate [ = value ]
Returns the current rate of playback, where 1.0 is normal speed. Can be set, to change the rate of playback. The value without unit, is a multiple (multiply by) of the intrinsic speed of the media. Setting this value to something like, 0.9, which is slightly less than 1, should result in slow motion.
media.played
Returns a TimeRanges object that represents the ranges of the media resource that the user agent has played – see below.
media.volume [ = value ]
Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest. Can be set, to change the volume.
media.muted [ = value ]
Returns true if audio is muted, overriding the volume attribute, and false if the volume attribute is being honored. Can be set, to change whether the audio is muted or not.
media.play()
Sets the paused attribute to false, loading the media resource and beginning playback. If playback had ended, will restart it from the start. This is a method (expression)
media.pause()
Pauses the media and loads the resource, if necessarily. Remember that the loading process may involve downloading.
Media Duration
The DOM HTML Media Element Interface has a DOM attribute called duration.
Duration is the playing length of the resource (file) in seconds. If the resource is streaming (streaming audio or streaming video) as with live radio broadcast or live TV broadcast, then the duration (or end) of the resource is positive infinity (infinity is an extremely large number that cannot be imagined).
The duration attribute must return a number for the length of the resource (recorded) or positive infinity, for streaming media. It can also return NaN, meaning Not-a-Number, when no media data is available.
The DOM expression to return the duration of the resource, in seconds is:
media.duration
The DOM syntax to return or set the current time (official playback position) in seconds is,
media.currentTime [ = value ]
This can be used to seek.
The timeline for the media (resource) can be divided into segments. Each segment is called a time range. The DOM object (interface) called the TimeRanges object has the ranges. This object has no corresponding HTML element. The object has the start and end times for all the ranges of the media resource. The object is:
interface TimeRanges {
readonly attribute unsigned long length;
double start(unsigned long index);
double end(unsigned long index);
};
You can manipulate the object with the following expressions (and explanation):
media.length
Returns the number of ranges in the object (resource).
time = media.start(index)
Returns the time for the start of the range with the given index. The ranges from the beginning to the end are numbered (indexed): 0, 1, 2, 3, etc. The index indicates (identifies) the range.
time = media.end(index)
Returns the time for the end of the range with the given index.
Before you see (or hear) the media, the media data has to be buffered; that is, it has to be placed in some temporary store in memory. The HTMLMediaElement interface has the buffered attribute. The following expression, will return the TimeRanges object:
Media.buffered
The buffered attribute must return a new static normalized TimeRanges object that represents the ranges of the media resource that the user agent has buffered.
Seeking
The start time of each time range in the time-ranges object can be considered as a bookmark for which the media can be seek (moved) to. Unfortunately the HTMLMediaElement interface, does not provide a method (function) for seek. However, the video or audio HTML element may provide a seek button, if the Boolean controls attribute is present. The HTMLMediaElement interface has the following attributes: seeking and seekable. Their meanings are as follows:
media.seeking
Returns true if the user agent is currently seeking.
media.seekable
Returns a TimeRanges object that represents the ranges of the media resource to which it is possible for the user agent to seek.
Media Error Interface
DOM has an interface called the media error interface. It is:
interface MediaError {
const unsigned short MEDIA_ERR_ABORTED = 1;
const unsigned short MEDIA_ERR_NETWORK = 2;
const unsigned short MEDIA_ERR_DECODE = 3;
const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
readonly attribute unsigned short code;
};
While the resource downloads and loads until it plays, if an error occurs, you can write code to know the basics of the error. The meanings of the MediaError attributes are as follows:
MEDIA_ERR_ABORTED (numeric value 1)
The fetching process for the media resource was aborted by the user agent at the user's request. This situation can be arrived at, if the user clicks the stop button of the browser, after clicking Go or Reload (refresh).
MEDIA_ERR_NETWORK (numeric value 2)
A network error of some description caused the user agent to stop fetching the media resource, after the resource was established to be usable.
MEDIA_ERR_DECODE (numeric value 3)
An error of some description occurred while decoding the media resource (media data), after the resource was established to be usable.
MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4)
The media resource indicated by the src attribute was not suitable.
The code attribute can be coded as follows:
media.error.code
Returns the current error's error code, from the list above. The code can be 1, 2, 3 or 4. Here, media is the reference (a name of your choice) to the video or audio element; error is the reference (not a name of your choice) to the error object; code is the attribute of the interface (MediaError object). The HTMLMediaElement interface has the attribute called, error. This interface (MediaError object) has no corresponding HTML element.
So, error is an attribute of media. error happens to be an object of the error interface, as well as it is an attribute to media (HTMLMediaElement interface). code is an attribute to the error object. All that leads to the expression: media.error.code .
Today, the media files that would play in the HTML media elements (video and audio), are files whose extensions are: .wav and .wave. A file type with the extension, .org, should also work. For many other file types, you will need a plugin and the use of the HTML embed element.
Windows operating system has an application, called Windows Movie Maker. It may be possible to use this application to create a .wave file.
The HTMLMediaElement Interface
Most of the above concerns the HTMLMediaElement interface directly, which represents the HTML audio or the HTML video element. The complete interface is given below. I have explained many of the properties above. Some of the properties not explained are the same as the HTML element attributes. Others will be explained later.
enum CanPlayTypeEnum { "" /* empty string */, "maybe", "probably" };
interface HTMLMediaElement : HTMLElement {
// error state
readonly attribute MediaError? error;
// network state
attribute DOMString src;
readonly attribute DOMString currentSrc;
attribute DOMString crossOrigin;
const unsigned short NETWORK_EMPTY = 0;
const unsigned short NETWORK_IDLE = 1;
const unsigned short NETWORK_LOADING = 2;
const unsigned short NETWORK_NO_SOURCE = 3;
readonly attribute unsigned short networkState;
attribute DOMString preload;
readonly attribute TimeRanges buffered;
void load();
CanPlayTypeEnum canPlayType(DOMString type);
// ready state
const unsigned short HAVE_NOTHING = 0;
const unsigned short HAVE_METADATA = 1;
const unsigned short HAVE_CURRENT_DATA = 2;
const unsigned short HAVE_FUTURE_DATA = 3;
const unsigned short HAVE_ENOUGH_DATA = 4;
readonly attribute unsigned short readyState;
readonly attribute boolean seeking;
// playback state
attribute double currentTime;
readonly attribute unrestricted double duration;
Date getStartDate();
readonly attribute boolean paused;
attribute double defaultPlaybackRate;
attribute double playbackRate;
readonly attribute TimeRanges played;
readonly attribute TimeRanges seekable;
readonly attribute boolean ended;
attribute boolean autoplay;
attribute boolean loop;
void play();
void pause();
// media controller
attribute DOMString mediaGroup;
attribute MediaController? controller;
// controls
attribute boolean controls;
attribute double volume;
attribute boolean muted;
attribute boolean defaultMuted;
// tracks
readonly attribute AudioTrackList audioTracks;
readonly attribute VideoTrackList videoTracks;
readonly attribute TextTrackList textTracks;
TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
};
At this point in the series, we really must take a break. We continue in the next part.
Chrys
Related Links
DOM Basics for HTMLDOM Event Basics for HTML
HTML Text and Other Elements in DOM
HTML Grouping and Sectioning Content Elements in DOM
DOM and HTML Embedded Content
HTML Canvas 2D Context
More Related Links
PurePerl MySQL API
Major in Website Design
Web Development Course
Producing a Pure Perl Library
BACK NEXT