Apple HLS Adaptive Bitrate Streaming

Learn how to use JW Player with Wowza to do adaptive bitrate streaming with Apple HLS.


In this video we focus on Apple HLS Adaptive Bitrate Streaming. In addition to defining what adaptive bitrate streaming is from a technical perspective, we also how to enable ABR streaming in both Wowza Streaming Engine and JW Player. Additionally, we cover DVR and how to enable that functionality within Wowza and JW Player technologies.


We cover:

Overview of ABR streaming with HLS
Step-by-step demo to enable adaptive bitrate streaming.


Ryan: Welcome to today's stream talk between JW Player and Wowza, and today we are going to focus on Apple HLS Adaptive Bitrate Streaming. Also wrapping some additional functionality around that like DVR, getting that work on Wowza, getting it work with your own JW Player account. Joining me today is Eric Boyd, who's the product manager for JW. Hey Eric, how are you?


Eric: Great. Thanks Ryan. 


Ryan: Absolutely. And to get started, let's just give people a quick round down of what APR is and how it works. And there's one of my favorite demos that's on JW's site. If I click the play button here real quick, maybe, Eric, you can talk us through what is going on here, how Adaptive Bitrate is actually working and how JW is handling this.


Eric: Sure. So, the basic concept behind Adaptive Bitrate Streaming is giving a video player multiple quality streams so that as a viewer if you ever encounter any bandwidth issues, you really don't get stuck buffering. And buffering is one of the worst experiences in video. So, instead of buffering, basically the video player detects there's been a drop in bandwidth and it can start actually downloading a lower quality, so there is no interruption in that video viewing experience. So what we're seeing right here is, the bandwidth that's available, you may actually have ability to up switch a little bit higher than what that looks like. Like a medium to low quality, but we are in a small size player.


So, JW Player isn't going to download a higher quality video if it doesn't need to. So what Ryan just did there was did a manual switch and you can see that now we're in a much higher quality. You see that the player is actually downloading those high quality segments. So if the bandwidth were to drop, however, we would see the player starts to download lower quality segments, and then it would adaptively switch and seamlessly switch, so there's just no interruption to the viewer's experience at all. 


The tricky thing with adaptive streaming is that it's not actually supported natively in our motive browsers, especially with Apple HLS. It's actually only supported native Video Tags on iPhones, our iOS devices, Safari, and Microsoft Edge has it, and Android Chrome supports it. Other than that, you actually need to use a video player hat supports it or use media source extensions to convert the HLS video format into a different format that the browser can natively understand.


Ryan: And I think one of the benefits here with Adaptive, it's not just the available bandwidth, it also recognizes the size of the player as you mentioned, Eric. So if I was to go full screen here, it's going to know that I'm going full screen now. And then if I have the available bandwidth, it's going to deliver me the higher end resolution to match whatever resolution I'm on my device as well.


Eric: Right. Exactly. There we go. You just saw it happen right there.


Ryan: Yeah, and if I switch back out of this, you guys can see that jump that just happened. And, of course, the jump back down now to a lower resolution since I'm in a smaller player. So, I think that's pretty good overview of what's happening with Adaptive Streaming with HLS. And there are other protocols as well that are embracing this ABR technology. Pretty much all HTTP Streaming Protocols. But for today's demo, we're going to focus on HLS and show how to enable this.


So in order to do that, let me start from the live stream side. We're going to show a live stream. You can implement this for both video on demand and for live, but for today's example I'm actually going to fire up Telestream Wirecast and push a live stream into my Wowza streaming engine server. So you can see I have a version of Wowza running up in the cloud, I've got a trail license in here. And what I'm going to do to start with is actually push a live stream directly in here. And I've already configured Telestream Wirecast, which is my software encoder to do this. 


And before I do that, I just want to show you what I've done on the Wowza site to enable this. And if I come in to my applications, I have my Apple default live application set up here. And you see that I've come in here and I've actually enabled the transcoder. And the Wowza Transcoder can take in one high quality stream, and then be able to transcode to multiple different renditions to enable that Adaptive Bitrate delivery that can then deliver to JW Player for delivery at the client level. So if I jump into transcoder, by default when you install Wowza it doesn't come enabled. All you have to do is click on the enable transcoder and you can see here that the full back template, the default template for this particular transcoder channel, is set to trans rate. If I look at that template, I'm going to look at this and open this up, I have this enabled for several different renditions. So, here's the source rendition, which in this example is 1080p. I have a 720p, 360p, 240, 160 and so on, and I can really quickly enable that. 


