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.


Comments (3)

Said this on 8-12-2011 At 02:32 am

ogg was faling off but it looks like people are still considering it becasue they are uncomfortable with what mpeg-la may do in terms of right. If you can fit it in nothing wrong with ogg. Some newer mobile devices may support only open codecs which would include webm but probably also ogg.

I would not totally disclud it yet http://caniuse.com/ogv

Said this on 11-8-2012 At 06:05 am

This is an old thread, but I wanted to ask if you are actually using real queuepoints in the video or if they are faux queuepoints based on a timestamp in javascript? Can JS read queue points in video? I guess I should check out the specifications for MP4 and OGG? Any advice would be appreciated.

Said this on 7-6-2013 At 02:46 am

the cue points are not in the video but a function of a javascript/HTML

 

Post a Comment
* Your Name:
* Your Email:
(not publicly displayed)
Reply Notification:
Approval Notification:
Website:
* Security Image:
Security Image Generate new
Copy the numbers and letters from the security image:
* Message: