HTML5 player

Jump to: navigation, search

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

HTML5 Player with flash fallback
Project state Closed, released in 3.2
Tracker issue https://tracker.moodle.org/browse/MDL-38158
Discussion https://moodle.org/mod/forum/discuss.php?d=222753#p1110024
Assignee Marina Glancy

Template:Moodle 2.x

Project goals

The purpose of this document is to choose HTML5 player with flash fallback for integration in Moodle and plan its implementation.

The aim of this change is to reach a consistent look of the player among different platforms and browsers, as well as making sure that player starts using flash if html5 is not supported by browser for the given format. Another aim is to improve accessibility and usability, enhance customisation.

Considerations

  • Usability of the player - is it easy to use it and intuitively understand how to use controls?
  • Accessibility of the player - possibility of keyboard navigation, subtitles, support?
  • Appearance of the player - can its interface be modified, themes support, RTL?
  • Consistency among browsers - does player look the same?
  • Audio support - can player handle HTML5 <audio> tag?
  • Mobile platforms support - does player also work on iOS and Android?
  • Streaming media support (including adaptive-bitrate delivery) - can player handle RTMP, Apple HLS, Adobe HDS, Microsoft HSS?
  • Plugins support - can we use or develop community plugins easily?
  • Embedding support - so users could post media content outside Moodle, if permitted.
  • Maintainability of the links between the player and Moodle - how much work will we need to do every time we upgrade?

Candidates

Comparison Matrix

Flowplayer HTML5 Video.JS Projekktor MediaElement.js No Player
Accessible Player:
  • Keyboard control
