Tag: bbb

In continuing prototyping, I’ve been introducing myself to Object Oriented JavaScript. My exercise? To develop a system of changing text displayed on the screen through use of objects and closures. I’ve been reading up on theory since September but this was a real feet-wetting: my first advanced JavaScript and not all of it worked.

I decided to go with 2 classes: TimedText and TimedTextManager. For those familiar with patterns, they’re in a composition relationship. For those who aren’t: TimedTextManager is responsible for containing and handling all interactions with TimedText. TimedText represents some text to display after a certain delay.

This test code was really quick and messy, but it got things done. I ran into some issues and as a result it’s no where near as elegant as I’d hoped. The biggest issue is resolving scope within the TimedTextManager.play function. Whether the prototype function declaration was placed inside the TimedTextManager constructor or after it, Firefox’s JS compiler issues errors about being unable to resolve class-level variables. As a result, variables were duplicated to being local within the TimedTextManager.play function rather than the original declarations within the constructor itself (Commented out code shows the original declarations).

The changes outlined above have produced a working but not workable solution. Perhaps a closure within a function of an object prototype results in unforeseen scope resolution? I wonder if anyone can shed any light on this.

While HTML5 has been around for a few years now (Firefox support began in 2007) and modern browser support is nearly universal, some browsers will still throw up their hands and not know how to handle those <video> tags when parsing a page. If video IS supported, the waters are further muddied in that different browsers support different codecs. There isn’t even one universally-supported format either: Safari only supports h.264 while Firefox supports VP8 and Ogg Vorbis. For all of these cases, graceful handling is important.

Unrecognized tags are ignored, so to gracefully handle when video tags aren’t recognized just pretend they aren’t there while writing markup. The below code will output a text warning if the browser doesn’t support video:

<video id=”vid1″ name=”vid1″ width=”480″ height=”267″  controls >
<p>Your browser does not support video</p>
</video>

Here we are, the most basic, stripped down video tags you can get. It doesn’t even know what video to play, but if a browser doesn’t know what a “video” is, it certainly knows what a “p” tag is and will output what’s between them. You can put nearly anything in there and video will take precedence over it if HTML5 video is supported (except <script>, those will still run), so fallback to a Flash player is easy and simple. Just put the following between the <video> tags and you are guaranteed to provide the opportunity for a media-rich experience to any user.

<!– “Fallback” to using Flash if video is not supported –>
<!– Required for Mozilla < 3.0, Opera < 10.5, Safari < 3.1 –>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”550″ height=”400″>
<param name=”movie” value=”../Escape.swf”>
<!– Required by IE browsers –>
< embed src=”../Escape.swf” width=”550″ height=”400″ > </embed>
</object>

In the event that video isn’t supported, the “Escape.swf” Flash movie will play instead. How to do this too varies by browser, but copying and pasting the above code will work in all major browsers. Internet Explorer requires the tag, while Firefox and other browsers require the <object> tag, with each ignoring the other tag. When using the <object> tag, the UUID for the installed Flash plugin must be given. This is an unchanging value unique to Adobe’s plugin and can be copied without modification as well.

Given that all but one of the 5 major browsers currently support HTML5 video (with the fifth one, IE, implementing it in the current beta), lets assume the browser knows about the video element. How to account for if the browser doesn’t support the video format? The HTML5 video tag makes this easy: just specify a list of possible video sources and the browser will try each in sequence until it finds one compatible. Each of these are specified in a <source> tag, which are children of the <video> tag.

<video id=”vid1″ name=”vid1″ width=”480″ height=”267″ controls >
<!– Default video and encoding –>
<source src=”http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv” type=”video/ogg”>
<!– “Fallback” codec, will play when Ogg isn’t supported (Safari) –>
<source src=”http://mirrors.creativecommons.org/movingimages/Building_on_the_Past.mp4” type=”video/mp4″>
</video>

Putting it all together we get a fail-safe system to fallback to Flash plugins (or a warning message) if <video> isn’t recognized, or we get a format-by-format fallback sequence until the browser can find a <source> that it knows how to work with:

<video id=”vid1″ name=”vid1″ width=”480″ height=”267″ controls >
<!– Default video and encoding –>
<source src=”http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv” type=”video/ogg”>
<!– “Fallback” codec, will play when Ogg isn’t supported (Safari) –>
<source src=”http://mirrors.creativecommons.org/movingimages/Building_on_the_Past.mp4” type=”video/mp4″>
<!– “Fallback” to using Flash if video is not supported –>
<!– Required for Mozilla < 3.0, Opera < 10.5 –>
<object classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′ width=”550″ height=”400″>
<param name=”movie” value=”../Escape.swf”>
<!– Required by IE browsers –>
< embed src=”../Escape.swf” width=”550″ height=”400″ > </embed>
</object>
</video>

With this we have a completely safe cross-browser way of implementing functionality (as best possible) promised by the HTML5 standard. The standard doesn’t go so far as to say how UI elements such as play/pause/stop controls must be rendered. Standardizing that though, is a subject for another blogging.

After much thought I’ve decided to work on developing a video player using JavaScript and HTML5. Up until recently Flash players have been the way to get a rich web experience but the advent of HTML5 may change all that in a plugin-free way. You can find information on the HTML 5 Open Video Player for now on our wiki, with more sources of information announced in the coming days on my colleague Kevin’s and my blogs.

We have three months in which to bring this to a fairly stable state. Release features below are subject to change (or may be covered by other project members), but dates are not. Details are still being worked out, but a (tentative) release plan is:

Version 0.1 (Oct 22, 2010) – In cooperation with Kevin to plan to build the core framework which includes the basic functionality of Play, Pause, Stop, Volume, Time display as well as to have CSS-customizable controls, Flash fallback and a re-sizable player. We also plan to have hard-coded English subtitles for our sample video.

Version 0.2 (Nov 16, 2010) – With the core built, my solo work will be to complete subtitle support by pulling subtitles from TTXT format and to incorporate internationalization into both subtitles and the video controls. Stat tracking will also be generated (though kept local to the user’s machine) along with source hiding to protect against downloads. Screen-reader accessibility will also be implemented at this stage in the project.

Version 0.3 (Dec 7, 2010) – Further functionality like the ability to “Like” a video and  watermarks over the video will be introduced as will ratings information on the side.

As a browser-based application we luckily don’t have to worry about hardware limitations, but browser compatibility is of concern as accessibility of information is of paramount importance. We want this to be accessible, something which will become more difficult on non-standards-compliant browsers. Success will be determined by usability and accessibility of each deliverable. Success will also be determined by the modularity of the product so as to aid in future extensibility.

Never having worked with HTML5, a lot of research will be required to complete this project, but a series of tech demos and prototypes from which code and knowledge can be taken away will assist in completion of this project. As neither myself nor Kevin as extensive experience with audio/video, we’ll be learning a lot this project. Luckily, we’ll be in communication with knowledgeable Mozilla community members including Brett Gaylor and Anna Sobiepanek.

During development, I also plan to spend time contributing to a build and test system for the C3DL java script library. If any developers are interested in contributing to our project we welcome all, especially any with expertise in audio/video or JSON.