View source for Proposals/Done/HTML5 media player


== Introduction ==
This feature will replace the current flash player in Mahara by an open source HTML5 media player.

== A comparison of HTML5 players ==

=== Criteria to choose ===
* Open source - is it a GPLv3 or compatible?
* Easy to use - is it easy to use it, does it have an intuitive interface to control?
* Accessibility - does it support keyboard control, subtitles, multiple language?
* Multiple mobile platforms support - does player also work on iOS and Android?
* Consistency among browsers, platforms - does player look the same in different browsers, handheld devices?
* Theme/skin - does it support theme/skin?
* Audio ready - can it play audio files?
* Multiple media support - can it play different media file types?
* Flash fallback - does it also work with old flash media?
* Documentation - can we easily integrate it into mahara?
* Plugins/extension support - can we use or develop community plugins easily?
* Streaming media support - can player handle RTMP, Apple HLS, Adobe HDS, Microsoft HSS? (bonus)
* Helpful community - how easily can we get help from its community? (bonus)
* Performance - size, load time, ...(bonus)
* Can the player display subtitles / transcripts (bonus)

=== HTML5 player options ===
Here is a list of HTML5 player options which support fully or partially the above features. We give 5 points for a full supported feature and 1 for non-supported. For bonus feature we only give 1 point if supported.
{| class="wikitable sortable"
|-
! Player !! Open source !! Easy to use !! Accessibility !! Mobile !! Consistency !! Theme/skin !! Audio !! Multiple media !! Flash fallback !! Documentation !! Plugins !! Streaming !! Community !! Performance !! Total !! Note
|-
| Native HTML5 ||  || 4 || 3 || 4 || 5 || 1 || 5 || 4 || 1 || 5 || 1 || 3 || 1 || 1 ||  ||
|-
| Flowplayer HTML5 || GPL v3 || 5 || 5 || 5 || 5 || 4 || 1 || 5 || 5 || 5 || 1 || 1 || 1 || 0 ||  || Flowplayer logo ||
|-
| Video.JS || Apache 2 || 4 || 4 || 5 || 5 || 4 || 5 || 5 || 5 || 5 || 5 || 1 || 1 || 1 || || No extra JS library ||
|-
| Projekktor || GPL v3 || 5 || 4 || 4 || 5 || 5 || 5 || 5 || 4 || 5 || 5 || 4 || 1 || 0 || || Issues on iOS and Android ||
|-
| MediaElement.js || MIT || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 4 || 5 || 0 || 0 || || Flash fall-forward || 
|-
| OSM player || MIT || 5 || 4 || 3 || 4 || 4 || 4 || 5 || 4 || 3 || 4 || 4 || 0 || 0 || || Issues on iOS ||
|-
| LeanBack player || GPL v3 || 5 || 5 || 4 || 5 || 4 || 5 || 4 || 4 || 4 || 4 || 3 || 0 || 0 || || non-commercial usage ||
|-
| Kaltura's player toolkit|| AGPL v3 || 5 || 5 || 5 || 5 || 5 || 4 || 5 || 5 || 5 || 5 || 5 || 1 || 1 || || 
|}

===Useful links===

* https://docs.moodle.org/dev/HTML5_player - HTML5 player in Moodle dev wiki.