Embedding an RTMP stream using JW HTML Config is simply a matter of providing the full stream URL* as a source and setting the type attribute to stream/rtmp. We also have to include a div.jw-modes block inside the div.jw-settings indicating that we should try Flash mode first and where the JW Flash player is located:

<div class="jw-settings" id="my_simple_settings">
     <video id="my_simple_video" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
          <source src="rtmp://s2pchzxmtymn2k.cloudfront.net/cfx/st/mp4:sintel.mp4" type="stream/rtmp" />
     </video>
     <div class="jw-modes">
          <div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
          <div class="jw-mode" data-type="html5"></div>
     </div>
</div>

This simple configuration results in the following stream being rendered in JW Player:

Setting dynamic quality level switching is as simple as providing additional sources for each quality level available – by including the data-bitrate and/or data-width parameters for each source.

Because RTMP is dependent on Adobe Flash, it is also sensible to include fall-back sources in the case that the user doesn’t have Flash installed.

<div class="jw-settings" id="my_simple_settings">
     <video id="my_simple_video" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
          <source src="rtmp://s2pchzxmtymn2k.cloudfront.net/cfx/st/mp4:sintel-360.mp4" type="stream/rtmp" data-bitrate="555000" data-width="360"/>
          <source src="rtmp://s2pchzxmtymn2k.cloudfront.net/cfx/st/mp4:sintel-540.mp4" type="stream/rtmp" data-bitrate="777000" data-width="540"/>
          <source src="rtmp://s2pchzxmtymn2k.cloudfront.net/cfx/st/mp4:sintel-720.mp4" type="stream/rtmp" data-bitrate="999000" data-width="720"/>
          <!-- non-Flash fall-back sources -->
          <source src="/videos/mp4/big-buck-bunny.mp4" type="video/mp4"/>
          <source src="/videos/webm/big-buck-bunny.webm" type="video/webm"/>
     </video>
     <div class="jw-modes">
          <div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
          <div class="jw-mode" data-type="html5"></div>
     </div>
</div>

Extended options

In JW Player 5 there are some extra RTMP settings available which allow you to tweak the playback of streams. These can be configured using JW HTML Config by including a div.jw-extended block inside the div.jw-settings block with the data-type attribute set to rtmp.

The following settings can be added as data- attributes to this block in order to configure RTMP further:

  • data-subscribe – When streaming RTMP live streams using the Akamai, Edgecast or Limelight CDN, players cannot simply connect to the live stream. Setting this to true tells JW Player to send the necessary additional FC Subscribe setting to the server.
  • data-dvr – Flash Media Server 3.5 introduced live DVR streaming – the ability to pause and seek in a live stream. A DVR stream acts like a regular on-demand stream, the only difference being that the *duration* of the stream keeps increasing (that is, when the stream is still recording). Assuming you have the DVRCast application available you can set this option to true in order to switch the player into DVRCast mode, which will attempt to DVR subscribe to the stream and increases the duration of the stream if recording is still in progress
  • data-loadbalance – For high-volume publishers who maintain several RTMP servers, JW Player supports load-balancing by means of an intermediate XML file. This is used by e.g. the Highwinds and Streamzilla CDNs. Setting this to true in association with a correctly formatted XML file will enable load-balancing.
  • data-tunneling – Set this to false in order to switch off RTMPT tunneling.
  • data-streamer – If all RTMP stream configurations are coming from the same server / application then the application part of the Full Stream URL can be specified here. This in turn means you would only need to specify the stream identifier part of the stream in the defined sources.

Below is an example of how to use the RTMP extended block:

<div class="jw-settings" id="my_simple_settings">
     <video id="my_simple_video" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
          <source src="mp4:sintel-360.mp4" type="stream/rtmp" data-bitrate="555000" data-width="360" data-label="SD" />
          <source src="mp4:sintel-540.mp4" type="stream/rtmp" data-bitrate="777000" data-width="540" />
          <source src="mp4:sintel-720.mp4" type="stream/rtmp" data-bitrate="999000" data-width="720" data-label="HD" />
          <!-- non-Flash fall-back sources -->
          <source src="/videos/mp4/big-buck-bunny.mp4" type="video/mp4"/>
          <source src="/videos/webm/big-buck-bunny.webm" type="video/webm"/>
     </video>
     <div class="jw-modes">
          <div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
          <div class="jw-mode" data-type="html5"></div>
     </div>
     <!-- Extended RTMP Block -->
     <div class="jw-extended" data-type="rtmp" data-streamer="rtmp://s2pchzxmtymn2k.cloudfront.net/cfx/st/" data-subscribe="true" data-dvr="true" data-loadbalance="true" data-tunneling="false"></div>
</div>

*Full stream URL

Technically, an RTMP stream consists of two pieces:

  • The application path (e.g. rtmp://example.com/vod/).
  • The stream identifier (e.g. mp4:myFolder/video.mp4).

Whilst in JW5 theses are configured separately, in JW6 these two pieces are rolled up into a single URL.

JW HTML Config makes use of this new simple single configuration when defining sources in both JW5 and JW6 – except, as detailed above, in the case where the data-streamer attribute is specified as part of the extended configuration.