HTML5 player: Difference between revisions
From MoodleDocs
(Add mobile comparison to flowplayer compatibility table.) |
(→Flowplayer HTML5: Added another android and ipad to summary.) |
||
| Line 149: | Line 149: | ||
! ogg | ! ogg | ||
! flv | ! flv | ||
! RTMP | ! RTMP/HLS | ||
|- | |- | ||
! Windows 7 | ! Windows 7 | ||
| colspan=" | | colspan="5"| | ||
|- | |- | ||
! | ! | ||
| Line 162: | Line 161: | ||
| flash | | flash | ||
| flash | | flash | ||
|- | |- | ||
! | ! | ||
| Line 171: | Line 169: | ||
| flash | | flash | ||
| flash | | flash | ||
|- | |- | ||
! | ! | ||
| Line 180: | Line 177: | ||
| flash | | flash | ||
| flash | | flash | ||
|- | |- | ||
! | ! | ||
| Line 189: | Line 185: | ||
| flash | | flash | ||
| flash | | flash | ||
|- | |- | ||
! | ! | ||
| Line 198: | Line 193: | ||
| flash | | flash | ||
| flash | | flash | ||
|- | |- | ||
! Linux (Debian Wheezy) | ! Linux (Debian Wheezy) | ||
| colspan=" | | colspan="5"| | ||
|- | |- | ||
! | ! | ||
| Line 210: | Line 204: | ||
| flash | | flash | ||
| flash | | flash | ||
|- | |- | ||
! OSX 10.9 | ! OSX 10.9 | ||
| colspan=" | | colspan="5"| | ||
|- | |- | ||
! | ! | ||
| Line 221: | Line 214: | ||
| - | | - | ||
| flash | | flash | ||
| html5 | | html5 | ||
|- | |- | ||
| Line 231: | Line 223: | ||
| flash | | flash | ||
| flash | | flash | ||
|- | |||
! Android 4.2.2 phone (CyanogenMod, no flash) | |||
| colspan="5"| | |||
|- | |||
! | |||
* Chrome 32.0.1700.99 | |||
| html5 | |||
| html5 | |||
| - | |||
| - | |||
| - | |||
|- | |||
! | |||
* Browser 4.2.2 (com.android.browser) | |||
| html5 | |||
| html5 | |||
| - | | - | ||
| - | |||
| html5 | |||
|- | |- | ||
! Android 4.2.2 ( | ! Android 4.2.2 tablet (GalaxyTab2, flash app) | ||
| colspan=" | | colspan="5"| | ||
|- | |- | ||
! | ! | ||
| Line 243: | Line 253: | ||
| - | | - | ||
| - | | - | ||
|- | |||
! | |||
* Browser 4.2.2 (com.android.browser) | |||
| html5 | |||
| html5 | |||
| - | | - | ||
| flash | |||
| html5 | |||
|- | |- | ||
! | ! | ||
* | * Opera 19.0.1340.x | ||
| html5 | | html5 | ||
| html5 | | html5 | ||
| Line 252: | Line 269: | ||
| - | | - | ||
| - | | - | ||
|- | |- | ||
! iPhone 4S (6.1.3) | ! iPhone 4S (6.1.3) | ||
| colspan=" | | colspan="5"| | ||
|- | |- | ||
! | ! | ||
| Line 261: | Line 277: | ||
| html5 | | html5 | ||
| - | | - | ||
| - | |||
| - | |||
| html5 | |||
|- | |||
! iPad 2 (6.1.3) | |||
| colspan="5"| | |||
|- | |||
! | |||
* Safari | |||
| html5 | |||
| - | | - | ||
| - | | - | ||
Revision as of 09:53, 26 February 2014
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 | In Development |
| Tracker issue | https://tracker.moodle.org/browse/MDL-38158 |
| Discussion | https://moodle.org/mod/forum/discuss.php?d=222753#p1105373 |
| Assignee | Ruslan Kabalin |
Project goals
The purpose of this document is to choose HTML5 with flash fallback for integration in Moodle.
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 video will play regardless browser native support of 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 - can 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 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
- Flowplayer HTML5
- Video.JS
- Projekktor
- ?Are there other alternatives?
| Flowplayer HTML5 | Video.JS | Projekktor | |
|---|---|---|---|
| Usability | Good | ||
| Accessible Player: | |||
|
Yes | ||
|
Yes | ||
|
Yes | ||
| Appearance: | |||
|
Yes (via CSS) | ||
|
Yes | ||
|
Yes | ||
| Mobile platforms: | |||
|
|||
|
|||
| Streaming protocols: | |||
|
Yes | ||
|
HLS | ||
| Audio player | No | ||
| Embedding support | Yes (configurable) | ||
| License | GPL v3 (with additional terms) | ||
| JS library | jQuery | ||
| Plugins infrastructure | No | ||
| Flash fallback player | Flowplayer Flash | ||
| API | Yes (plus window.flowplayer object) |
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)
Missing features
- Plugins infrastructure
- No audio support
Compatibility table
| Browser | mp4 | webm | ogg | flv | RTMP/HLS |
|---|---|---|---|---|---|
| Windows 7 | |||||
|
html5 | html5 | html5 | flash | flash |
|
html5 | html5 | html5 | flash | flash |
|
flash | html5 | - | flash | flash |
|
flash | - | - | flash | flash |
|
html5 | - | - | flash | flash |
| Linux (Debian Wheezy) | |||||
|
html5 | html5 | html5 | flash | flash |
| OSX 10.9 | |||||
|
html5 | - | - | flash | html5 |
|
html5 | html5 | html5 | flash | flash |
| Android 4.2.2 phone (CyanogenMod, no flash) | |||||
|
html5 | html5 | - | - | - |
|
html5 | html5 | - | - | html5 |
| Android 4.2.2 tablet (GalaxyTab2, flash app) | |||||
|
html5 | html5 | - | - | - |
|
html5 | html5 | - | flash | html5 |
|
html5 | html5 | - | - | - |
| iPhone 4S (6.1.3) | |||||
|
html5 | - | - | - | html5 |
| iPad 2 (6.1.3) | |||||
|
html5 | - | - | - | html5 |
Video.JS
Pros:
Cons:
Technical notes (lessons learned from the prototypes)
Outstanding work from the prototype
Missing features
Projekktor
Pros:
Cons:
Technical notes (lessons learned from the prototypes)
Outstanding work from the prototype
Missing features
