Support for HTML5 video tag

[vik]

to replace flowplayer - with HTML5 video player by default

Modern browsers are now natively supporting the embedding of video using the <video> tag.

More info on this can be found here:  http://diveintohtml5.org/video.html

VIDEO CODEC SUPPORT IN UPCOMING BROWSERS

* FIREFOX *

Theora+Vorbis+Ogg v3.5+

H.264+AAC+MP4 ??

WebM 4.0+

* SAFARI *

Theora+Vorbis+Ogg †

H.264+AAC+MP4 3.0+

WebM †

* CHROME *

Theora+Vorbis+Ogg 5.0+

H.264+AAC+MP4 5.0+

WebM 6.0+

* OPERA *

Theora+Vorbis+Ogg 10.5+

H.264+AAC+MP4 NO

WebM 10.6+

* IPHONE *

Theora+Vorbis+Ogg NO

H.264+AAC+MP4 3.0+

WebM NO

* ANDROID *

Theora+Vorbis+Ogg NO

H.264+AAC+MP4 2.0+

WebM ‡

• Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec,” which implies that Microsoft will not be shipping the codec themselves. SO THE USER INSTALLS A CODEC AS PER USUAL ON THE OPERATING SYSTEM - AS PER DIVX, XVID ETC.

† Safari will play anything that QuickTime? can play, but QuickTime? only comes with H.264/AAC/MP4 support pre-installed. SO THE USER WOULD HAVE TO INSTALL PERIAN, FOR EXAMPLE. SIMILAR USER-STORY TO INSTALLING XVID SUPPORT ON MAC OPERATING SYSTEM.

‡ Google has committed to supporting WebM “in a future release” of Android, but there’s no firm timeline yet.

At our end we have a couple of choices: 1) In javascript, determine the browser's video and codec capabilities, and write HTML pointing to the appropriate source (ogv, mp4, or fallback to flv) 2) Use the html5 'source' attribute to specify multiple possibilities, and let the browser decide which one it can use.

In both cases, at least two video formats will be needed on the server: ogv and (probably) mpeg4. Probably now we want to also provide a WebM/vp8 file. Transcoding will need to create these.

Also in both cases, a fallback will be required - the easiest for users is the previous default standard for web video - Flash (which we already support with Flowplayer).

Some options for HTML5/Flash Fallback players / javascript libraries:

•  http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback
• mwembed  http://www.kaltura.org/project/HTML5_Video_Player
• Kaltura HTML5 Player  http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library
• OSM Player  http://www.mediafront.org/project/osmplayer
• Projekktor  http://www.projekktor.com/

[jussi.talaskivi@…]

You wouldn't need a third stream with Flash. It can stream H.264+AAC. You only need Ogg-Theora and MP4-H.264 files to support all browser combinations. Flash player can also be put inside the video tag. If browser supports the video tag it uses it. Otherwise browser renders the Flash-plugin.

[vik]

This site has some code with multiple fallback options; needs just ogg and mp4 on the server:  http://camendesign.com/code/video_for_everybody

[and]

For plone 4, waiting for html5 functionality to improve - eg. embed code

[and]

4.0 is just migration to plone 4, this is 4.1

[and]

From now invalid, similar ticket - http://plumi.org/ticket/321

This is the javascript library I mentioned in the meeting today:

 http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library

If you try out the demo, it's a really nice implementation that firstly will try to play back .ogg Theora files, with fallback to h.264 sources with the same html/css interface player skin as the ogg content.

The demo also shows an option for user to select Flash video player instead (Kaltura player is implemented here, presumably we can use Flowplayer instead if we choose). The Cortado Java applet is included as another fallback option to play back .ogg Theora.

[anna]

here is some code for interfaces.py to provide a way for site admins to choose the video display/embed method the plone site will use (Flash, HTML5 video tag, or HTML5 video tag with fallback to Flash):

html5 = schema.Choice(title = u'Choose video embed method',

description=u"Choose if you would like to use just the HTML5 video tag, or Flash (Flowplayer) or if you would like to use HTML5 with Flowplayer as failback for browsers that don't support the HTML5 video tag", values = ['HTML5 video tag', 'HTML5 Flash fallback', 'Flash - Flowplayer'], default = "HTML5 Flash fallback", )

[anna]

Ryan let us know he thinks that mwembed is quite heavy (1mb?)... needs testing, could possibly talk to michael dale about a more light-weight version?

[anna]

We discovered that the way Twisted serves video files doesn't provide the content type correctly, and so in development sites the video does not display. On production when the video files are served by Apache this works.

But this is a problem as we can't really release Plumi with videos not playing in the development environment.

So, need to look at ways of getting around this in Transcode Star.

[anna]

Should this be done in the milestone prior to the re-design, or can it be done as part of the re-design?

[mike]

We now have support for webm and mp4 (high and low resolutions) as well as a flash fallback for older browsers.

[anna]

Can you let us know briefly what you have used to achieve this - what player/scripts are being used?

Other than the issues mentioned in another ticket regarding fullscreen playback, on my current test set up this works well.

I suppose I will need to access more computers/browsers to test more effectively. Can potentially do this next week.

[anna]

This ticket can be closed I think, and any specific issues with fullscreen playback or 16:9 display can be added as tickets to the RC.