Skip to content Skip to navigation

HTML5 Video

Tags: 

Meeting notes from VMG meeting held on March 7, 2011.

========= Here are a couple of quick tips to get your feet wet with html5 video ==========
If you're viewing a video on youtube, add the following parameter to the url to force it to playback in html5: &html5=True
For instance: http://www.youtube.com/watch?v=NJd_Wl7yMVo&html5=True
Note the ability to playback the video at 1.5x or 2x speed, and display the captions as a clickable transcript.
More YouTube experiments at: http://www.youtube.com/testtube
Check out the demo and toggle between flash and html5 video: http://sublimevideo.net/demo
Want to try a quick experiment yourself? Download the free Miro video converter: http://www.mirovideoconverter.com/
Export to "WebM" format and use the following html code to test playback in your favorite browser.

========================================================================

A huge thanks to John Foliot for presenting on the topic of html5 video.
~~~~~~~~~~~~~~~~~~~~~~~~~~

Forrest: The reason why we started investigating the use of html5 video was our desire to support video playback on the iPad. Through our investigation, we found that HTML5 spec isn't full baked yet, but does have huge potential and adoption will only grow with time.

Intros of everyone attending.

Welcome from Forrest: bottom-up kind of group - discussion-based talking about issues that people have. 

Question of which browsers supported? See Wikipedia page on HTML5 Video: http://en.wikipedia.org/wiki/HTML5_video

Q: Any particular source on take-up of HTML5? Is there a good objective source?
A: The Definitive Guide to HTML5 Video - Silvia Pfeiffer (Amazon) & http://html5doctor.com/ - not totally unbiased, but at least labelled opinion, just get stuff done, what works. Very spirited, interesting discussions. 

John Foliot preso 
~~~~~~~~~~~~
Over past 5 years, steady growth in video and need for accessibility.

Opera browser: Anne van Kesteren - HTML5 should work like an object with special video semantics. 

Allows for playback of video on a webpage without special plugins, etc.

March 2009 - Safari4 adds native support. 
June 2009 - iPhone 3
Oct 2009 - Google Chrome 3
Jan 2010 - Opera 10.5
March 2010 - IE 9 support announced
May 2010 - Google WebM Video Standard - immediate support for Chrome and Opera

Demo of videos in containers - 6 different ones

The Codec issue:
- H.264 Codec | .mp4 - wrapper Safari IE (the go-to standard) (recently Google said they won't support this in the future) (so where in the tool chain, someone has to pay for the license. Apple and Adobe do this. Real problem - Mozilla is non-profit - goes against their charter to pay royalties. 

- VP8 Codec | .webm - Wrapper Chrome Firefox Opera - must have the recent browser revs. Earlier versions may not. 

Theora Codec | .ogg Wrapper - Google bought this, but original devs stepped away...

Apple has a lot invested in H.264. Out of the box IE9 will support this. End-user will need to download this for IE9 though. Similar to the way DIVX works. Third parties will probably put this in, though generic Windows might not. 

Lots of tools out there, but serving native code will require all 3 Codecs, and have essentially 3 revs of the video. 

Forrest: Why use HTML5 - why convert my 2,000 videos?? The primary reason today is the support of iOS devices.

In comparing html5 video to Flash - Flash eats up battery life, code is ugly, lack accessibility.
We've only seen the tip of the iceberg on video use. 

Accessibility issues:
- blindness
- low vision
- color perception
- hard of hearing
- mobility impairments
- learning disabilities
- combinations of these

Alternative content technologies
- captioning
- transcripts
- enhanced captions/subtitles
- future: hyperlinks to other resources
- sign languages: American, English, Australian, etc.
- described video (BBC must provide 10% of their content with descriptive audio for the visually impaired) - Disney did this with Shrek, so blind people could "see" it.
- extended video descriptions (inserting audio description in-between dialog parts) screen readers can be up to twice as fast as normal speech (120 words/minute)
- text video description
- clear audio for hard of hearing, remove any background noise
- content navigation by content structure - move forward into erd paragraph of 3rd chapter, say...

Any web video players with this? 
IBM Japan has worked on this. 
Stanford Science dept - students crank up speed of class videos to watch an hour video in 40 min.
Forrest: we caption all our videos for SEO and searching. What happens on iPad? Still in its infancy. If HTML5 not supported, it falls back to Flash. Forrest does reverse: detect for Flash, or fall back to HTML5.

Web Video Time Text (.vtt)
WhatWG and W3C working groups 
What is HTML encountering on the street (in real usage)
No more versioning - it's a moving topic
Agile dev model - break it, fix it, test it
W3C more methodical with deadlines and fixed builds - no time stamp format

vtt started as srt text format - evolved enough that needed a new name see whatwg.org/video.html#webvtt

Time Text Markup Language (.xml, .dfxp)
SMTP-TT - Society of Television and Motion Pictures Engineers - TimedText
Who has to provide captioning? Somewhere in the middle. Where is Stanford? Ask the general counsel. If not providing captioning yet, perhaps time to consider it. (Like running a yellow light - is it illegal? Well, depends on when you entered the intersection.) 
YouTube does this, not great, but...
- neither format declared as default
- no browser providing native support
- Web VTT is a spec in flux
- SMTPE-TT is a profile of TTML.

inside there is a child - can be multiple languages in separate tracks

Autostart of audio is a problem for screen readers — please don't use Auto Start — goal of accessibility is to put the controls in the users hands.

Browser sniffing ? Not really, browsers will play the first asset they can. 

Remember when frames came? Don't want to go that again!

Build own controls for sign language, captioning, audio descriptions

More resources:
W3C: HTML5 
WHATWG: HTML5
WebM - an open web media project, started by Google, broken off as OpenSource.

Forrest
~~~~~
If you're already using the JW player, you can support html5 playback. Check out the latest release:
http://www.longtailvideo.com/players/
It's a challenge to support all devices, but start experimenting.
Check out the AT&T shop and try all their different devices, Apple Store, too, in case different version of their software. 

Get mobile devices into IT Services. 

Drupal & HTML5? John is not aware of any, being a CMS. 

Start thinking about encoding and workflow around encoding.

Happy experimenting and feel free to share what you're doing with the group. Thanks!