• How to use JW Player with Wowza Streaming Engine

    This article describes how to use JW Player to stream from Wowza Streaming Engine software. JW Player is a pre-built Flash-based player that includes a rich set of features such as playlists, skinning, closed-captioning, and ad-serving. For instructions about how to secure the stream between JW Player and Wowza Streaming Engine, see How to add SecureToken protection to JW Player.

    Notes:
    • For use with JW Player 6 and Wowza Streaming Engine™ 4.0 and later.

    • JW Player is a Works with Wowza™ partner.

    Video tutorial




    Specifying the VOD container format for JW Player

    For JW Player to stream video on demand (VOD) files from a Wowza server, you must specify the container format for the video asset. This is typically accomplished by adding a stream prefix to the VOD asset to create the stream name in playback URLs. The stream prefix specifies the container format for RTMP streaming. For example, in the following playback URL:
    Code:
    rtmp://[wowza-ip-address]:1935/vod/mp4:sample.mp4
    The mp4: stream name prefix specifies that the QuickTime container format is used for the sample.mp4 video.

    In Wowza Streaming Engine, you can specify a default container format so that the corresponding stream prefix isn't required in playback URLs. The Streaming Engine has two settings:

    • MP4 (QuickTime container). This is the default setting. Note that this article uses the sample.mp4 video file that's installed with the server software for demonstration purposes. With this setting, the mp4: stream prefix that's shown in the example playback URLs isn't required. It's just shown for clarity.

    • FLV (Flash Video container)

    Current versions of JW Player remove the flv: stream prefix from playback URLs before playing the video. If you re-purpose the examples in this article to stream FLV files, you must configure Wowza Streaming Engine to use the Flash Video container format by default. To change this setting, do the following:

    1. Start Wowza Streaming Engine Manager.

    2. Click the Server tab, and then click Server Setup in the contents pane.

    3. On the Server Setup page, click Edit.

    4. In the Default Stream Prefix box, type flv.


    5. Click Save, and then restart the server for the changes to take effect.

    JW Player configuration

    1. On your web server, sign in to your JW Player Account.

    2. Go to your account settings by clicking your user name in the upper-right corner of the JW Player webpage.

    3. On your Account Settings page, download the self-hosted 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. Follow the instructions in the extracted jwplayer/README.html file for setting up a webpage with an embedded JW Player. Your webpage must include the jwplayer.js script in the <head> tag:
      Code:
      <script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
    6. If you have purchased the JW Player Pro, Premium, or Ads edition, activate its features by inserting your server-less JW Player license key in the second line:
      Code:
      <script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
      <script type="text/javascript">jwplayer.key="[jwplayer-key]";</script>
      where [jwplayer-key] is the Self-Hosted Player License Key value. You can get this value from your Account Settings.

    7. When the script and key are set, scroll down to the <body> section of your webpage and insert the JW Player embed code for the examples described below at the place you want your video to appear. The examples show how to stream video from Wowza Streaming Engine software over supported streaming protocols. They load the JW Player files from the jwplayer folder in the www root.


    Simple RTMP


    Code:
    <html>
    <head>
    <title>JW Player 6</title>
    <body>
    
    <div id="player">Loading the player...</div>
    <script src="http://jwpsrv.com/library/mykey.js"></script>
    <script type="text/javascript">
        jwplayer("player").setup({
       	sources: [{
                file: "rtmp://[wowza-ip-address]:1935/live/myStream"
            },]
        });
    
        	jwplayer("player").onError ( function(event) {
    			setTimeout(function()
    			{
    				jwplayer("player").play(true);
    			},2000);
    		}
    	);
    
    </script>
    </body>
    </html>

    Simple RTMP and Apple HLS streaming

    Note: This example also shows how to do RTSP fallback.
    Code:
    <html>
    <head>
    <title>JW Player 6</title>
    
    <script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
    <script type="text/javascript">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 type="text/javascript">
    	jwplayer("player").setup({
    		sources: [{
    			file: "rtmp://[wowza-ip-address]:1935/vod/mp4:sample.mp4"
    		},{
    			file: "http://[wowza-ip-address]:1935/vod/sample.mp4/playlist.m3u8"
    		}],
    		rtmp: {
    			bufferlength: 3
    		},
    		fallback: false
    	});
    </script>
    </body>
    </html>

    RTMP dynamic streaming and Apple HLS adaptive bitrate streaming

    Notes:
    • The playlist source http://[wowza-ip-address]:1935/vod/smil:sample.smil/jwplayer.smil in the following 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.
    Code:
    <html>
    <head>
    <title>JW Player 6</title>
    
    <script type="text/javascript" src="/jwplayer/jwplayer.js" ></script>
    <script type="text/javascript">jwplayer.key="[jwplayer-key]";</script>
    </head>
    
    <body>
    
    <div id="player">Loading the player...</div>
    
    <pre id="abr"></pre>
     
    <script type="text/javascript">
    
    jwplayer("player").setup({
        playlist: [{
            sources: [
                { file: "http://[wowza-ip-address]:1935/vod/smil:sample.smil/jwplayer.smil", },
            ],
        }],
        sources: [{
                file: "http://[wowza-ip-address]:1935/vod/smil:sample.smil/playlist.m3u8"
            }]
    });
    
    jwplayer("player").onMeta(function(event){
            if(event.metadata.bandwidth) {
                var html = 'bandwidth: '+event.metadata.bandwidth;
                html += ', screenwidth: '+ event.metadata.screenwidth;
                html += ', qualitylevel: '+event.metadata.qualitylevel;
                html += ', transitioning: '+event.metadata.transitioning;
                html += ', bufferfill: '+event.metadata.bufferfill;
                document.getElementById('abr').innerHTML = html;
            }
        });
    </script>
    </body>
    </html>
    The following example displays metadata for an RTMP stream. (For details, see the JW Player JavaScript API Reference.)
    Code:
    <html>
    <head>
    <title>JW Player 6</title>
    
    <script type="text/javascript" src="/jwplayer/jwplayer.js" ></script>
    <script type="text/javascript">jwplayer.key="[jwplayer-key]";</script>
    </head>
    
    <body>
    
    <div id="player">Loading the player...</div>
    <script type="text/javascript" src="/jwplayer/jwplayer.js" ></script>
    <script type="text/javascript">
        jwplayer("player").setup({
       	sources: [{
                file: "rtmp://localhost/vod/mp4:sample.mp4"
            },]
        });
    
        jwplayer("player").onMeta( function(event){
    	    for (var key in event) {
    		   var obj = event[key];
    		   for (var prop in obj) {
    		      if (isNaN(prop))
    		      {
    			      document.getElementById("status").innerHTML += prop + " = " + obj[prop] + "<BR>"
    
    			      if (prop=="trackinfo")
    			      {
    			      	var trackInfo = obj[prop]
    			      	for (var trackProp in trackInfo)
    			      	{
    			      		var info = trackInfo[trackProp];
    			      		for (var p2 in info)
    			      		{
    			      			document.getElementById("status").innerHTML += "TrackInfo: " + p2 + " = " + p2[info] + "<BR>"
    			      		}
    
    			      	}
    			      }
    			  }
    
    		   }
    }
    });
    
    </script>
    <div id="status"></div>
    
    </body>
    </html>

    Updated: For Wowza Streaming Engine 4.0 on 03-28-2014

    Comments 35 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'.

      Code:
      <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?
      Code:
      <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