Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tootallnate/htmlmedia

The first and only "proper" HTML5 <audio> and <video> fallback implementation via Flash.
https://github.com/tootallnate/htmlmedia

Last synced: 5 days ago
JSON representation

The first and only "proper" HTML5 <audio> and <video> fallback implementation via Flash.

Awesome Lists containing this project

README 

        
HtmlMedia

=========



Presenting the first and only "proper"

[HTML5 <audio> and <video>](http://www.w3.org/TR/html5/video.html)

fallback implementation: `HtmlMedia`



There are a few open-source HTML5 Video and Audio fallbacks that depend on

Flash out there, but in-short, all were too heavy-weight AND not complete

enough for my needs.



`HtmlMedia` was created with the term

["progressive enhancement"](http://en.wikipedia.org/wiki/Progressive_enhancement)

in mind. The sad truth is that HTML5 isn't even finalized yet. None of the

current browser's implementations have a uniform codec support, and Internet

Explorer doesn't yet support it at all! This library aims to provide an

implementation of the HTML5 media API, with a uniform, cross-browser codec set

support via Flash, enhancing the browser's current implementation if one exists.



The `HtmlMedia` library should:



 * If no HTML5 media support is detected (IE8 and below, old versions of

   Firefox, Safari, etc.), implement the interfaces related to the ``

   and `` element (HTMLMediaElement, HTMLAudioElement, etc.) via

   standard JavaScript, and provide playback support via the Flash fallback.

   Any Flash-related aspects should be abstracted away and it should

   *seem* as if the browser vendor decided to implement this part of the HTML5

   spec themselves!



 * If some level of HTML5 media is supported, but not all codecs supported by

   the fallback are supported natively, then `HtmlMedia` should augment the

   native implementation to fallback to Flash when required *completely transparently*.



 * If HTML5 media is supported AND *all* the codecs that the fallback supports

   are also supported by the browser (not likely, consider `FLV` video files),

   then this library should detect so and do nothing.

   

 * When the Flash fallback must be used, it should integrate with the

   browser's native event firing model. In other words, the web developer

   still needs to determine whether to call `attachEvent` or

   `addEventListener` depending on the browser. This gives a better sense of

   nativity, and also ensures that it will work properly with other

   JavaScript compatibility libraries (i.e.

   [Prototype's Event.observe](http://api.prototypejs.org/dom/event/observe/)).



 * As the fallback technology used is Flash, `HtmlMedia` can provide playback

   support for `FLV` files. This should be a **standards compliant** way to

   embed Flash video files via the standard `` element. Possibly the

   new easiest way to include `FLV`s on your site?



Ultimately, this gives the web developer access to the HTML5 Audio and Video

API on all browsers with Flash installed (~98%), with **AT LEAST** the codecs

supported by the Flash fallback guaranteed to work, plus any other codecs that

the web browser's implementation decided to implement.



Supported Browsers

------------------



I'll put this section first simply because I know that's what you're dying

to drool about:



 * Internet Explorer 6+

 * Mozilla Firefox 2+

 * Opera 10.1+ (Possibly 10.0, definitely not 9 or below; no getter/setter support)

 * Testing for more needed!!



The browser requires at least the `Flash Player 10` plugin installed to use

for guaranteed codec support.



Supported Codecs

----------------



`HtmlMedia` guarantees that, using Flash as a backbone, you can use the HTML5

media API with the following codecs:



``: MP3 and AAC (m4a) encoded audio files (Vorbis coming soon!)

``: FLV and H.264 (mp4) encoded video files (Theora probably *not* coming...)

    

If the current browser has any others codecs supported via its HTML5 media

implementation, then those are obviously still supported as well.



How to Use

----------



`HtmlMedia` was designed to be a drop-in enhancement, with little

or no configuration required by the developer. Here's a minimal HTML file,

with guaranteed HTML5 media support via `HtmlMedia`:



    

    

    

        

        

    

    

        

    

    



You essentially need to copy the `HtmlAudio.swf`, `HtmlVideo.swf`,

`HTMLMediaElement.htc`, `swfobject.js` and the `HtmlMedia.js` files to

somewhere on your web server. On any page that you want to use HTML5 audio or

video, just include the `HtmlMedia.js` script which will do the rest.

Optionally you can set the path to the SWF files. `HtmlMedia` does not

directly depend on any external libraries, but it is designed to work alongside

popular JavaScript frameworks like [Prototype](http://www.prototypejs.org).



Once the `HtmlMedia.js` file finishes loading you have access to the entire

HTML5 audio and video API on your HTML page **AND** via JavaScript.



Try things like:



    document.createElement("audio").canPlayType("audio/mpeg");

        //--> "probably"



or



    var a = new Audio("theme.mp3");

    a.play();

        // load and listen to some music :)

    a.volume = 0.5;

        // set to 50% volume

    setTimeout("a.pause()", 1000);

        // pause the sound in 1 second

    

You now have full access to the

[HTML5 <audio> and <video>](http://www.w3.org/TR/html5/video.html)

API on your webpage, with a guaranteed codec set, and an implementation for

old/non-supporting browsers!



If you would like some more tutorials on how to use the HTML5 Audio and Video

API, I highly recommend reading any of the browser vendors' articles on the matter:



* [Mozilla's "Using audio and video in Firefox"](https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox)

* [Opera's "Everything you need to know about HTML5 video and audio"](http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2)

* [Apple's "Safari Guide to HTML5 Audio and Video"](http://developer.apple.com/safari/library/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html)

* Is there a Google one anywhere?



Known Limitations

-----------------



I'm proud to say that the limitations brought on by this library are very

minimal, and in any regular-use case, you likely wouldn't even know about them:



 * `innerHTML` - DO NOT create `` or `` nodes via setting a parent

   element's `innerHTML` property. The newly created nodes will not be

   properly extended with the HTML5 API and fallback if you do! You can insert

   said nodes either via the initial HTML source, or dynamically via

   `document.createElement` or `new Audio()`.



 * `` - There's currently no support for the `` element inside

   of media elements. This shouldn't be a problem, however, since `HtmlMedia`

   guarantees a baseline codec set. You should just set the `src` attribute

   on `` or `` nodes; if the media is natively supported, it

   will be played via the browser, if not, then it will fall back to Flash.



 * `controls` - It's not possible to overwrite the functionality of the

   built-in browser `controls` for media elements. Furthermore, `HtmlMedia`

   has no plans on implementing the attribute. For these reasons, it is not

   recommended to use the `controls` attribute at all. However, all media

   events to build your own user interface do fire, and that is always

   recommended!



 * Currently, upgrading native `` and `` nodes to use

   the Flash fallback is a destructive process. In other words, if an `error`

   event is fired, and it's `src` is a file where the Flash fallback needs

   to be used, then that media element is "converted" to a "fallback node" and

   from then on can only be used to play files supported by the fallback.

   Native playback is removed from that individual element. Just don't be

   reusing media elements if you're jumping between multiple file formats

   constantly is all, create new ones.



License

-------



I've decided to release this enhancement library under the MIT license.

See the `LICENSE` file for legal text.