How to use HTML5 <video> and <audio> tags everywhere
(and have them Just Work™)
Audio embedded in a video tag
Note that the above isn't supposed to work, but does work in Safari (and may work in other
browsers) and also works with my av.swf media player.
Audio embedded in an audio tag
Click Test Flash Switch
to swap in the Flash player for all <audio> and <video> elements (this
lets me test it all works without launching a crippled web browser).
I've chosen to make my player controls minimal in the spirit of Apple's HTML5 video
player UI. Why? Because I kind of agree with Apple that the system volume control
is the volume control.
Because I couldn't figure out how to "puppet" Flash's video control components, all
the UI elements are implemented from scratch. (Not a huge deal and much easier
October 2014: I decided to see if this stuff now plays natively in Firefox, and to
that end changed the video filename from .m4v to .mp4 (since this reflects the
MDN documentation). This should work on Windows, but not Mac OS X. (Why?!)
In any event, mp3 still doesn't work so bleargh.
It might be helpful to "package" this up a little better so that, for example,
it works regardless of where the web page is relative to the flash player. Any
coder should be able to tweak the code to work properly for his/her site as is but
it's not quite a no-brainer.
Expose all the relevant routines in the flash player (they're already factored
with this in mind so it's not going to be much work).
Write some abstraction routines into av.js for talking to the videos as if they
were video tags. Ideally I'd replicate the html5 video API for Flash but I've
not done that kind of thing before and I don't know how hairy it is (Google's
excanvas.js does exactly this kind of thing so maybe I can find clues there).
W.r.t. the above, I'd like to be able to use the Flash player (if only for test
purposes) even if it's not needed, which may make the previous item harder. I
guess it's better to expose a constant API than be able to perform this kind of