Media Objects
The HTML5 spec defines Audio and Video browser objects, both derived from a common HTMLMediaElement base class. We implement, in Javascript, Audio and Video objects that correspond to the HTML5 spec. There are some additions and some omissions that are described later.
Note:
The HP webOS implementation corresponds to the following version of the HTML5 specification: http://www.w3.org/TR/2009/WD-html5-20090212/
The terms Audio and HTMLMediaElement tend to be used interchangeably as the features of the Audio object are all present in the base HTMLMediaElement. Features of HTMLMediaElement also apply to the Video object, however, several video specific attributes and functions exist that extend the base object. For example the video.poster attribute.
Using HTMLMediaElements
Include the Javascript implementation
webOS HTMLMediaElement attributes are not an integral part of our Webkit implementation, which means to use them a developer must include an additional JavaScript file with the application The functionality is defined in the file /usr/palm/frameworks/media/media.js. An application developer can include media.js in an application's index.html file, or list it in the application's sources.json file.
Instantiate Audio or Video objects
As the Audio and Video objects are not part of the browser, audio or video HTML tags cannot be used in application scene HTML files. Audio and Video objects must be created through JavaScript and used to extend browser tags. To do that we provide the following special static methods, which are also defined in the media.js file:
// audioObj will be an instance of our Audio object var audioObj = AudioTag.extendElement('divNameA'); // videoObj will be an instance of our Video object var videoObj = VideoTag.extendElement('divNameV'); // this test will evaluate true if (audioObj == document.getElementById('divNameA')){ //audioObj is now part of the DOM }
Standard Audio and Video constructors do not associate their media objects with the correct scene and the objects do not go out of scope until the application is discarded. Their use is therefore not recommended.
Useful defines
The three error values defined in the HTML5 spec are available via the following defines:
JavaScript define |
---|
MediaError.MEDIA_ERR_ABORTED |
MediaError.MEDIA_ERR_NETWORK |
MediaError.MEDIA_ERR_DECODE |
The following values are defined and correspond to the HTMLMediaElement values for networkState.
Network state defines | Value |
---|---|
HTMLMediaElement.EMPTY | 0 |
HTMLMediaElement.LOADING | 1 |
HTMLMediaElement.LOADED_METADATA | 2 |
HTMLMediaElement.LOADED_FIRST_FRAME | 3 |
HTMLMediaElement.LOADED | 4 |
The following values are defined and correspond to the HTMLMediaElement values for readyState.
Ready state defines | Value |
---|---|
HTMLMediaElement.HAVE_NOTHING | 0 |
HTMLMediaElement.HAVE_METADATA | 1 |
HTMLMediaElement.HAVE_CURRENT_DATA | 2 |
HTMLMediaElement.HAVE_FUTURE_DATA | 3 |
HTMLMediaElement.HAVE_ENOUGH_DATA | 4 |
HTMLMediaElement.DATA_UNAVAILABLE | 0 |
HTMLMediaElement.CAN_SHOW_CURRENT_FRAME | 1 |
HTMLMediaElement.CAN_PLAY | 2 |
HTMLMediaElement.CAN_PLAY_THROUGH | 3 |
The last four values in the Ready State table are deprecated values as they have been replaced recently in the HTML5 spec by HAVE_NOTHING
, HAVE_METADATA
, HAVE_CURRENT_DATA
and HAVE_FUTURE_DATA
.
Sample audio player
See Services Sample.
Sample video player
This sample shows code for a scene assistant that creates a video object. A div is included in the scene's view file. Properties for the video object are defined as attributes of the div, so only minimal code to create the video object is required.
Video player scene HTML
<div id="VideoDiv" style="z-index:100; position:fixed; top:0px; left:0px; width:320px; height:480px;" src="http://path/to/my/movie.mp4" autoplay="true" poster="thumbnail.png"></div> <div id="TitleBox" style="z-index:110; position:fixed; width:200px; height:40px; top:50px; left:60px; background-color: #a0a0a0;">Text ...</div>
Video player JavaScript fragment
VideoAssistant = Class.Create({ initialize: function(){ //... }, setup: function(){ this.videoObj = VideoTag.extendElement('VideoDiv'); this.onKeyPressHandler = this.onKeyPress.bindAsEventListener(this); Mojo.listen(this.controller.sceneElement, Mojo.Event.keypress, this.onKeyPressHandler); }, onKeyPress: function(){ // Toggle play/pause state if a key is pressed. if (this.videoObj.paused){ this.videoObj.play(); } else { this.videoObj.pause(); } } });
webOS audio/video extensions
webOS adds extensions to the HTML5 media objects, including mnemonics for several structures and a .palm sub-object to the Audio or Video objects for webOS-specific features.
See Media Extensions.