• How to use JW Player with Wowza Streaming Engine

    JW Player is a Flash-based player whose paid editions include a rich set of features such as playlists, skinning, closed-captioning, and ad-serving. This article describes how to use JW Player to stream from Wowza Streaming Engine™ media server software and includes embed code examples for supported protocols, including secure HTTP (HTTPS) and secure RTMP (RTMPS).

    Notes:
    • For use with JW Player 7 or JW Player 6 and Wowza Streaming Engine software.

    • JW Player is a Works with Wowza™ partner.

    Contents


    Configuring JW Player
    JW Player embed code examples

    Configuring JW Player


    1. 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. Download the self-hosted JW Player 7 or JW Player 6 to a web server.

    4. Extract the contents from the compressed (zipped) folder and copy the extracted jwplayer folder to the www root of your website.

    5. Add the jwplayer.js script to the <head> section of the HTML page that will include the player. The jwplayer script must include a valid license key, which you can find on the License & Downloads page of the JW Player dashboard.

      <script type="text/javascript" src="jwplayer.js" jwplayer.key="[jwplayer-key]"></script>
    6. When the script is set, insert the JW Player embed code in the <body> section of the webpage. The examples below show how to stream video from Wowza Streaming Engine software over supported protocols. They load the JW Player files from the jwplayer folder in the www root.

    JW Player embed code examples


    Simple RTMP example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JW Player</title>
        <script src="jwplayer.js"></script>
        <script>jwplayer.key = "[jwplayer-key]";</script>
    </head>
    <body>
    <div id="player"></div>
    
    <script>
        jwplayer("player").setup({
            sources: [{
                file: "rtmp://[wowza-ip-address]:1935/vod/sample.mp4"
            }],
            height: 360,
            width: 640
        });
    </script>
    
    </body>
    </html>

    Simple RTMP and Apple HLS streaming example

    This example also shows how to do RTSP fallback.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JW Player</title>
        <script src="jwplayer.js"></script>
        <script>jwplayer.key = "[jwplayer-key]";</script>
    </head>
    <body>
    <div id="player"><a href="rtsp://[wowza-ip-address]:1935/vod/mp4:sample.mp4">RTSP Link</a></div>
    <script>
    
        jwplayer("player").setup({
            sources: [{
                file: "http://[wowza-ip-address]:1935/vod/sample.mp4/playlist.m3u8"
            }, {
                file: "rtmp://[wowza-ip-address]:1935/vod/mp4:sample.mp4"
            }],
            rtmp: {
                bufferlength: 3
            },
            fallback: true
        });
    
    
    </script>
    </body>
    </html>

    RTMP dynamic streaming and Apple HLS adaptive bitrate streaming example

    Notes:
    • The playlist source http://[wowza-ip-address]:1935/vod/smil:sample.smil/jwplayer.smil in this example leverages server-side SMIL for JW Player's client-side dynamic streams playlist. For more information about this technique, see How to use JW Player with adaptive bitrate streaming from Wowza Streaming Engine.

    • The JWPlayer.onMeta() function is included in this example to show data that's relevant to adaptive bitrate (ABR) playback.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JW Player</title>
        <script src="jwplayer.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>jwplayer.key = "[jwplayer-key]";</script>
    </head>
    <body>
    <div id="player"></div>
    <pre id="abr"></pre>
    <script>
        jwplayer("player").setup({
            sources: [{
                file: "http://[wowza-ip-address]:1935/vod/smil:sample.smil/jwplayer.smil"
            }, {
                file: "http://[wowza-ip-address]:1935/vod/smil:sample.smil/playlist.m3u8"
            }]
        });
    
        jwplayer("player").onMeta(function (event) {
            if (event.metadata.bandwidth)
                addChartTick(event.metadata);
        });
    </script>
    <input type="button" value="clear charts" onclick="clearChartData()"><BR>
    <div style="width:900px;height:200px" id="bw_chart"></div>
    <div style="width:900px;height:120px" id="quality_chart"></div>
    </body>
    <script>
        var bwData;
        var bwOptions;
        var bwChart;
        var qualityData;
        var qualityOptions;
        var qualityChart;
    
        var counter=-1;
    
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(drawCharts);
    
        function drawCharts() {
    
            bwData = new google.visualization.DataTable();
            bwData.addColumn('string', 'interval');
            bwData.addColumn('number', 'bandwidth');
            bwData.addColumn({'type': 'string', 'role': 'style'});
            bwOptions = {
                title: 'Bandwidth',
                legend: {position:'left'},
                curveType: 'function',
                colors: ['#EF851C'],
                pointSize: 3,
                hAxis: { textPosition: 'none' }
            };
            bwChart = new google.visualization.LineChart(document.getElementById('bw_chart'));
            bwChart.draw(bwData, bwOptions);
    
            qualityData = new google.visualization.DataTable();
            qualityData.addColumn('string', 'interval');
            qualityData.addColumn('number', 'quality level');
            qualityData.addColumn({'type': 'string', 'role': 'style'});
            qualityOptions = {
                title: 'Quality Level',
                legend: {position:'left'},
                colors: ['#FF9900'],
                pointSize: 3,
                hAxis: { textPosition: 'none' },
                vAxis: {
                    ticks: [0,1,2,3,4]
                }
            };
            qualityChart = new google.visualization.LineChart(document.getElementById('quality_chart'));
            qualityChart.draw(qualityData, qualityOptions);
        }
    
        function clearChartData() {
            qualityData.removeRows(0,qualityData.getNumberOfRows());
            bwData.removeRows(0,bwData.getNumberOfRows())
            bwChart.draw(bwData, bwOptions);
            qualityChart.draw(qualityData, qualityOptions);
        }
    
        function addChartTick(metadata) {
    
            counter++;
            var count = (metadata.currentLevel)?1:40;
    
            if (counter % count != 0) {
                return;
            }
    
            var dt = new Date();
    
            var label = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
            var style = "point { size: 2; shape-type: circle; fill-color: #a52714}";
    
            if (metadata.transitioning=="true") {
                style = "point { size: 8; shape-type: triangle; fill-color: #00FF99}";
            }
    
            if (!isNaN(metadata.bandwidth))
                bwData.addRow([label,parseInt(metadata.bandwidth) * 1000,style]); //parseInt because sometimes bw is a Long or Double that messes up chart
    
            var level = null;
    
            if ("qualitylevel" in metadata) {
                level = metadata.qualitylevel;
            } else if ("currentLevel" in metadata) {
                level=metadata.currentLevel.split(" ")[0];
            }
    
            if (typeof level !="null")
                qualityData.addRow([label,parseInt(level),style]);
    
            bwChart.draw(bwData, bwOptions);
            qualityChart.draw(qualityData, qualityOptions);
    
        }
    </script>
    </html>
    The following example displays metadata for an RTMP stream. (For details, see the JW Player JavaScript API Reference.)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JW Player</title>
        <script src="../jwplayer.js"></script>
        <script>jwplayer.key = "[jwplayer-key]";</script>
    
    </head>
    <body>
    <div id="player"></div>
    <script>
        jwplayer("player").setup({
            sources: [{
                file: "rtmp://localhost/vod/mp4:sample.mp4"
            },]
        });
    
        jwplayer("player").onMeta(function (event) {
            document.getElementById("status").innerHTML="";
            for (var key in event) {
                var obj = event[key];
                for (var prop in obj) {
                    if (isNaN(prop)) {
                        console.log(prop);
                        document.getElementById("status").innerHTML += prop + " = " + obj[prop] + "<BR>"
    
                        if (prop == "trackinfo") {
                            document.getElementById("trackInfo").innerHTML="";
                            var trackInfo = obj[prop]
                            for (var trackProp in trackInfo) {
                                var info = trackInfo[trackProp];
                                for (var p2 in info) {
                                    document.getElementById("trackInfo").innerHTML += "TrackInfo: " + p2 + " = " + info[p2] + "<BR>"
                                }
    
                            }
                        }
                    }
    
                }
            }
        });
    </script>
    <table width="500" cellpadding="10"><tr><td width="40%" valign="top" id="status"></td><td id="trackInfo"></td></tr></table>
    
    </body>
    </html>

    RTMPS and HTTPS streaming example

    Notes:
    • We recommend the Wowza StreamLock™ AddOn, which provides a free 256-bit SSL certificate, for your Wowza media server stream encryption needs. StreamLock-provisioned SSL certificates provide the best security for RTMPS and HTTPS streaming. For more information, see How to get SSL certificates from the StreamLock service.

    • JW Player 6.11 (or later) is required to use RTMPS.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JW Player</title>
        <script src="jwplayer.js"></script>
        <script>jwplayer.key = "[jwplayer-key]";</script>
        <script>
            function setup() {
                var playerInstance = jwplayer("player");
                playerInstance.setup({
                    sources: [{
                        file: "https://[streamlock-host].streamlock.net:443/vod/sample.mp4/playlist.m3u8"
                    }, {
                        file: "rtmps://[streamlock-host].streamlock.net:443/vod/mp4:sample.mp4"
                    }],
                    rtmp: {
                        bufferlength: 3
                    },
                    proxyType: "best"
                });
    
            }
        </script>
    </head>
    <body onload="setup()">
    <div id="player"></div>
    <div id="player"><a href="rtsp://[wowza-ip-address]:1935/vod/mp4:sample.mp4">RTSP Link</a></div>
    </body>
    </html>

    SecureToken streaming example

    For instructions on how to secure the stream between JW Player and Wowza Streaming Engine, see How to add SecureToken protection to JW Player.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JW Player</title>
        <script src="jwplayer.js"></script>
        <script>jwplayer.key = "[jwplayer-key]";</script>
    
    </head>
    <body>
    <div id="player"></div>
    
    <script>
    
        var hashstring = btoa("vodsecure/sample.mp4?192.168.1.8&7025849742e66875");
    
        jwplayer("player").setup({
            sources: [{
                file: "rtmp://[wowza-ip-address]:1935/vodsecure/sample.mp4?wowzatokenhash=" + hashstring
            }],
            height: 360,
            width: 640
        });
    
    
    </script>
    
    </body>
    </html>

    Originally Published: 01-26-2013.
    Updated: For JW Player 7 on 02-03-2016.

    If you're having problems or want to discuss this article, post in our forum.
    If this article has an error or needs improvement, leave a comment below.

    Comments 39 Comments
    1. philpav -
      Thanks for the examples!
      Should the metadata example work as it is?
      I don't get any output. Does the sample.mp4 have any metadata included?
    1. rrlanham -
      It was missing a script tag. Sorry about that. Try it again

      Richard
    1. victorv -
      It works!!, Thanks!!!
    1. kurtkurt -
      Do you have experiences using JW Player 6 (Premium, I mean) and the nDVR Add-On?

      We experience that the length of the stream as displayed in the player is not growing continuously as the live stream does but rather in large bits (2 - 4 minutes). This way it is not possible to watch live-tv this way - the player stops when it reaches the "end".

      What we wanted to do is live-stream TV in our intranet and offer the possibilty to view what's been on tv in the last 4 hours as well as to watch live-tv.
    1. rrlanham -
      I don't have experience with this feature of JW Player 6 Premium.

      I know these players support nDVR:

      http://www.osmf.org/dev/2.0gm/setup.html

      http://www.wowza.com/forums/content....a-Media-Server

      Richard
    1. roger_l -
      Quote Originally Posted by kurtkurt View Post
      Do you have experiences using JW Player 6 (Premium, I mean) and the nDVR Add-On?
      Currently, JW Player 6 Does not fully support all of the features for nDVR playback.

      It does playback HLS nDVR content but only the same way that normal HLS content is supported. You can pause or view the live stream but you cannot rewind to an earlier point in time. When you resume from a pause, it will resume from the current live position.

      Longtail Video is working on better support for nDVR but at this stage, there is no word when this will be available. I suggest you watch for developments here and on the Longtail Video website.

      Regards,

      Roger.
    1. kleelof -
      Hello,

      I am working on an app to stream live video from IP cams. I have the following connect string:

      rtmp://{wowza}/myapp/def/?token=12345

      I have 2 questions based on the first example above:

      1. Do I still use the 'file:' variable so it would look like this:
      file: "rtmp://{wowza}/myapp/def/?token=12345"

      2. For the HTTP, can I use this to pass the extra variables to my app:
      file: "http://{wowza}/myapp/def/playlist.m3u8?token=12345

      take care,
      lee
    1. kleelof -
      Hello,

      I know you guys don't do JWPlayer support, but I am really stuck and need some help on this.

      I have the following script for RTMP and it is working fine:

      jwplayer("player").setup({
      type: 'rtmp',
      streamer: "rtmp://192.168.1.2:1937/flavaworks/def/?token=1",
      height: 540,
      width: 960,
      'autostart': 'true',
      'bufferlength': '3',
      'file': 'camera.stream'

      });

      How do I modify it to allow for HTTP streaming? 2 important points is that I need to be able to pass the variable 'token' and be able to dynamically set the 'file' name.

      lee
    1. rrlanham -
      Lee,

      We have JW Player 5 and 6 examples that show how to do HLS (cupertino) streaming.

      http://www.wowza.com/forums/content....a-Media-Server

      http://www.wowza.com/forums/content....a-Media-Server

      Richard
    1. kleelof -
      Hello,

      Thanks for your response.

      The examples do not address 1) passing variables and 2) how to specify the app instance and stream name for live streams.

      Could you just post what this would look like for passing variables and specifying the app instance?

      take care,
      lee
    1. rrlanham -
      Lee,

      You can pass variables in a querystring. If you want to parse in onConnect you add to the end of the application name or app instance if it is specified. If you want to parse in play command or IMediaStreamActionNotify3.onPlay() add querystring to the stream name.

      You just enter whatever application/instance you need to use.

      Richard
    1. kleelof -
      Hello,

      I don't really understand what all that means.

      Here is some script I put together. Can you look at it and tell me if it should work:

      jwplayer("player").setup({
      type: 'rtmp',
      streamer: "rtmp://18.10.18.10:1937/flavaworks/def/?token=1",
      height: 540,
      width: 960,
      'autostart': 'true',
      'bufferlength': '3',
      'file': 'camera.stream',
      'modes': [
      {
      type: 'flash', src: 'player.swf'},
      {
      type: 'html5',
      config: {
      'file': 'http://18.10.18.10:1937/flavaworks/def/camera.stream/playlist.m3u8?token=1',
      'provider': 'video'
      }
      }
      ]
      });

      The first part works fine for Flash, it is in the modes with the type 'html5' I am trying to sort out.

      take care,
      lee
    1. rrlanham -
      That configuration will playback HLS streams on iOS devices. If you are trying to stream to HLS streaming to the desktop, that is only supported in Safari on Mac OSX.

      Richard
    1. kleelof -
      Okie. Thanks for the help Richard.
    1. kleelof -
      Hello,

      Ok. I had a chance to test this now.

      I am using the following call to Wowza to stream HLS:

      http://192.168.1.2:1937/flavaworks/d...t.m3u8?token=1

      However, the query string is not being passed. In fact, the app 'flavaworks' is not even called.

      How can I pass variables for HLS streaming?

      lee
    1. Justchillin -
      I am new to Wowza. I have gotten the example flash rtmp stream going but I am looking at a way to automatically pass the variables to a player (like JW, but I am player agnostic). The two variables are Server: rtmp://172.16.96.103/live & Stream: udp://172.16.96.103:20000. Can anyone help me or point me to the documentation I need to read?
    1. salvadore -
      Hi there,

      you can add these url's to a .stream file.

      See this article for how to create a .stream file:
      How to publish and play a live stream (MPEG-TS based encoder)

      Salvadore
    1. qutess -
      Hi Richard,

      The sample video plays successfully on iOS, Windows 8 phone and Android, which I'm very happy about. However, I'm struggling to play Live Streaming sent from the NewTek TriCaster. Can you please see what I've gone wrong with the following code? Nothing is displayed on the browser.

      New application folder is TEST, and stream name is Stream1. The application.xml StreamType is 'live'.

      <script type="text/javascript">
      jwplayer('mediaplayer').setup({
      	width: 640,
      	height: 360,
      	type: 'rtmp',
      	streamer: 'rtmp://wowzaserver:1935/TEST',
      	file: 'Stream1',
          modes: [
      		{ type: 'flash',  src:'/jwplayer/jwplayer.flash.swf'}
              { type: 'html5', config:
      			{ 	file: "http://wowzaserver:1935/TEST/mp4:Stream1/playlist.m3u8",
      				provider: 'video'
      			}	
      		},
                  ]
      });
      </script>
      Thank you.

      Regards,
      qutess
    1. zoran_u -
      Hello,

      Can you try using this?
      <script type="text/javascript">
      jwplayer('mediaplayer').setup({
      	width: 640,
      	height: 360,
              sources: [{
                  file: "rtmp://wowzaserver:1935/TEST/Stream1"
              },{
                  file: "http://wowzaserver:1935/TEST/Stream1/playlist.m3u8"
              }]
      	   
      });
      </script>
      Regards,
      Zoran
    1. qutess -
      Thank you Zoran!

      That worked perfectly on iOS devices and all my desktop browsers (Windows and Mac). However, I can't play the live broadcast on Android devices, it gives an error "No playable sources found". One of the major requirement is to be able to play on all tablet devices. Can you please help me with this?

      Thanks.

      Regards,
      qutess