Proposals/Done/HTML5 media player: Difference between revisions
From Mahara Wiki
< Proposals | Done
m (Anitsirk moved page Developer Area/Specifications in Development/Done/HTML5 media player to Proposals/Done/HTML5 media player: Shorter navigation, not always technical) |
|||
| (9 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
= Introduction = | |||
This feature will replace the current flash player in Mahara by an open source HTML5 media player. | 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? | * 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? | * Easy to use - is it easy to use it, does it have an intuitive interface to control? | ||
| Line 22: | Line 22: | ||
* Can the player display subtitles / transcripts (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. | 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" | {| class="wikitable sortable" | ||
| Line 28: | Line 28: | ||
! Player !! Open source !! Easy to use !! Accessibility !! Mobile !! Consistency !! Theme/skin !! Audio !! Multiple media !! Flash fallback !! Documentation !! Plugins !! Streaming !! Community !! Performance !! Total !! Note | ! 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 || | | Native HTML5 || || 4 || 3 || 4 || 5 || 1 || 5 || 4 || 1 || 5 || 1 || 3 || 1 || 1 || 38 || | ||
|- | |- | ||
| Flowplayer HTML5 || GPL v3 || 5 || 5 || 5 || 5 || 4 || 1 || 5 || 5 || 5 || 1 || 1 || 1 || 0 || | | [http://flowplayer.org/ Flowplayer HTML5] || GPL v3 || 5 || 5 || 5 || 5 || 4 || 1 || 5 || 5 || 5 || 1 || 1 || 1 || 0 || 43 || Flowplayer logo | ||
|- | |- | ||
| Video.JS || Apache 2 || 4 || 4 || 5 || 5 || 4 || 5 || 5 || 5 || 5 || 5 || 1 || 1 || 1 || || No extra JS library | | [http://www.videojs.com/ Video.JS] || Apache 2 || 4 || 4 || 5 || 5 || 4 || 5 || 5 || 5 || 5 || 5 || 1 || 1 || 1 || 50 || 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 | | [http://www.projekktor.com/ Projekktor] || GPL v3 || 5 || 4 || 4 || 5 || 5 || 5 || 5 || 4 || 5 || 5 || 4 || 1 || 0 || 52 || Issues on iOS and Android | ||
|- | |- | ||
| MediaElement.js || MIT || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 4 || 5 || 0 || 0 || || Flash fall-forward | | [http://mediaelementjs.com/ MediaElement.js] || MIT || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 5 || 4 || 5 || 0 || 0 || 54 || Flash fall-forward | ||
|- | |- | ||
| OSM player || MIT || 5 || 4 || 3 || 4 || 4 || 4 || 5 || 4 || 3 || 4 || 4 || 0 || 0 || || Issues on iOS | | [http://mediafront.org/osmplayer/ OSM player] || MIT || 5 || 4 || 3 || 4 || 4 || 4 || 5 || 4 || 3 || 4 || 4 || 0 || 0 || 44 || Issues on iOS | ||
|- | |- | ||
| LeanBack player || GPL v3 || 5 || 5 || 4 || 5 || 4 || 5 || 4 || 4 || 4 || 4 || 3 || 0 || 0 || || non-commercial usage | | [http://www.leanbackplayer.com/ LeanBack player] || GPL v3 || 5 || 5 || 4 || 5 || 4 || 5 || 4 || 4 || 4 || 4 || 3 || 0 || 0 || 47 || non-commercial usage | ||
|- | |- | ||
| Kaltura | | [http://player.kaltura.com/docs/ Kaltura player toolkit] || AGPL v3 || 5 || 5 || 5 || 5 || 5 || 4 || 5 || 5 || 5 || 5 || 5 || 1 || 1 || 56 || | ||
|} | |} | ||
==Useful links== | |||
* http://html5video.org/wiki/Player_Comparison - HTML5video.org comparison of players | |||
* https://docs.moodle.org/dev/HTML5_player - HTML5 player in Moodle dev wiki. | |||
* http://site.kaltura.com/rs/kaltura/images/Kaltura_Whitepaper_How_to_Select_the_Best_Video - How to Select the Best Video Player | |||
=Decision= | |||
We decided to implemnt VideoJS because it is the most accessible option out-of-the-box without the user needing to change settings and provides all the functionality we require. | |||
Latest revision as of 17:43, 11 July 2020
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.
| 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 | 38 | ||
| Flowplayer HTML5 | GPL v3 | 5 | 5 | 5 | 5 | 4 | 1 | 5 | 5 | 5 | 1 | 1 | 1 | 0 | 43 | Flowplayer logo |
| Video.JS | Apache 2 | 4 | 4 | 5 | 5 | 4 | 5 | 5 | 5 | 5 | 5 | 1 | 1 | 1 | 50 | No extra JS library |
| Projekktor | GPL v3 | 5 | 4 | 4 | 5 | 5 | 5 | 5 | 4 | 5 | 5 | 4 | 1 | 0 | 52 | Issues on iOS and Android |
| MediaElement.js | MIT | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 4 | 5 | 0 | 0 | 54 | Flash fall-forward |
| OSM player | MIT | 5 | 4 | 3 | 4 | 4 | 4 | 5 | 4 | 3 | 4 | 4 | 0 | 0 | 44 | Issues on iOS |
| LeanBack player | GPL v3 | 5 | 5 | 4 | 5 | 4 | 5 | 4 | 4 | 4 | 4 | 3 | 0 | 0 | 47 | non-commercial usage |
| Kaltura player toolkit | AGPL v3 | 5 | 5 | 5 | 5 | 5 | 4 | 5 | 5 | 5 | 5 | 5 | 1 | 1 | 56 |
Useful links
- http://html5video.org/wiki/Player_Comparison - HTML5video.org comparison of players
- https://docs.moodle.org/dev/HTML5_player - HTML5 player in Moodle dev wiki.
- http://site.kaltura.com/rs/kaltura/images/Kaltura_Whitepaper_How_to_Select_the_Best_Video - How to Select the Best Video Player
Decision
We decided to implemnt VideoJS because it is the most accessible option out-of-the-box without the user needing to change settings and provides all the functionality we require.