HOW TO: Use and configure JW Player together with MovieStreamer HLS

MovieStreamer HLS uses the HTTP Live Streaming protocol. This protocol is the only way to stream to iOS devices. It is also compatible with Android (in version 4.0), but some desktop browsers do not support it. In fact , on the Mac, only Safari 5.0 and later supports it. Read more here: http://www.longtailvideo.com/html5/hls/

 

JW Player 6 Premium extends the compatibility of your HLS streams so that they are compatible with most browsers and devices through Flash. It is very easy to implement as it is "just" a re-wrapping of the file. The only thing you need to do is install the Player on your Server and modify the html page to reference the player instead of the standard html5 video tag. You will be encoding only in HLS, your viewers won't need to install any additional software or plugin on their computers but they will be able to watch your HLS streams directly without conversion needed. The only downside is that it is not yet compatible with Android devices. You can read more info on the JW Player here.

For a detailed guide on how to install it, you should refer to the extensive information provided by Longtail video when you purchase the license from them, but here are a few tips on how this all works.

 

Choose the "Premium", "Enterprise" or "Ads" version of JW Player

As the free and Pro versions of JW Player are not compatible with HTTP Live Streaming, you must opt for the Premium or Ads version of JW Player. This means that you won't be able to test with the Free version of the player. You can however contact them and see if they can help you with that.

 

Install and configure JW Player

When you have purchased the license, you will receive an email with a link. You will be requested to create an account on their website. Once the account has been created, you will receive instructions on how to proceed next. 

Download and install files on your Server

Download the file using the link provided. This is a zip file. Unzip it and copy the files at the root level of your server (where your home page is). If you are using Amazon S3 storage, copy the files at the root level of your "bucket".

These are the 3 files that must be installed there:

  • jwplayer.flash.swf
  • jwplayer.html5.js
  • jwplayer.js

If you are streaming from your Mac, just copy those files into the folder that you have selected in your Web Sharing preferences. These files will need to be accessed by the player.

Modify the html page (sample page downloadable below)

MovieStreamer HLS automatically creates a template "index.html" page in the folder that you have selected when you start streaming (be aware that if it is already present it will not modify it). This is of course a template for our customers that do not know how to create an html page, but this can be configured and modified at will. This index.html page is using the standard video tag and thus needs to be modified to use the JW Player instead.

We have attached a new "index.html" page that you can use to replace the standard page created. However, you can not use it as it is, you will need to modify one thing: the Key.

JW Player works with unique Keys that you receive when you activate your account. To use it in the html page, just open the attached "index.html" document in a text editor such as TextWrangler and replace the text "Enter_The_Key_You_Received_Here" by your unique Key. If you do not remember your Key, you can easily log into your longtail video account and click on "Get Your Key".

 

Configure MovieStreamer HLS !

Now that all is setup, you will need to make sure that the audio is embedded with the video segments in MovieStreamer HLS. By default, and as recommended by the Apple presets, audio is separated from the video. So if you have multiple streams, the audio is there only once, and thus saving you some bandwidth. Unfortunately, this is not compatible with JW Player implementation, and the audio must be present in the video segments created.

To change that settings, click on the HTTP Live Streaming configuration button:

MovieStreamerHLS_HLSSettings.png

Then in the window that pops up, disable the option "Separate Audio":

MovieStreamer_HLS_SeparateAudio.png

This is very important because you won't hear any audio if you enable that option!

 

Stream!

That's it, you can now click on the Streaming button. When viewers try to view your videos with let's say Firefox or Chrome, they will fall back to the Flash version of the JW Player. All of this happens in real time with no conversion needed.

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk