Speaking of HTML5-

Question

So I finally got around to updating my site to be fully functional on mobile devices (out with Flash and in with HTML5, sort of).
My site formerly relied on Flash for creating audio players (mainly), but these obviously don't work on the growing segment of mobile devices. That's why I decided to rewrite the site and call the audio element of HTML5. For unsupported browsers I provide fallback on Flash. Works.
But, there are a few quirks that I can't get around. For one, the audio players all seem to preload the entire audio track (.ogg or .mp3, depending on which browser), even though I nowhere call the autobuffer. One of my pages has fourteen players on it, so you can imagine that the loading of that page is considerably long. Is there a way to force the players not to load until the play function is called (much like standard in the mobile devices)?
http://jmsuijkerbuijk.com/Audio_Samples.html
Another quirk is the lack of control over the looks. The player looks different in just about every browser and in some browsers (guess which one: IE!) the old Flash player is used. Even the size of the player is different in browsers. Safari is satisfied with a minimum of 200x25 pixels (fair looking player); the minimum for Firefox is 300x40 pixels (downright ugly player). Obviously that (look and size) is disastrous for any design. I know there is some control over appearance through CSS, but Apple's example (http://developer.apple.com/safari/library/samplecode/HTML5VideoPlayer/index.html) doesn't really offer much hope for what I wished for. Does anyone have valuable tips on this?
As always: thanks in advance!

Answer 1

Due mostly to lack of time I haven't been able to dig very deep yet.
Very soon, though, it became apparent that a solution had to be found for the discrepancy of native players. The Safari player is quite nice and is satisfied with a fairly small 200 x 20 pixels; the Chrome player is higher than 20 pixels, but the Firefox player needs a whopping 100 pixels in height (go figure!) to be fully viewable and functional. A region of at least 200 x 100 pixels per player is quite radical for any design. Worse is, that the native players place themselves at the bottom of that 200 x 100 pixels, whereas the substituting Flash player is drawn at the top of that region. Unacceptable.
I needed a visual wrapper which would preferably be consistent between methods, browsers and OS's. I did find that in the jPlayer which is fairly easy to configure through CSS. Works great in all browsers without autobuffering, playing audio natively (ogg or mp3) and falling back on Flash in browsers that don't support HTML5. Sorry to say that playback is probably worst in Safari (ouch!), because it takes longer to load the audio file than any other browser, if it will load at all.
Only downside is, that the player does not work in Safari for mobile devices. Bit of a bummer, because that was the very reason why I sought to use HTML5 in the first place.
Hope to find more time soon and will dig deeper.