HTML and CSS Reference
In-Depth Information
WORKAROUND #3: JAVASCRIPT GENERATED MEDIA
Another workaround is to insert the media using JavaScript.
That way you can create the media element, attach the event
handlers, and then set the source and insert it into the DOM.
Remember: if you do insert the media element using JavaScript,
you need to either insert all the different
source
elements manu-
ally, or detect the capability of the browser, and insert the
src
attribute that the browser supports, for instance WebM/video
for Chrome.
I'm not terribly keen on this solution because it means that
those users without JavaScript don't get the multimedia at all.
Although a lot of HTML5 is “web applications,” my gut (and
hopefully yours, too) says there's something fishy about resort-
ing to JavaScript just to get the video events working in a way
that suits our needs. Even if your gut isn't like mine (quite pos-
sible), big boys' Google wouldn't be able to find and index your
amazing video of your cat dancing along to Hanson if JavaScript
was inserting the video. So let's move right along to workaround
number 4, my favourite approach.
WORKAROUND #4: CHECK THE READYSTATE
Probably the best approach, albeit a little messy (compared
to a simple video and event handler), is to simply check the
readyState
of the media element. Both audio and video have
a
readyState
with the following states:
•
HAVE_NOTHING = 0;
•
HAVE_METADATA = 1;
•
HAVE_CURRENT_DATA = 2;
•
HAVE_FUTURE_DATA = 3;
•
HAVE_ENOUGH_DATA = 4;
Therefore if you're looking to bind to the
loadedmetadata
event,
you only want to bind if the
readyState
is 0. If you want to bind
before it has enough data to play, then bind if
readyState
is less
than 4.
