Mozilla Hacks

experimenting with HTML5 video at the BBC

Avatar photo By

Posted on August 18, 2009 in Firefox, JavaScript, and Video

The BBC has a post up describing an experiment that they have put together that uses HTML5 video that works in Firefox 3.5 and Safari.

BBC HTML5 Video Experiment

The demo uses jQuery and drives a simple carousel that shows the current chapter as the video plays. It also shows subtitles as the video plays.

One really great, and somewhat subtle thing about this experiment? You can select the subtitles. They are just text.

10 comments

  1. matt

    Sadly, their new HTML5 video controller’s volume slider no longer goes to 11. I hope they fix that before release.

    August 18th, 2009 at 21:06

  2. RedLib

    Awesome BBC demo!

    The subtitles trick opens for user generated translations of on-line videos. The same trick can be used for hot links in videos, both fore navigation in video and to related websites / videos – very useful!

    But it make me wonder hove to make it work with maximizing of videos. The standard forbid script controlled maximization so the browser must ‘magicaly’ know what to maximize with the video.

    One possibility is to add a style on divs telling the browser they are maximizable so if some element inside them is maximized the div with all it’s contents should be maximized instead – with all magical scaling it takes. But thats right now a standards question rather then a browser issue :-(

    BTW. The ubuntu ‘standard’ build of firefox 3.5 for ubuntu 9.04 do not support maximization of videos yet – that make the free formats less useful (in an important sens) then the formats that use the old plug-in. But I guess it’s work in progress.

    August 19th, 2009 at 03:26

  3. […] [via hacks.mozilla.org] […]

    August 19th, 2009 at 04:22

  4. sep332

    With Ubiquity and a little patience, you can have machine translation of subtitles.

    I’m not sure why running the whole page through Google Translate doesn’t work, or using Ubiquity’s edit and save commands on the subtitles. Any ideas on how to make that work?

    August 19th, 2009 at 04:33

  5. takapa

    I’m a huge fan of open standard and I really think the video tag is great in theory but the current Firefox implementation is extremely CPU hungry. It uses 35% of the CPU in not looking at zoomed video and 65% of the CPU if I zoomed in the video to fill my screen (Core 2 Duo 1.86Ghz).

    I do hope that GPU acceleration of the Theora codec will be supported soon as the video tag is currently no better than Flash in performance terms.

    August 19th, 2009 at 09:11

  6. Ken Saunders

    Man, that is cool!

    I’m wondering if there is a way to use that to offer several different videos/clips in the same player instead of loading 5 (or more) different pages to view each video that may be offered?

    Or perhaps the individual videos could be merged into one but divided into chapters with each stopping after they play out?

    Of course it would probably be wise to keep the length of the videos somewhat short.
    I like using autobuffer, but it seems to put a serious drag on my whole system.
    My new trick is to add diversionary text while the video loads. :)
    http://www.accessfirefox.org/Growing_a_Firefox_Fathead.php

    I’d appreciate any feedback on how to accomplish what I mentioned above since I’m not a developer by nature.
    I just play one on TV.

    August 19th, 2009 at 11:26

  7. Christopher Blizzard

    Hi! Turns out that a lot of that overhead comes from Mozilla’s drawing, not from the codec directly. And we continue to make improvements there in each release.

    August 19th, 2009 at 13:11

  8. RedLib

    A maximize button in the video controls that maximize the browser and zoom in on the video would automatically work with dom/js generated subtitles and other overlays. And require no standard updates.

    I think some kind of miximize button is needed – users expects it and manually zooming and scrolling is a pain.

    August 19th, 2009 at 14:41

  9. Gaurav M

    let see how fast big players will push HTML5
    Excellent demo

    August 19th, 2009 at 22:55

  10. […] ■BBCはおもしろいことをしているらしい http://hacks.mozilla.org/2009/08/html5-video-bbc/ […]

    August 29th, 2009 at 05:44

Comments are closed for this article.