====== HTML5 Video Player ======

This document discusses the ways to play the video on iOS devices including the plugins we need and UI customization through skins.
The players are tested on an initial release of ipad.

===== Players' Status =====

Examined JWplayer versions 5 and 6. 

==== Jwplayer 5 ==== 

  - Video - Plays mp4(h.264, AAC) videos fine.
  - Skins and UI - The controlbar UI is distorted on ipad and skins have major UI issues.
  - Streaming - HTML5 streaming is not supported.(**Note -** Yet to try this out.)
  - Plugins - does not show the plugins while the video is playing. Plugins not supported properly.
 
=== Conclusion ===
Not usable for us on ipads.

==== JWPlayer 6 ====

  - Video - Plays mp4(h.264, AAC) videos fine.
  - Skins and UI - There are some minor differences in the default UI compared to what we see on ipad but Skins seem to work fine.
  - Streaming - Only premium version supports streaming to iOS devices through Apple HLS. (Ref - http://www.longtailvideo.com/support/jw-player/28856/using-apple-hls-streaming/). **Note -** Yet to try this out.
  - Plugins - Supports all plugins. Tested all plugins. Plugins seem to work fine on ipad but need some code changes.

=== Conclusion ===

Usable for us on ipads. With some minor code changes we can have this working for us. But as this is not free we need to examine some alternatives as well.

==== Videojs ====

  - Video - Plays mp4(h.264, AAC) videos fine.
  - Skins and UI - Consistent on both desktops and mobiles. **Note -** Full screen video opens up in system's player on ipad and iphone(Quicktime in  iOS). This is not customizable.
  - Streaming - Supports streaming to iOS devices through Apple HLS. (Ref - http://www.longtailvideo.com/support/jw-player/28856/using-apple-hls-streaming/)
  - Plugins - Supports plugins on all devices with a limitation. i.e Plugins are not supported in the full screen view on iOS devices as the full screen opens up in system player.

=== Conclusion ===
Usable for us on ipads and this is free. Seems to be the best available option at the moment.

===== Streaming On Mobiles =====

==== Apple HTTP Live Streaming (HLS) ====

We need to use apple HLS to stream videos to all iOS devices. This is supported on Safari on recent versions of Mac OSX (> snow leopard). HLS is also supported on all Android devices with android version greater than 4 (4.x + ) on Google chrome.

We completely support HLS on all iOS devices and using chrome on all android 4.x + devices at the moment in Learexa. 
On all the mobiles when streaming is not supported, videos play with download in Learnexa at the moment. 

==== Implementation ====

HLS is supported by apache 2+ and nginx (with a plugin) servers. m3u8 is the playable video list format. 

=== 1) Create m3u8 playlists using ffmpeg + segmenter ===
This is done using the latest ffmpeg (1.2) which also supports segmentation.

Setup Instructions - https://wiki.exphosted.com/doku.php/software_versions#install_ffmpeg_12_magic
     
=== 2) Add mimetypes in apache config file === 
Add the following mime types in apache config file (httpd.conf)
<code>
   AddType application/x-mpegURL    .m3u8
   AddType application/vnd.apple.mpegurl .m3u8
   AddType video/MP2T    .ts
</code>

=== References ===

http://www.ioncannon.net/programming/452/iphone-http-streaming-with-ffmpeg-and-an-open-source-segmenter/

http://www.ioncannon.net/meta/564/iphone-windowed-http-live-streaming-server/

==== Streaming on Android ====

As mentioned above HLS works on Android 4.x + on Chrome. This is supported in Learnexa. In case we want to support streaming on other browsers or on Android earlier versions (<4) flash is required.

=== References ===

http://www.longtailvideo.com/blog/31646/the-pain-of-live-streaming-on-android/

http://support.brightcove.com/en/video-cloud/docs/delivering-videos-apple-hls

===== Note =====

Observed that HTML5 videos does not play on ipad when we use Webrick as the rails(2.3.5) server(Does not really depend on mime types we set in rails app). The above testing is done with Passenger configured with Apache.