Use JW Player with Wowza Streaming Engine

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


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 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 Streaming Engine encryption needs. StreamLock-provisioned SSL certificates provide the best security for RTMPS and HTTPS streaming. For more information, see Get SSL certificates from the Wowza Streaming Engine 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 Add SecureToken protection to JW Player with Wowza Streaming Engine.
 
<!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>