So, I've already enabled that on the account. I've restarted this live application. If I come into my incoming streams, you can see I don't have anything coming in currently. So what I'm going to do is push this from Telestream Wirecast. So I have configured that. It's now live streaming. If I go ahead and push this live, you can see here's my live feed at the soccer game. I'm going to go ahead and turn off this lower third, add this icon and push that out. And now, this will be coming directly into the Wowza server. So, if I switch back over here, if I refresh this view, you can see here is my source stream that's coming in and here are all the different transcoded renditions that are going, they're being transcoded and being assembled. So, if I pull up one of these lower end renditions, I can actually view this directly in here. I can see it's at a lower resolution or lower bit rate. I can view this in my test players and just make sure that everything's working nicely. And here is our RTMP feed. I can look at this on Apple HLS or Dash, or any others. 


So, the question now is, how do I assemble all of these and let JW Player knows that all these different renditions are available? If I go into mobile here, here you can see there is an HLS URL that I could grab, but this is only the 360p rendition. So how do I grab all those and put those into a group, and then deliver that SMIL file to JW so JW player knows that all those renditions are available? Well, we have a way to do that. We have a support article on how to set up and run Wowza Transcoder for live streaming. In here we have something called name groups. Name groups is the ability to grab all these different renditions and assemble them in a nice, neat manner and deliver that with M3U8 or SMIL file to JW. And you can see, here is the syntax for Apple HLS. 


So I've got my IP address, port number, my live application name. Here is that name group, the NGRP, and the name of my stream. My stream, Underscore All. This Underscore All will actually grab all those different renditions that are available. So if I go back in and look at my transcoder, in here when I look at my trans rate template, here is where I can see my screen name groups that are set up for this particular profile. So in here you can see I've set up Underscore All. This is by default and it's grabbing all of the different renditions that are available inside of that transcoder profile. So, what I'm able to do now is grab all of those using this URL syntax and then do that. So, what I've done is I pulled up this code. I've just copy and pasted this into my editor. You can see here is that URL. And all I've done is actually added my IP address for my Wowza server.


So it's got all the same syntax, it's grabbing the name group. My stream, Underscore All. If your stream was named something else you could replace that in here. And then you'll notice what I've done here as well, I've appended the question mark DVR. And what that allows me to do is enable the DVR functionalities of the live pause, playback, rewind, that has integration with JW player to enable that for all of these different renditions as well. So, I'm going to grab this URL and I'm going to jump over to JW now. And this is my JW dashboard for my particular account. Maybe, Eric, you can walk me through a little bit how I go about actually adding this inside of my JW dashboard.


Eric: Sure. Yes, we've hopefully designed this to be a really simple and straightforward process. You actually can very quickly drag and drop files to upload to JW Player or if you're in this process where your stream is coming from someplace else like a live streaming service like Wowza, you can just grab the URL and paste it into this URL field, and click embed. Every account comes with three pre-build players and you can just chose which player that you want to embed with in this process or you could have created your own custom player like we've seen here. This is Wowza braded player, we've got Wowza logo, we've got Wowza coloring on this. And these are very easy to set up with the player's dashboard. You can go in and easily toggle each of these player settings. You can even change, like Ryan just showed, right here which of these players you want to embed with. But this is just really meant to be a straightforward, easy process of getting your content on your page live right away.


So in the embed window, quickly customize some features of the player. You can change playback options with point and click, autostart loop preload, so this way as the page loads, you're actually starting to download some of the media tab, a really fast time to first frame. The design is really interesting too, because you have these prebuilt skins which changes the layout and the shapes of the elements. And then each of these, you can just very quickly change primary highlighter background color to make any of these a really unique skin, just to fit your branding needs. And them the logo is really nice as well. You can add your logo to it. You can set a clickthrough URL of that logo. And now, recently fixed, we were able to actually position that logo over the CSS anywhere in that player viewport. 


Ryan: Yeah, what we've been able to do with this custom Wowza, this is actually the player that we use on our own website, and we've built in the casting as well. So we can actually Chrome cast. We have that implemented in the player. So, if the client's on a network has casting available, it will show up there as an option. And then we've also implemented our analytics tracking as well, so we can track analytics in the player. So, yeah, it's extremely easy to use, and this is the one we're going to use for this particular demo here as well. So, if I jump back here, I'll go back to the URL again. Here is that URL that we got from Wowza, and maybe, Eric, you can talk to me specifically about how what's happening here to actually enable this and what options are available to preview as well. 


Eric: Yes, so right now what you're seeing is a marrying of the content URL with those player settings, and there's two different types of embed mechanisms from this view. You can quickly grab single line of JavaScript and add that to your page exactly where you want the player to appear, and this JavaScript will add a div to the page and the player will render in that div. This is probably what you've done here?


Ryan: Yeah, exactly. I've been able to just grab that really easily. I've set it to be 100% inside of this particular div, so it's a nice, big player for this page. You can see the Chrome cast functionality and all that. So, copy and paste literally one line of code and it's up and running. Really easy to use. 


Eric: And then the other option is very similar to that. It's just an eye frame, instead of single line of JavaScript. But the same concept is fine, that you can just copy and paste that, and put it anywhere on your page.


Ryan: Yeah, and I really like the preview page option as well to get just a quick render of this to a page to see what this looks like and how it's working. Yeah, and in this particular example here you can see I have got 22 minutes of content available. So I can actually live rewind this to several minutes ago. You can see it pulls up. This is that DVR functionality that we enabled on the server and then included that URL or that appended that parameter in the URL as well. And what you'll notice is if I actually hover over this HD button, I have this up to 1080p by default, but if I switch this toward, it is going to do that adaptive bit rate functionality that Eric was just showing us earlier in the demo. And that kind of intelligence, we get this question a lot, is yeah, we need to enable the transcoder settings inside of Wowza, but the intelligence to switch between those is all JW Player. Right, Eric?


Eric: Yeah, that's right. The player is on the client site detecting what the actual available bandwidth is, and it makes the decision of which stream to use.


Ryan: Absolutely. And that's pretty much it. That was a pretty quick run through of how to do this. Another way that you can actually do this as well is if you actually grab your own code on JW player. If I actually come into the player itself, you can grab the JavaScript library and reference that yourself, and then use your own JavaScript to control a lot more of the player if you want to do some more advanced customization. And in fact, that's what we do on our own site. We reference the player in the cloud, the cloud player, so we have newest versions of the JavaScript that's available. And I think that it depends on the use case there, right Eric? Some people do want to host this locally instead of a network. Some people actually should probably use the cloud URLs so they can make sure they have the newest version of the code.


Eric: Yeah, it's about a 50/50 split. There's a lot of use cases around just being able to get those automatic updates right away. So as user agents are changing, JW Player is changing with them to make sure that it's always up to date with the latest browser changes. But in an effort to also give publishers and customers insight into what's actually coming up in the player for these cloud libraries, we've actually introduced this concept of release channels. So you can actually create a beta version of the player or staging version of the player by going to this advanced tab and you can chose the release channel. And each one of these channels has a version of the player on it. Production's obviously the most stable version. It's been there, it's been tested. It's been live for probably X number of weeks. 


The staging channel is usually a version of the player that's gone to an entire slew of our automated tests and our manual regression tests. So, that's a version of the player that's about to be promoted to production and it's one that you can use for integration tests. And then the beta one is really cool because this is what gives you insight into what's actually up and coming in our next version of the player. And this one's pretty neat right now, that it actually pointing at our next version that has HLS, the streaming functionality that we're talking about to be viewed in HTLM5 mode in Chrome. Switching right over to that gives you quick insight into what's coming up and allows you to test it out and try it out for yourself.


Ryan: Perfect. And we'll include these URLs as well. We have a great support article on how to use JW Player with Wowza with a video tutorial. I know we ran through it really quickly today, but this gives you some good code examples. This particular one is how to actually use Wowza Transcoder to do live streaming and to do Adaptive Bitrate, like I just showed with those name groups. And then we have another support article on how to do live stream DVR. So we actually walked through very quickly how to do that as well and enable that, and then pass that functionality on to JW. So, with that Eric, I think we did a quick overview of how to get HLS Adaptive Bitrate running with both Wowza and JW. So, thanks for joining us today.


Eric: Thanks for joining.