• How to play a Wowza Streaming Cloud live stream in JW Player

    The Wowza Streaming Cloud™ service lets you play live streams on your own website using a third-party player such as JW Player. JW Player is an HTML5 and Flash-based video player whose paid editions offer a rich set of features, including the capability to receive live Apple HLS streams. To play live streams from Wowza Streaming Cloud in JW Player 7, use your stream's Apple HLS playback URL with the cloud or self-hosted version of the player.

    Notes:
    • Sending live streams to JW Player 7 as described in this article requires a paid edition of the player.

    • You can't run JW Player alongside the Wowza Streaming Cloud player on the same webpage. You can use either the Wowza player or JW Player, not both.

    • JW Player doesn't support Adobe HDS streaming. If you want to send a live stream from Wowza Streaming Cloud to JW Player using Adobe HDS, download and use the Akamai Advanced JW Player Provider plug-in.

    Contents


    Identify your live stream's Apple HLS playback URL
    Configure the cloud-hosted JW Player to play your live stream
    Configure the self-hosted JW Player to play your live stream
    More resources

    Identify your live stream's Apple HLS playback URL


    Wowza Streaming Cloud generates two playback URLs for every live stream: an Apple HLS playback URL and an Adobe HDS playback URL. JW Player can use the Apple HLS playback URL of your Wowza Streaming Cloud live stream to play your stream in a desktop browser and on iOS devices.

    1. Sign in to Wowza Streaming Cloud, click the Live Streams menu, and select the stream you want to broadcast from the Live Streams panel on the left side of the page.

    2. On the Overview or Playback tab of the live stream detail page, note the Playback URLs.

      The Apple HLS playback URL uses the following syntax:

      http://[server address]/i/[stream name]/master.m3u8
    3. Make note of the Apple HLS playback URL or keep the Wowza Streaming Cloud live stream detail page open so that you can refer to it.

    Configure the cloud-hosted JW Player to play your live stream


    To use the cloud-hosted JW Player to play your Wowza Streaming Cloud live stream, add your Apple HLS playback URL to your JW Player content library. Then, point a player to the URL and embed the player into your own webpage.

    1. From a browser, sign in to your JW Player account and click the Content menu.

    2. On the left side of the Content page, click Add URLs.



      Note: If you don't see Add URLs, click the arrow next to the Add Uploads button, choose Add via URL, and then click Add URLs.
    3. In the Add Content via URL window, for Source URL, enter or paste the Wowza Streaming Cloud Apple HLS playback URL that you identified in the previous task.

    4. Click Add.

    5. Click Publish Mode | Build Your Embed Code at the top of the page.



    6. Do the following:

      • For Player, select the JW Player that you want to use.

      • For Content, select the master.m3u8 file that you added to the JW Player content library.

      • For Embed, select the JavaScript or iFrame tab, depending on the type of embed code you want to use, and then click Copy Embed Code.

    7. Paste the embed code into the <head> section of your HTML webpage.


    Configure the self-hosted JW Player to play your live stream

    To use the self-hosted JW Player to play your Wowza Streaming Cloud live stream, download it to your web server, point a webpage to it, and embed the player on the HTML page.

    1. From a browser on your web server, sign in to your JW Player account.

    2. On the Welcome page of the dashboard, look for the Self-Hosted Player box and click License Keys & Downloads.



    3. Click Download for JW Player 7 (Self-Hosted).

    4. Extract the contents from the downloaded jwplayer-[version.number].zip file and copy the jwplayer-[version.number] folder to your web server.

    5. On the HTML page that will include the player, add the jwplayer.js script to the <head> section and add a setup() block for the player to the <body> section.

      Notes:
      • Starting with JW Player 7, the jwplayer script must include a valid license key, which you can find on the License & Downloads page of the JW Player dashboard.

      • To allow JW Player to play the live stream in a desktop browser, use your live stream's Apple HLS playback URL for the file option in the setup() block.

      • JW Player setup() blocks use JSON syntax, as shown in the example below.
      The HTML webpage code might look something like this:

      <html>
      
      <head>
      <title>JW Player 7</title>
      <script type="text/javascript" src="/jwplayer/jwplayer.js" jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen=="></script>
      </head>
      
      <body>
      jwplayer("myLiveStream").setup({
          file: "http://[subdomain].akamaihd.net/i/b97e8a14_1@137522/master.m3u8",
          image: "/assets/myPosterImage.jpg",
          height: 360,
          width: 640
      });
      </body>
      
      </html>
      This example includes a couple of additional options: image is a JPEG poster image file located in an /assets folder, and height and width are the dimensions of the player.

    Important: The player dimensions should be the same aspect ratio as your source video, either 16:9 or 4:3.

    More resources




    Originally Published: 03-30-2015.
    Updated: 11-08-2016.

    If you're having problems or want to discuss this article, post in our forum.