Actions

Proposals/Done/HTML5 media player: Difference between revisions

From Mahara Wiki

< Proposals‎ | Done
No edit summary
m (Anitsirk moved page Developer Area/Specifications in Development/Done/HTML5 media player to Proposals/Done/HTML5 media player: Shorter navigation, not always technical)
 
(14 intermediate revisions by 4 users not shown)
Line 1: Line 1:


== Introduction ==
= 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 ==
= A comparison of HTML5 players =


=== Criteria to choose ===
== 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 20: Line 20:
* Helpful community - how easily can we get help from its community? (bonus)
* Helpful community - how easily can we get help from its community? (bonus)
* Performance - size, load time, ...(bonus)
* Performance - size, load time, ...(bonus)
=== HTML5 player options ===
* 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"
{| class="wikitable sortable"
|-
|-
! Player !! Open source !! Easy to use !! Accessibility !! Mobile !! Consistency !! 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 ||  || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| Native HTML5 ||  || 4 || 3 || 4 || 5 || 1 || 5 || 4 || 1 || 5 || 1 || 3 || 1 || 1 || 38 ||
|-
|-
| Flowplayer HTML5 || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| [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 || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| [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 || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| [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 || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| [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 || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| [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 || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| [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 player || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
| [http://player.kaltura.com/docs/ Kaltura player toolkit] || AGPL v3 || 5 || 5 || 5 || 5 || 5 || 4 || 5 || 5 || 5 || 5 || 5 || 1 || 1 || 56 ||  
|-
| Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example || Example
|}
|}
==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

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.

Retrieved from ‘https://wiki.mahara.org/index.php?title=Proposals/Done/HTML5_media_player&oldid=11501’