Frank derFrankie Neulichedl

View Original

Adaptive RTMP Streaming on Cloudfront and JW Player

Frank Neulichedl

JW Players and Cloudfront is good, but not complete. I lost a couple of hours because of that and provide this short guide so you don't have too. The documentation is pretty good to setup everything to get one video file streaming - just follow the steps here http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/TutorialStreamingJWPlayer.html

The important information here is that you host your video assets and the video player on the s3 (cloudfront).

Now if you want to achieve adaptive streaming you have to create an SMIL file (as documented on JW Players website) - I will call it myVideo.smil

[prettify]

<smil>
  <head>
    <meta base="rtmp://example.com/vod/" />
  </head>
  <body>
    <switch>
      <video src="myVideo-high.mp4" height="720" system-bitrate="2000000" width="1280" />
      <video src="myVideo-medium.mp4" height="360" system-bitrate="800000" width="640" />
      <video src="myVideo-low.mp4" height="180" system-bitrate="300000" width="320" />
    </switch>
  </body>
</smil>
[/prettify]

Once you have created this file with the list of your videos upload it to the same s3 bucket where the jw player and the video files are and make it public.

You also have to change the player html setup to make it work (and here I lost most of my time). The trick is to ignore the RTMP references in the documetation regarding SMIL on JW Players Website. Here is the code:

[prettify]

 jwplayer('mediaplayer').setup({
      file: "http://DOWNLOAD-DISTRIBUTION-DOMAIN-NAME/myVideo.smil",
      width: "720",
      height: "480"
   });
[/prettify]

And boom - you have adaptive streaming.