TL;DR: if you play HLS, it’s time to add MSE playback
Adobe’s Flash Player is going the way of the Dodo, but its extinction is not cause for concern. Flash Player has been a huge problem for years, and its ultimate demise will be celebrated by most in the tech world. Flash Player, whose security has had more holes than Swiss cheese, has long been a burden. Earlier this summer, Flash Player was forced to release updates with 36 security patches in one week! Steve Jobs, who was famously anti-Flash, released this scathing statement in 2010 and refused to make the iPhone Flash compatible. By 2011, Adobe announced the end of Flash Player for mobile devices.
Google’s newest Flash related announcement might be the death knell. Last week the Chrome team announced that it would block Flash applications, including the Flash Player, from loading in its browser. Chrome promises that these changes will lead to lighter websites that load faster and consume less battery life. Chrome’s decision will likely be great for the web as a whole, but in the video streaming world, it was a cause for some concern. Though many users have abandoned Flash Player over the past few years, it is still pretty widely used. While some platforms, including Chrome, already default to HTML5 Players, until now these browsers have still been able to load Flash and fallback to Flash Player. So what does the death of Flash Player mean for your video streams?
First of all, don’t worry. Though many viewers use a Flash plugin to stream HLS in their browser, they don’t need to! In fact, we wrote a post last year to show that you can deliver HLS streams better without Flash!
All major mobile browsers natively support the HLS protocol. Unfortunately, all desktop browsers don’t have native support. Once upon a time, this may have been a problem, but today this issue can be circumvented easily. Two open-source libraries, hls.js and video.js, will effectively transmux your HLS streams into a byte stream, called Fragmented MP4, seamlessly, on-the-fly. This Fragmented MP4 is then playable in-browser thanks to the Media Source Extensions API (MSE). Now your viewers can play your HLS streams anywhere, without that annoying Flash Player plugin.
Playing HLS Like A Pro
Playing HLS with MSE sounds promising (and it is awesome), but it’s not completely straightforward. To start with, you have to:
Integrate a library like hls.js or video.js into your player. If you’ve built a custom Flash Player, this can be a bit tricky. Consider this a good excuse to move to a new player. There are so many great, modern players today that you simply don’t need to build a custom player from scratch. Think of all of the time you can save by not having to maintain your own player!
Make sure the library can play your streams. We’ve found that many HLS streams in the wild are not actually valid streams. We’ve found a variety of different issues, including: video samples overlapping, missing metadata, unaligned iframes, streams that contain frames of different sizes with no #EXT-X-DISCONTINUITY, comments between EXTINF and segment URL, decoding issues and more. Though Flash Player can handle some these issues automatically, hls.js frequently cannot, so it’s important to make sure your streams are configured correctly.
Take care of Flash fallback. You’ll probably still want use Flash Player to play HLS streams when MSE is not available. MSE is available on these browsers (note: iOS Safari supports HLS natively, without MSE):
Implementing High-Quality Playback With HLS.js And Video.js
<video id=player width=600 height=300 class="video-js vjs-default-skin" controls> <source src="https://example.com/index.m3u8" type="application/x-mpegURL"></video> <script src="video.js"></script> <script src="videojs-contrib-hlsjs.js"></script> <script> var player = videojs('#player'); </script>
The magic is in videojs-contrib-hls.js. It is set up to support hls.js and video.js events and handle the basic video tag to detect if native hls is supported. You can get the latest bundled plugin here.
So, what should you do if HLS cannot be played natively and MSE is not supported? If your viewers use old browsers or your streams are in unsupported formats, you have two choices:
- Send your viewers an error message and explain the situation. This is the default for hls.js. For many content providers, whose viewers come from modern browsers, this might make the most sense. Including Flash fallback is complex and may simply not be worth the hassle.
- Load Flash Player (😢😢😢) and try to play the stream in Flash. Old browsers, like IE 8 - 10, represent roughly 20% of Internet traffic, so many broadcasters will want to enable fallback.
Unfortunately, hls.js doesn’t include a Flash Player fallback mechanism, so at Peer5 we decided to fallback to video.js5's html5 contrib-hls playback technology. Videojs5’s Flash fallback is a mature solution that utilizes its Flash contrib-hls technology. Our plugin bundles both hls.js and contrib-hls and, therefore, includes logic that can handle any situation. Here’s a demo page you can play with.
So Flash Player is dying, but don’t worry about your HLS streams. Whether natively or through MSE, all modern browsers will support your streams if you simply add Peer5’s open-source code to your player. As an added bonus, your streams will also support fallback to Flash Player for old browsers. Now all of your HLS streams are handled for you completely seamlessly, and without Flash.
Long Story Short
- Flash, and therefore Flash Player, will soon be disabled on modern browsers
- Moving away from Flash to MSE will vastly increase support for your HLS streams
- There are a variety of great MSE-based libraries that can easily be added to players
- You probably want to include Flash fallback for viewers using older browsers
- Just add Peer5’s open-source code to your player and you’re good to go
Peer5’s Serverless CDN supports massively-scaled live and on demand video streaming. As the demand for ever increasing amounts of delivery capacity continues to grow unabated, no single CDN is able to provide all of the capacity, features, geographic coverage and uptime that broadcasters need. Hence, the growing momentum behind a Multi-CDN architecture and the load-balancing, redundancy and feature completeness advantages that this approach affords.
Our novel peer-to-peer (P2P) solution solves the peak demand problem by creating a network that actually gets stronger as viewership increases. This means that we perform our best at the exact moment when traditional CDNs struggle the most – making Peer5 the perfect complement to a broadcaster’s existing CDN infrastructure. Register for your own Peer5 account here.