Update: JW Player now offers the highest quality HLS playback across HTML5 desktop and mobile devices! Our market leading HLS support allows you to deliver innovative video experiences for your viewers. Check out all JW Player’s streaming features here.
To learn more about the state of HTML5 video and adaptive streaming with HLS, read this report on our developer site.
Also, watch this demo that shows JW Player loading fragments by comparing your bandwidth to the available video bitrates.
————————————————————————————————————————————————
Adaptive streaming is the ability for a video player to dynamically adjust video quality based on available bandwidth, device performance and network conditions. Most modern web browsers only support progressive video playback which does not allow for seamless quality switching. The responsibility to provide adaptive streaming falls on modern video players like JW Player. Adaptive playback comes in many formats and protocols and the popularity of each format has changed over the years.
We are happy to announce support for HLS playback in JavaScript, taking advantage of the HTML5 Media Source Extensions in desktop Chrome. With only a few exceptions, HLS in HTML5 will work as it did with Flash, just faster!
Apple’s HLS protocol is the most widely used streaming format today, partly because it is the only streaming format supported on iOS devices. Using HLS requires media to be packaged in short video segments using the MPEG-2 Transport Stream (M2TS) container standard which is conveniently a standard already used in broadcast television. Unfortunately, M2TS is not an format that all browsers support and requires an application layer on top of the browser to turn the transport stream into a format the browser or application can understand and play. Historically this application layer was written in ActionScript and rendered using Flash. With the advent and wide adoption of the Media Source Extensions, Flash is no longer the sole way of rendering Apple HLS in browsers that do not support the streaming protocol.
Optimizing Playback Quality
The JW Player uses a conservative but accurate calculation to determine the time until a segment is ready for playback after download begins. This is a function of the estimated file size, network latency, network bandwidth and browser performance. The estimated file size is the maximum of either the average segment size thus far or the size as calculated using metadata from the manifest and segment duration. Providing more accurate manifests will help the algorithm settle on the correct level more quickly.
In pseudo-code this looks like :
TimeUntilReady = latency + (fileSize / bandwidth) + (cpuMultiplier * fileSize);
Using this method, the Player calculates the maximum rendition supported such that if we were to perform an upswitch, the timeUntilReady of the new segment is less than the time before playback reaches our minimum allowed forward buffer, including a safety margin. The safety margin is dynamically updated to become more conservative when the network seems unreliable. By using this minimum forward buffer and a safety factor we attempt to eliminate time spent under buffered, while aggressively increasing to the maximum possible quality.
Getting Started
In your JW Player setup, make your primary configuration option ‘HTML5,’ or better yet, remove primary entirely. Primary setting forces a rendering mode for a given media source. JW Player automatically prefers HTML5 media engines over Flash so if you have primary set to Flash you will not be able to take advantage of HLS in HTML5 in Chrome. The only real reason to still use primary:flash is if you know your ad partner is still using VPAID 1.0 Flash creatives. If that is case, let us know and we can recommend a partner that is providing VPAID 2.0 HTML5 creatives.
Up Next
There are a few performance enhancements we are excited to look into now that HLS is delivered in HTML5. Specifically around adaptive playback in live streams, expect a higher quality stream for longer periods of time. This initial release is for HTML5 and desktop Chrome only. Microsoft Edge and Apple Safari already support HLS in HTML5 through the