• How to use JW Player with Wowza Streaming Engine

    JW Player is a Flash and HTML5-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


    Video tutorial
    Configuring JW Player
    JW Player embed code examples

    Video tutorial





    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.