Permalink
Browse files

Big refactoring to include fallback in new browsers that

don't support the Flash codecs (Firefox, 3.1+, Opera 100.5+).

This is a pretty big milestone that essentially
completes <audio> support, except for minor technicalities
which will be ironed out in the near future.

<video> support has also begun, however there is still a big
technical hurdle to overcome: making the Flash object mimic
the <video> element's style and placement in the DOM. Also
detecting WHEN the <video> element is inserted/removed/replaced
in the DOM.
  • Loading branch information...
TooTallNate committed Apr 3, 2010
1 parent e5c5417 commit 5a6742ab51991972837180e75f6197ce26760f18
@@ -20,7 +20,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
-<PUBLIC:COMPONENT NAME="HTMLMediaElement" LIGHTWEIGHT=true>
+<PUBLIC:COMPONENT NAME="HTMLAudioElement" LIGHTWEIGHT=true>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="__initialize()"/>
<PUBLIC:PROPERTY NAME="error" GET="errorGet" />
@@ -36,6 +36,9 @@
<PUBLIC:PROPERTY NAME="controls" GET="controlsGet" PUT="controlsSet" />
<PUBLIC:PROPERTY NAME="volume" GET="volumeGet" PUT="volumeSet" />
<PUBLIC:PROPERTY NAME="muted" GET="mutedGet" PUT="mutedSet" />
+ <PUBLIC:PROPERTY NAME="buffered" GET="bufferedGet" />
+ <PUBLIC:PROPERTY NAME="played" GET="playedGet" />
+ <PUBLIC:PROPERTY NAME="seekable" GET="seekableGet" />
<PUBLIC:EVENT NAME="onloadstart" ID="onloadstart" />
<PUBLIC:EVENT NAME="onprogress" ID="onprogress" />
@@ -59,6 +62,7 @@
<PUBLIC:EVENT NAME="onratechange" ID="onratechange" />
<PUBLIC:EVENT NAME="ondurationchange" ID="ondurationchange" />
<PUBLIC:EVENT NAME="onvolumechange" ID="onvolumechange" />
+ <PUBLIC:EVENT NAME="onfallback" ID="onfallback" />
<PUBLIC:METHOD NAME="__fireMediaEvent" />
@@ -85,7 +89,8 @@
"ended":onended,
"ratechange":onratechange,
"durationchange":ondurationchange,
- "volumechange":onvolumechange
+ "volumechange":onvolumechange,
+ "onfallback":onfallback
},
initialProps = {};
@@ -102,6 +107,9 @@
function controlsGet() { return this.__controlsGet(); }
function volumeGet() { return this.__volumeGet(); }
function mutedGet() { return this.__mutedGet(); }
+ function bufferedGet() { return this.__bufferedGet(); }
+ function playedGet() { return this.__palyedGet(); }
+ function seekableGet() { return this.__seekableGet(); }
function srcSet(v) {
if (this.__srcSet) {
@@ -157,7 +165,7 @@
{
if (eventName in events) {
ev = createEventObject();
- this.__extendEvent.call(this, ev, arguments);
+ this.__extendEvent(ev, arguments);
events[eventName].fire(ev);
}
}
View
Binary file not shown.
View
1,385 HtmlMedia.js

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,35 @@
+/* The MIT License
+ *
+ * Copyright (c) 2010 Nathan Rajlich
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+<PUBLIC:COMPONENT NAME="HTMLVideoElement" LIGHTWEIGHT=true>
+
+ <PUBLIC:PROPERTY NAME="width" GET="widthGet" PUT="widthSet" />
+ <PUBLIC:PROPERTY NAME="height" GET="heightGet" PUT="heightSet" />
+ <PUBLIC:PROPERTY NAME="videoWidth" GET="videoWidthGet" />
+ <PUBLIC:PROPERTY NAME="videoHeight" GET="videoHeightGet" />
+ <PUBLIC:PROPERTY NAME="poster" GET="posterGet" PUT="posterSet" />
+
+ <SCRIPT LANGUAGE="JScript" >
+
+ </SCRIPT>
+
+</PUBLIC:COMPONENT>
View
Binary file not shown.
View
@@ -19,19 +19,29 @@ support via Flash, enhancing the browser's current implementation if one exists.
The `HtmlMedia` library should:
- * If no HTML5 media support is detected, implement the interfaces related to
- the &lt;audio&gt; and &lt;video&gt; element (HTMLMediaElement, HTMLAudioElement,
- etc.) via standard JavaScript, and provide playback support via the Flash
- fallback.
-
- * If some level of HTML5 media is supported, but MP3 playback is not
- (Firefox 3.5+, Opera 10.1), then `HtmlMedia` should augment the native
- implementation to support the codecs provided from the Flash fallback
- *transparently*.
-
- * If HTML5 media is supported AND all the codecs that the fallback supports
+ * If no HTML5 media support is detected (IE8 and below, old versions of
+ Firefox, Safari, etc.), implement the interfaces related to the `<audio>`
+ and `<video>` 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/)).
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
@@ -46,6 +56,7 @@ 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!!
Supported Codecs
@@ -77,10 +88,10 @@ 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
+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
@@ -109,23 +120,22 @@ 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)
+* [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 most cases, you wouldn't even know about them:
+minimal, and in any regular-use case, you likely wouldn't even know about them:
* innerHTML - DO NOT create `<audio>`, `<video>` or `<source>`
nodes via setting a parent element's `innerHTML` property. The newly created
- nodes are will not be properly extended with the HTML5 API and fallback if
- they are created this way. You can insert said nodes either via
- the initial HTML source, or dynamically via `document.createElement`.
+ 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`.
* It's not possible to overwrite the functionality of the built-in browser
`controls` for media elements. Furthermore, `HtmlMedia` has no plans on
@@ -134,12 +144,13 @@ minimal, and in most cases, you wouldn't even know about them:
user interface do fire, and that is always recommended!
* Currently, upgrading native `<audio>` and `<video>` nodes to use
- the Flash fallback is a destructive process. In other words, if `HTMLMediaElement#load`
- is called and `src` is a file where the Flash fallback needs to be used, then
- that media element is "converted" to a "fallback node" and can only be used to
- play files supported by the fallback, and native playback is removed from that
- element. Just don't be reusing media elements if you're jumping between multiple
- file formats constantly is all, create new ones.
+ the Flash fallback is a destructive process. In other words, if an `error`
+ event is fired, and `currentSrc` 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
-------
@@ -1,4 +1,4 @@
-cp src
--main HtmlAudio
+-main HTMLAudioElement
-swf-version 10
-swf9 HtmlAudio.swf
View
@@ -0,0 +1,4 @@
+-cp src
+-main HTMLVideoElement
+-swf-version 10
+-swf9 HtmlVideo.swf
Oops, something went wrong.

0 comments on commit 5a6742a

Please sign in to comment.