HTML5 player

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 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

• Flowplayer HTML5
• Video.JS
• Projekktor
• ?Are there other alternatives?

	Flowplayer HTML5	Video.JS	Projekktor
Usability	Good	Good
Accessible Player:
Keyboard control	Yes	No
Subtitles support	Yes	Yes
Touch interface	Yes	Yes
Appearance:
Skins	Yes (via CSS)	Yes (via CSS)
CSS customisation	Yes	Yes
RTL support	Yes	No
Mobile platforms:
iOS	Yes	No
Android	Yes	No
Streaming protocols:
RTMP	Yes	Yes
Adaptive HTTP	HLS	HLS (via plugin)
Audio player	No	Yes
Embedding support	Yes (configurable)	Yes (via addThis plugin)
License	GPL v3 (with additional terms)	Apache 2
JS library	jQuery	-
Plugins infrastructure	No	Yes
Flash fallback player	Flowplayer Flash	video-js flash
API	Yes (plus window.flowplayer object)	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.

Missing features

• Plugins infrastructure
• No audio support

Video.JS

Pros:

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

Cons:

• Flash fallback does not work (followed basic installation guide, tried specifying tech config param, no success).
• Android and iOS override Video.JS with own player.
• 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.

Outstanding work from the prototype

Missing features

Projekktor

Pros:

Cons:

Technical notes (lessons learned from the prototypes)

Outstanding work from the prototype

Missing features

Cross-browser support checks

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 Page source

 <div class="player_instance">
     <p>MP4</p>
     <div class="player_mp4" style="width: 624px; height: 260px;">
         <video controls width="624" height="260" preload="metadata">
             <source type="video/mp4" src="http://stream.flowplayer.org/bauhaus/624x260.mp4">
         </video>
     </div>
     <p class="info"> </p>
 </div>
 <div class="player_instance">
     <p>WEBM</p>
     <div class="player_webm" style="width: 624px; height: 260px;">
         <video controls width="624" height="260" preload="metadata">
             <source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm">
         </video>
     </div>
     <p class="info"> </p>
 </div>
 <div class="player_instance">
     <p>OGG</p>
     <div class="player_ogg" style="width: 624px; height: 260px;">
         <video controls width="624" height="260" preload="metadata">
             <source type="video/ogg" src="http://stream.flowplayer.org/bauhaus/624x260.ogv">
         </video>
     </div>
     <p class="info"> </p>
 </div>
 <div class="player_instance">
     <p>FLV</p>
     <div class="player_flv" style="width: 624px; height: 260px;">
         <video controls width="624" height="260" preload="metadata">
             <source type="video/flash" src="http://stream.flowplayer.org/flowplayer-700.flv">
         </video>
     </div>
     <p class="info"> </p>
 </div>
 <div class="player_instance">
    <p>RTMP/HLS</p>
    <div class="player_rtmp" style="width: 624px; height: 260px;" data-rtmp="rtmp://tes-ams.lancs.ac.uk/public/_definst_/">
        <video controls width="624" height="260" preload="metadata">
            <source type="application/x-mpegurl" src="http://tes-ams.lancs.ac.uk:8134/hls-public/users/cpadai/big_buck_bunny/big_buck_bunny_720p_1mbps.f4v.m3u8">
            <source type="video/flash" src="mp4:users/cpadai/big_buck_bunny/big_buck_bunny_720p_1mbps.f4v">
        </video>
    </div>
    <p class="info"> </p>
 </div>

Sample pages

• Flowplayer HTML5 version 5.4.6.
• Video.JS version 4.4.1.

Results

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.

Related Tracker Issues

• MDL-38158

Useful links

• http://praegnanz.de/html5video/
• http://html5video.org/wiki/HTML5_Video_Player_Comparison
• http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/Choosing-a-Video-Player-Features-and-Specs-for-the-Top-Five-94188.aspx