Yes Yes (http://accessibility.oit.ncsu.edu/blog/2013/05/09/accessible-video-js-player-available-on-global-accessibility-awareness-day/) This was instructed by Greg Krause, one of the key accessibility advisors for Moodle. Yes (configurable) Yes Yes
  • Subtitles support
Yes Yes Yes (via plugin) Yes Yes (see http://caniuse.com/webvtt)
  • Touch interface
Yes Yes Yes Yes Yes
Appearance:
  • Skins
Yes (via CSS) Yes (via CSS) Yes (via CSS) Yes (via CSS) Yes (via CSS)
  • CSS customisation
Yes Yes Yes Yes Yes
  • RTL support
Yes No No Unknown (CSS, so I guess so...) Yes
Mobile platforms:
  • iOS
Yes No Yes Yes Yes
  • Android
Yes No Yes Yes Yes
Streaming protocols:
  • RTMP
Yes Yes Yes (via playlist) Yes No
  • Adaptive HTTP
HLS HLS (via plugin) HLS (via playlist) HLS via Media Source Extension
  • MPEG-DASH
Yes (via plugin) Yes (via plugin)  ?  ?  ?
Audio player No Yes Yes Yes Yes
Embedding support Yes (configurable) Yes (via addThis plugin) Yes (via plugin) Yes No
License GPL v3 (with additional terms) Apache 2 GPL v3 MIT no extra code needed
JS library jQuery - jQuery jQuery none required
Plugins infrastructure No Yes Yes Yes No
Flash fallback player Flowplayer Flash video-js flash StobeMediaPlayback (but can be jarisplayer or some other). Flash and Silverlight (for .wmv support) fallback, used to provide the HTML5 video/audio elements. The Video tag can contain fallback content (e.g. Flash object) for browsers that don't support it at all (http://camendesign.com/code/video_for_everybody), but not based on codec support.
API Yes (plus window.flowplayer object) Yes Yes Yes Yes

Flowplayer HTML5

Pros:

  • Good looking player, resembles existing flash flowplayer in Moodle (with "functional" skin)
  • Extensive customisation (via CSS3 skins and configuration object)
  • Streaming support (RTMP, HLS)
  • Good accessibility features
  • Configurable embedding functionality
  • Existing flash flowplayer can be configured for fallback (the appearance of player will not be affected).

Cons:

  • Require jQuery for functioning
  • Flowplayer logo remains on screen

Technical notes (lessons learned from the prototypes)

  • Player initialisation is done using wrapper around <video>.
  • width and height attributes in video tag are ignored, player size is configured via wrapper size only.
  • RTMP server connection is configured via data-rtmp attribute in wrapper or player init config parameter, actual path the file specified in src attribute of source item.
  • <source type="video/flash"... dummy MIME type to force using plash player for whatever content.

Missing features

  • Plugins infrastructure
  • No audio support

Video.JS

Pros:

  • No logo on screen.
  • Extensive API.
  • No extra JS library needed.
  • Many plugins.

Cons:

  • Poor documentation
  • RTMP requires non-standard MIME.
  • Android and iOS override Video.JS with own player, when not overridden, content is not playing.
  • No RTL.
  • HLS support via plugin (many files to include, external contributor see https://github.com/videojs/videojs-contrib-hls).

Technical notes (lessons learned from the prototypes)

  • Player initialisation is done using <video> tag directly (no wrapper needed).
  • RTMP server connection and path specified as single URI in src attribute of source item, '&' character is used as server connection and path divider.

Missing features

  • Embedded HLS support.

MediaElement.js

Pros:

  • Flash fall-forward - uses Flash/Silverlight to provide the HTML5 MediaElement API.
  • Consistent HTML/CSS Player
  • No logo on screen.

Cons:

  • ...

Technical notes (lessons learned from the prototypes)

  • ...

Missing features

  • ...

Projekktor

Pros:

  • No logo on screen.
  • Well documented API.
  • Media RSS support.
  • Possibility to choose flash player for fallback (included by default are StrobeMediaPlayback and Jarisplayer, both Open Source).
  • Platform preference order selection (e.g. browser, ios, android, flash, native).

Cons:

  • Uses flash where it is not supposed to (e.g. mp4 in Chrome).
  • Issues on ios and android (suggests to download file when play button is pressed).
  • RTMP only work if defined via playlist rather than in <source> tags.
  • Subtitles plugin is not free.

Technical notes (lessons learned from the prototypes)

  • Player initialisation is done using <video> tag directly (no wrapper needed).
  • Make sure <video> tag has class attribute with 'projekktor' value (even if you initialise it by ID of the element), player will not work properly otherwise.

Missing features


HTML5 browser native

Pros:

  • Simple
  • Standard on mobile

Cons:

  • IE8 has no support

Technical notes

Missing features

Cross-browser support

Method

Compatibility checks were done manually by accessing the sample page using different browsers and platforms. Sample page contained the list of identical player instances, initialised for each <video> definition with a <source> of particular format: mp4, webm, ogg, flv. Streaming support was checked by setting up a <video> container with two sources of the same video, one was HLS (Apple HTTP Live Streaming) stream for browsers and platforms that support html5 video streaming, another one was RTMP which is played using flash engine and supposed to be used in case if HLS is not supported.

Sample Pages

Source

Source of testing page is hosted on github. The actual source of the html page can be viewed in browser.

Discussion

The players comparison that has been carried out demonstrated that "least hassle" player is Flowplayer. Despite some drawbacks listed in corresponding section above, it is clearly a winner as it works as expected and according to documentation for all browsers and platforms I had chance to test it. This is the only player that supports RTL layout, display platform incompatibility message prior to attempt to play, and was simple to configure (no undocumented tricks that I had to figure out to make it work). Both VideoJS and Projekktor do now perform properly in all cases. Among those two, I personally prefer Projekktor more for its extensive API, plugins infrastructure and configuration flexibility. However problems on mobile platforms and flash fallback inconsistency make them unreliable at this stage.

Compatibility results

The table was populated using Flowplayer as others do not perform good enough with some formats and platforms, e.g. VideoJS allow mobile platform player to override itself, Projekktor does not always use HTML5 where browser clearly can handle it (supported in native mode and Flowplayer).

Browser mp4 webm ogg flv RTMP/HLS*
Windows 7
  • Chrome 33.0.1750.117
html5 html5 html5 flash flash
  • Firefox 27.0.1
html5 html5 html5 flash flash
  • Opera 12.16
flash html5 - flash flash
  • Safari 5.1.7
flash - - flash flash
  • Internet Explorer 11.0.9600.x
html5 - - flash flash
Linux (Debian Wheezy)
  • Chrome 33.0.1750.115
html5 html5 html5 flash flash
OSX 10.9
  • Safari 7.0 (9537.71)
html5 - - flash html5
  • Chrome 33.0.1750.117
html5 html5 html5 flash flash
Android 4.2.2 phone (CyanogenMod, no flash)
  • Chrome 32.0.1700.99
html5 html5 - - -
  • Browser 4.2.2 (com.android.browser)
html5 html5 - - html5
Android 4.2.2 tablet (GalaxyTab2, flash app 11.1.115.36)
  • Chrome 32.0.1700.99
html5 html5 - - -
  • Browser 4.2.2 (com.android.browser)
html5 html5 - flash html5
  • Opera 19.0.1340.x
html5 html5 - - -
iPhone 4S (6.1.3)
  • Safari
html5 - - - html5
iPad 4 (7.0.6)
  • Safari
html5 - - - html5

* For HLS/RTMP, html5 in the table means HLS has been used, flash means player fell back and used RTMP.

Sub Tasks

In initial stage FlowPlayer HTML5 (or any other) will handle all existing HTML5 Video extensions as per core_media_player_html5video class, plus m3u8 (HLS). It will also be possible optionally to make flash files handled by HTML5 Video player as well (possibility of using existing flash FlowPlayer for flv files will remain).

Mock-Ups/Prototypes

See Sample pages section.

Workaround

As intermediate solution, if you require player consistency throughout all browsers and platforms, you may consider using JW Player filter: https://github.com/lucisgit/moodle-filter_jwplayer Notice, that JW Player is not free for commercial use.

Related Tracker Issues

Useful links