Table of Contents
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)
AddType application/x-mpegURL .m3u8 AddType application/vnd.apple.mpegurl .m3u8 AddType video/MP2T .ts
References
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.
