Modify

Ticket #237 (closed enhancement: fixed)

Opened 6 years ago

Last modified 3 years ago

Support for HTML5 video tag

Reported by: vik Owned by:
Priority: critical Milestone: 4.3 Beta1
Component: EmbeddedPlayback Severity:
Keywords: Cc:
Who will test this: And

Description (last modified by anna) (diff)

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:

Attachments

Change History

comment:1 Changed 6 years ago by 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.

comment:2 Changed 6 years ago by 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

comment:3 Changed 5 years ago by baiju

  • Status changed from new to assigned
  • Owner set to baiju

comment:4 Changed 5 years ago by and

  • Who will test this set to And
  • Milestone changed from 3.1 to 4.0

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

comment:5 Changed 5 years ago by and

  • Milestone changed from 4.0 to 4.1

4.0 is just migration to plone 4, this is 4.1

comment:6 Changed 4 years ago by and

  • Milestone changed from 4.3 to 4.1 Beta

comment:7 Changed 4 years ago by 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.

comment:8 Changed 4 years ago by anna

  • Description modified (diff)

comment:9 Changed 4 years ago by 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", )

comment:10 Changed 4 years ago by anna

  • Description modified (diff)

comment:11 Changed 4 years ago by anna

  • Description modified (diff)

comment:12 Changed 4 years ago by anna

  • Description modified (diff)

comment:13 Changed 4 years ago by anna

  • Description modified (diff)

comment:14 Changed 4 years ago by 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?

comment:15 Changed 4 years ago by anna

  • Description modified (diff)

comment:16 Changed 4 years ago by 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.

comment:17 Changed 4 years ago by anna

  • Milestone changed from 4.1 Beta 1 to 4.1 Beta 2

comment:18 Changed 4 years ago by anna

  • Status changed from assigned to new
  • Owner baiju deleted

comment:19 Changed 4 years ago by anna

  • Description modified (diff)
  • Milestone changed from 4.2 Beta (Features - Content Sharing Focus) to 4.3 Beta (Re-Design of EM.org & Plumi)

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

comment:20 Changed 4 years ago by and

  • Priority changed from minor to critical

comment:21 Changed 3 years ago by dimo

  • Milestone changed from 4.3 Beta2 (Re-Design of EM.org & Plumi) to 4.3 Beta1

comment:22 Changed 3 years ago by mike

  • Status changed from new to closed
  • Resolution set to ready for testing

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

comment:23 Changed 3 years ago by 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.

comment:24 Changed 3 years ago by anna

  • Status changed from closed to reopened
  • Resolution ready for testing deleted

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.

comment:25 Changed 3 years ago by anna

  • Status changed from reopened to closed
  • Resolution set to fixed
View

Add a comment

Modify Ticket

Action
as closed
The resolution will be deleted. Next status will be 'reopened'
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.