We continue publishing set of articles about interesting technology areas and solutions we have implemented or encountered in our projects.
This article briefly describes our experience in solving an issue with slow loading of large instructional videos on mobile phones.
Issue
One of our projects had video instructions for users as a key component. Users are reviewing the videos on their mobile phones and as some videos were quite large, people have various internet connection quality. We had real issues with some clients because of that.
Potential Solution
HTTP Live Streaming looks like most interesting and suitable solution to this issue. This approach allows to adapt to user bandwidth and device on the fly and give him the acceptable quality for every specific minute.
Challenges
There were two challenges with using HLS.
- Compatibility: HLS was implemented by Apple and supported now only by iOS devices and Safari. This means that for Android app and most browsers on desktop this approach will not work. Though most users used iPhone we still required another solution for other users.
- Encoding: The second challenge is that users are able to upload their own videos so we need to encode any video on the fly in efficient way to appropriate format.
Our Solution
And after careful consideration and testing of various tools we decided to use a nice service from Transloadit.com. It allows to encode video to different formats with appropriate codecs as well as create playlist for HLS and works with Amazon S3 file storages which was important for us.
So during uploading video by user we encode it using Transloadit to most popular internet/mobile MP4 codec H.264 that is supported by most browsers and mobile devices. This file was used then by devices that doesn’t support HLS. Taking this video (which was in most cases smaller than original file) we could encode it in a way so that a video player can preload only chunks of video one by one, thus minimizing preloading/buffering time. And adapt to the bandwidth. Using client description in HTTP request our server provide H.264 encoded video or M3U playlist (for iOS) to it. This solution had its major advantages over other streaming/encoding options due to simplicity and easiness of implementation.
Transloadit also provided a space and bandwidth to host and stream video content (through Amazon S3).
Definitions
HTTP Live Streaming (also known as HLS) is an HTTP-based media streaming communications protocol implemented by Apple Inc. as part of their QuickTime, Safari, OS X, and iOS software. It works by breaking the overall stream into a sequence of small HTTP-based file downloads, each download loading one short chunk of an overall potentially unbounded transport stream. As the stream is played, the client may select from a number of different alternate streams containing the same material encoded at a variety of data rates, allowing the streaming session to adapt to the available data rate. At the start of the streaming session, it downloads an extended M3U playlist containing the metadata for the various sub-streams which are available.
H.264 or MPEG-4 Part 10, Advanced Video Coding (MPEG-4 AVC) is a video compression format that is currently one of the most commonly used formats for the recording, compression, and distribution of video content. The final drafting work on the first version of the standard was completed in May 2003, and various extensions of its capabilities have been added in subsequent editions.
