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.

Annenberg.png

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:

<video id=”video”>
</video>

And then adding some javascript in the page to .getElementById(“video”)
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.

About Jan Ozer

Avatar photo
I help companies train new technical hires in streaming media-related positions; I also help companies optimize their codec selections and encoding stacks and evaluate new encoders and codecs. I am a contributing editor to Streaming Media Magazine, writing about codecs and encoding tools. I have written multiple authoritative books on video encoding, including Video Encoding by the Numbers: Eliminate the Guesswork from your Streaming Video (https://amzn.to/3kV6R1j) and Learn to Produce Video with FFmpeg: In Thirty Minutes or Less (https://amzn.to/3ZJih7e). I have multiple courses relating to streaming media production, all available at https://bit.ly/slc_courses. I currently work as www.netint.com as a Senior Director in Marketing.

Check Also

Take the Bitmovin Video Developer Survey

Contribute to the one of the most valuable sources of industry data by completing the …

Speech-to-text In Premiere Pro – Fast, Easy, Accurate, and Free

This video tutorial teaches you how to convert speech-to-text in Premiere Pro. I’ve been using …

Streaming Media 101: Training for App & Player Development/Testing Professionals

Leave a Reply

Your email address will not be published. Required fields are marked *