Creating Queue Points in HTML5 and Ogg Theora
There’s been lots of sizzle around HTML5, but to my mind, very little steak. Last week I chatted with a developer from the Annenberg Space for Photography, who has created a pretty beefy site that works in Flash and may soon work in HTML5. I guess I’m a sucker for video presentations that foster interactivity, and Annenberg’s is great for that.
According to their site, Annenberg “is a cultural destination dedicated to exhibiting both digital and print photography in an intimate environment. The space features state-of-the-art, high-definition digital technology as well as traditional prints by some of the world's most renowned photographers and a selection of emerging photographic talents as well.”
I had a conversation with Jason Walters, systems engineer at Annenberg, starting with his plans for Ogg Theora, and then discussing how he created his innovative and interactive videos in Flash and HTML5. Here's the email dialog.
About Ogg Theora
Jason: Hi, I am the systems engineer at the annenbergspaceforphotography.org. I like your stuff.
We are currently going to move to html5 and I am wondering your thoughts on if I should safely cut out ogg at this time and simply stick with H.264 and webm with fallback to flash.
Is ogg suiting any needs anymore in your opinion?
I have ffmpeg setup and scripted to do all these processes for us but I am thinking to cut out the ogg encodes. Curious your thoughts?
Jan: Jason, thanks for getting in touch. Several thoughts.
According to http://www.netmarketshare.com/browser-market-share.aspx?spider=1&qprid=2, Firefox 3.6, which can play Ogg, but not WebM, is about 7% of the market. That's the universe of folks who can't play WebM but can play Ogg.
Are they better off with Flash? Depends upon the data rate you're using and how challenging the footage is. If Ogg looks OK, I would keep using it for say another 6 months. If not, i would retire it.
Love how you're doing your markers to the right of the video. Those cue points? What are you doing for HTML5? is that all hand coded, or did you get that with Flowplayer.
Nice video work, too! (maybe a back light on Susan Anderson's shoulders?). :-)
About Cue Points in Flash and Implementing in HTML5
Jason: Hi Jan, Yeah, the lighting in that space is terrible. I have many years of time logged as a broadcast online editor so I do a pretty substantial amount of color correct and matching of the camera’s in the edit. Thanks for the feedback about ogg. I think I’m going to drop it.
The cue points are jquery with flowplayer. However for HTML I am altering some jquery to make a html5 version of this same concept. Just started coding it. Testing it here: http://www.supernerdsquad.com/html5_vidz_2/index2.html
I am probably going to move the entire site to drupal and use php and jquery to code up a html5 player like the test but I am still having some issues with android playing correctly. Work in progress as usual.
Why Bother with HTML5?
Jan: Why so aggressive with HTML5? Seems like Flash gives you everything you need. It's ironic that Android (Google) is the one giving you so much trouble.
Jason: I know I am wondering why I’m going through this myself. The new version of flowplayer allows the h.264 to play in it’s regular wrapper outside of the flash player for IOS devices so that would work. I just have it in my head, a gut feeling that Google will start pushing webm and stop full support of flash.
At that point the process of going back to all the old content and re-encoding is huge. Also if this flash war thing continues, wouldn’t you think android may just give in on flash and stick with webM as it’s native format?
I know I’m being very speculative.
Remember 10 years ago when everyone thought mpeg-1 would be the web standard. That didn’t work out so well.
Back to Ogg and Concluding on HTML5
Jason: Funny story about the ogg stuff. I went around to about 13 random computers that I had access too this week and found that out of them I was on 4 machines that when I tried my page www.supernerdsquad.com/html5_vidz_2/player.html pulled the ogg format. So I think I am going to keep it around another few months like you had suggested.
By the way I got Android to playback on my test site. However I tested our ASP site on Android and it did not play. So even tho android supports flash the problem was that during the browser parsing the <video> elements if found a file it could play.(either h.264 or webM) but then got paused. The cure for this was adding an id to the <video> tag, such as:
And then using the .play() and .pause() methods that I was surprised to find are part of the html spec.
With all this noticed I think it’s safe to say it is possible to build a nice browser based html5 player with cool options such as que’s and player controls.