• How to use LongTail JW Player 4 with Wowza Media Server

    Note: This article is for an older Wowza® media server product or technology that either has been updated or is no longer supported. For the current version of this article, see How to use JW Player with Wowza Streaming Engine.
    This article describes how to stream pre-recorded video content from Wowza Media Server to JW Player 4.

    Note: JW Player 4 is legacy software. You can continue to access your legacy licensed versions of the JW Player, and player AddOns at http://www.longtailvideo.com/order/view. JW Player 4 is compiled with Adobe Flash CS4.

    Note: Wowza Media Server 2.0 or later is required.

    Related Articles



    For instructions about how to use later versions of JW Player, see the following articles:


    These JW Player versions are compiled with Apache Flex.

    For information about how to add SecureToken protection to JW Player 4, see How to add SecureToken protection to LongTail JW Player 4.

    Instructions



    1. Download and install Wowza Media Server.
    2. Create the folder [install-dir]/applications/vod to serve as the Wowza Media Server application folder. This folder may already exist if the examples are installed.
    3. Extract the JW Player 4 files from the zipped archive. Note that JW Player 4 is legacy software. If you have previously licensed JW Player 4 and need to download it, go to http://www.longtailvideo.com/order/view.
    4. In the root directory of the extracted zip archive, open the readme.html file in a text editor, and make the following changes to the script section (starting around line 24):
      Code:
      <script type="text/javascript">
          var s1 = new SWFObject("player.swf","ply","328","200","9","#FFFFFF");
          s1.addParam("allowfullscreen","true");
          s1.addParam("allowscriptaccess","always");
          s1.addParam("flashvars","fullscreen=true&bufferlength=2&streamer=rtmp://[wowza-ip-address]/vod&file=sample");
          s1.write("container");
      </script>
      Where:
      [wowza-ip-address] is the Wowza Media Server IP address.
      vod is the name of the Wowza Media Server application.
      sample is the name of the video file. Be sure to substitute the name of your video file in the code.
      bufferlength is the client-side buffer length (2 seconds).

      As an example, to play the H.264 example video [install-dir]/content/sample.mp4, the changes would look like this:
      Code:
      <script type="text/javascript">
          var s1 = new SWFObject("player.swf","ply","328","200","9","#FFFFFF");
          s1.addParam("allowfullscreen","true");
          s1.addParam("allowscriptaccess","always");
          s1.addParam("flashvars","fullscreen=true&bufferlength=2&streamer=rtmp://[wowza-ip-address]/vod&file=mp4:sample.mp4");
          s1.write("container");
      </script>
    5. Due to an Adobe Flash security restriction, you must host the following files on a web server:
      • readme.html
      • player.swf
      • swfobject.js
      • yt.swf

      The files must be hosted in the same folder. To play, open a web browser and enter the URL of the readme.html file.

      If you want to play the video locally without hosting the files on a web server, do the following to add the player.swf file to your list of trusted SWF files.
      1. Right-click on the Flash movie below the title single file, with preview image and select Settings from the popup menu.
      2. Click the Advanced button and it will open a browser window.
      3. Click Global Security Settings Panel.
      4. A new webpage will open with a Flash swf file in the upper-right corner.
      5. In this Flash movie, select Add location from the Edit locations menu.
      6. Select Browse for files, select the player.swf file that's in the same folder with the readme.html file, and then click Open.
      7. To play, close all open web browser windows and double-click readme.html.


    Note: To play H.264 or MP3 content that is in a folder inside of the [install-dir]/content folder, prepend mp4: and mp3: respectively to the folder name. For example, to play the media file:
    Code:
    [install-dir]/content/myvideos/sample.mp4
    The readme.html snippet would look like this:
    Code:
    <script type="text/javascript">
        var s1 = new SWFObject("player.swf","ply","328","200","9","#FFFFFF");
        s1.addParam("allowfullscreen","true");
        s1.addParam("allowscriptaccess","always");
        s1.addParam("flashvars","fullscreen=true&bufferlength=2&streamer=rtmp://[wowza-ip-address]/vod&file=mp4:myvideos/sample.mp4");
        s1.write("container");
    </script>

    Note: To play a live video, the readme.html snippet would look like this:
    Code:
    <script type="text/javascript">
        var s1 = new SWFObject("player.swf","ply","328","200","9","#FFFFFF");
        s1.addParam("allowfullscreen","true");
        s1.addParam("allowscriptaccess","always");
        s1.addParam("flashvars","fullscreen=true&bufferlength=2&streamer=rtmp://[wowza-ip-address]/live&file=myStream.flv");
        s1.write("container");
    </script>
    Where:
    [wowza-ip-address] is the Wowza Media Server IP address.
    live is the name of the Wowza Media Server application.
    myStream.flv is the stream name of the live stream (the .flv extension will be removed from the stream name)

    Note: To play a live feed from an MPEG-TS, native RTP, or SHOUTcast/Icecast source, it's best to use the StreamNameAlias AddOn. You can use the AddOn to create a simple alias for the complex URLs used for these types of streaming. For example, if you are re-streaming a SHOUTcast stream that uses the URL http://myradio.com/station1, you would create an alias map entry of:
    Code:
    station1=http://myradio.com/station1
    The JW Player code would look like:
    Code:
    <script type="text/javascript">
        var s1 = new SWFObject("player.swf","ply","328","200","9","#FFFFFF");
        s1.addParam("allowfullscreen","true");
        s1.addParam("allowscriptaccess","always");
        s1.addParam("flashvars","fullscreen=true&bufferlength=2&streamer=rtmp://[wowzar-ip-address]/shoutcast&file=station1.flv");
        s1.write("container");
    </script>

    Note: There is currently an issue with JW Player 4 and RTP/MPEG-TS player. When using JW Player 4 to playback one of these two methods of live streaming, the video will not be present. The problem is that JW Player currently requires that the width and height values be set properly in the onMetaData event. When streaming using RTP/MPEG-TS, Wowza Media Server can't access the stream's width and height information. We are working with the JW Player developer to see if there is a way to work around this issue. In the meantime, you can download the JW Player source code from http://developer.longtailvideo.com/trac/browser/tags (filename: mediaplayer-4.0.zip).

    Edit the file com/jeroenwijering/models/RTMPModel.as.

    Change the onMetaData handler to the code below. Change the 320 and 240 values to the frame size of your video and publish the new player:
    Code:
    public function onData(dat:Object) {
        if(dat.type == 'metadata' && !metadata) {
            metadata = true;
            if(dat.width) {
                video.width = dat.width;
                video.height = dat.height;
                model.mediaHandler(video);
            } else {
                video.width = 320;
                video.height = 240;
                model.mediaHandler(video);
            }
            if(model.playlist[model.config['item']]['start'] > 0) {
                seek(model.playlist[model.config['item']]['start']);
            }
        } else if(dat.type == 'complete') {
            fileindex = undefined;
            clearInterval(timeinterval);
            model.sendEvent(ModelEvent.STATE,{newstate:ModelStates.COMPLETED});
        }
        model.sendEvent(ModelEvent.META,dat);
    };