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 totrue
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 totrue
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 progressdata-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 totrue
in association with a correctly formatted XML file will enable load-balancing.data-tunneling
– Set this tofalse
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.