DOM Media Controller
DOM and HTML Embedded Content – Part 4
Foreword: In this part of the series I talk about the media controller and I explain how to make a primary video and corresponding sign-language track show at the same time.
By: Chrysanthus Date Published: 22 Mar 2016
DOM Media Controller
Media Controller
A media controller is an object in the computer memory. There is no HTML element that corresponds to the media controller. A media controller is an object (interface) that controls all media elements tied to it with one command at a time. A media element is either an HTML audio element or an HTML video element.
Slaved Media Elements
Not all media elements in a web page must be tied to a media controller. Any media element tied to a media controller, becomes a slaved media element, and the controller would override many of its rights.
Creating Media Controller and making Slaves
To create a media controller, use the following syntax:
controller = new MediaController()
The operator, new and the constructor function, MediaController() returns a reference to the created media controller. In the statement, controller is a name of your choice and it holds the reference to the new media controller.
To return the controller of a media element or make the media element a slave to the controller, use the following syntax:
media.controller [ = controller ]
where media is a reference to the media element; controller here, is a reserved word, which is an attribute of any media element. Without [ = controller ] the expression returns a reference to a media controller that has already been associated to a media element. With [ = controller ] the media controller is assigned (associated) to the media element.
Assume that you have a video element with id, V1 and a controller with name, master, then to assign master to the media element (slave) you can type:
document.getElementById('V1').controller = master
Where media is “document.getElementById('V1')” and [ = controller ] is [ = master ] .
Now, a media element in HTML code, does not have the controller attribute. It is the media element in DOM (interface) that has the controller attribute. The media element in HTML code has but the mediagroup attribute that does the same thing; however, controller attribute overrides the media attribute. You can use the mediagroup attribute to assign a media controller to a media element as follows:
document.getElementById('V1').mediagroup = master
After creating and assigning the media controller to slave HTML media elements, you can control them all at once, with different commands, as the following expressions show:
controller.currentTime [ = value ]
Returns the current playback position, in seconds, as a position between zero time and the current duration (overall time of all elements). Can be set, to seek to the given time.
controller.paused
Returns true if playback is paused; false otherwise. When this attribute is true, any media element slaved to this controller is stopped.
controller.playbackState
Returns the playback state. The value of this attribute is either "playing", indicating that the media is actively playing, "ended", indicating that the media is not playing because playback has reached the end of all the slaved media elements, or "waiting", indicating that the media is not playing for some other reason (e.g. the MediaController is paused).
controller.buffered
Returns a TimeRanges object that represents the intersection (common durations) of the time ranges for which the user agent (browser) has all relevant media data for all the slaved media elements.
controller.seekable
Returns a TimeRanges object that represents the intersection of the time ranges into which the user agent can seek for all the slaved media elements.
controller.defaultPlaybackRate [ = value ]
Returns the default rate of playback. Can be set, to change the default rate of playback.
This default rate has no direct effect on playback, but if the user switches to a fast-forward mode, when they return to the normal playback mode, it is expected that rate of playback will be returned to this default rate.
controller.playbackRate [ = value ]
Returns the current rate of playback (which may be slow motion). Can be set, to change the rate of playback.
Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest. A multiplier multiplies another number to give the actual volume (e.g. 0.0 X 10 = 0; 0.5 X 10 = 5 i.e. ˝ X 10 = 5; 1.0 X 10 = 10). Can be set, to change the volume multiplier.
controller.muted [ = value ]
Returns true if all audio is muted (regardless of other attributes either on the controller or on any media elements slaved to this controller), and false otherwise. Can be set, to change whether the audio is muted or not.
controller.pause()
This function expression sets the paused attribute to true (stop playing all slaved elements).
controller.unpause()
This function expression sets the paused attribute to false (enable playing of all slaved elements).
controller.play()
This function expression sets the paused attribute to false and invokes the play() method of each slaved media element.
Primary Video and Sign-Language Track
It is possible to have a video resource file that has a primary video track and a sign-language track corresponding to the primary video track. The following code shows two video elements in a div element. Video elements are inline-block elements, so the second video element will be displayed on the right of the first video element. The first video element is for the primary video track and the second video element is for the sign-language track. The code did not work with my browser, but it should work with a later version of the browser. Explanation of the complete script is given below the code.
<!DOCTYPE html>
<html>
<head><title>Sample</title></head>
<body>
<div>
<video src="http://www.site.com/speech.org" autoplay controls id=P1></video>
<video src="http://www.site.com/speech.org" autoplay id=S1></video>
</div>
<script type="text/ecmascript">
controller = new MediaController();
media1 = document.getElementById('P1');
media2 = document.getElementById('S1');
for (var i = 0; i < media1.videoTracks.length; ++i)
{
if (media1.videoTracks[i].kind == "main")
{
media1.videoTracks[i].selected = true;
}
if (media2.videoTracks[i].kind == "sign")
{
media2.videoTracks[i].selected = true;
}
}
media1.controller = controller;
media2.controller = controller;
</script>
</body>
</html>
The two video elements have the same source file, each containing the two tracks. The media controller is created and applied in the ECMAScript.
In the script, the media controller is created. After that the references of the two video elements are obtained as media1 and media2, respectively. After that the tracks for media1 are scanned, for the maim and sign tracks (categories). Since the two media have the same resource, only one of them needs to be scanned (using the for-loop). When the main track is seen, it is selected for the first video element (media1). When the sign track is seen, it is selected for the second video element (media2).
The last code segment in the script, gives one media controller to the two media.
You can improve the display using CSS.
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.
Media and Security Issues
A media element is either a video or an audio element. The main security and privacy implications of the video and audio elements come from the ability to embed media cross-origin. There are two directions that threats can flow: from hostile content (media) to a victim page, and from a hostile page to victim content.
If a victim page embeds hostile content, the threat is that the content might contain scripted code that attempts to interact with the Document that embeds the content.
If a hostile page (person) embeds victim content, the threat is that the embedding page could obtain information from the content that was supposed to have been in a private directory in the web server instead of a public directory. Audio or video file containing company secret (e.g. new innovation) should be in a private directory, so that the media is downloaded only by authorized persons (web pages).
I explained HTML Insecurities and Prevention in the HTML course (Major in Website Design - below), so I will not say any more on that here.
That is it for his part of the series.
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