{"id":488,"date":"2013-04-22T14:39:55","date_gmt":"2013-04-22T13:39:55","guid":{"rendered":"http:\/\/powered-by-haiku.co.uk\/?page_id=488"},"modified":"2013-04-22T14:51:10","modified_gmt":"2013-04-22T13:51:10","slug":"defining-rtmp-sources-jw5","status":"publish","type":"page","link":"http:\/\/powered-by-haiku.co.uk\/?page_id=488","title":{"rendered":"Defining RTMP sources | JW5"},"content":{"rendered":"<p>\nEmbedding an RTMP stream using JW HTML Config is simply a matter of providing the <strong>full stream URL*<\/strong> as a source and setting the <code>type<\/code> attribute to <code>stream\/rtmp<\/code>. We also have to include a <code>div.jw-modes<\/code> block inside the <code>div.jw-settings<\/code> indicating that we should try Flash mode first and where the JW Flash player is located:\n<\/p>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;video id=\"my_simple_video\" poster=\"\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel.mp4\" type=\"stream\/rtmp\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/video&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-modes\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"flash\" data-src=\"\/jwplayer\/v5\/player.swf\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"html5\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p>This simple configuration results in the following stream being rendered in JW Player: <\/p>\n<div class=\"jw-settings\" id=\"my_simple_settings\">\n   <video id=\"my_simple_video\" poster=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/big-buck-bunny-preview.jpg\"><source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel.mp4\" type=\"stream\/rtmp\" \/><\/video><\/p>\n<div class=\"jw-modes\">\n<div class=\"jw-mode\" data-type=\"flash\" data-src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/jwplayer\/v5\/player.swf\"><\/div>\n<div class=\"jw-mode\" data-type=\"html5\"><\/div>\n<\/p><\/div>\n<\/div>\n<p>\nSetting dynamic quality level switching is as simple as providing additional sources for each quality level available &#8211; by including the <code>data-bitrate<\/code> and\/or <code>data-width<\/code> parameters for each source.<\/p>\n<p><strong>Because RTMP is dependent on Adobe Flash<\/strong>, it is also sensible to include fall-back sources in the case that the user doesn&#8217;t have Flash installed.<\/p>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;video id=\"my_simple_video\" poster=\"\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel-360.mp4\" type=\"stream\/rtmp\" data-bitrate=\"555000\" data-width=\"360\"\/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel-540.mp4\" type=\"stream\/rtmp\" data-bitrate=\"777000\" data-width=\"540\"\/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel-720.mp4\" type=\"stream\/rtmp\" data-bitrate=\"999000\" data-width=\"720\"\/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- non-Flash fall-back sources --&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\"\/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/webm\/big-buck-bunny.webm\" type=\"video\/webm\"\/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/video&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-modes\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"flash\" data-src=\"\/jwplayer\/v5\/player.swf\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"html5\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<div class=\"jw-settings\" id=\"my_simple_settings_2\">\n   <video id=\"my_simple_video_2\" poster=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/big-buck-bunny-preview.jpg\"><source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel.mp4\" type=\"stream\/rtmp\" data-bitrate=\"555000\" data-width=\"360\" \/><source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel.mp4\" type=\"stream\/rtmp\" data-bitrate=\"777000\" data-width=\"540\" \/><source src=\"rtmp:\/\/s2pchzxmtymn2k.cloudfront.net\/cfx\/st\/mp4:sintel.mp4\" type=\"stream\/rtmp\" data-bitrate=\"999000\" data-width=\"720\" \/><source src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\" \/><source src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/webm\/big-buck-bunny.webm\" type=\"video\/webm\" \/><\/video><\/p>\n<div class=\"jw-modes\">\n<div class=\"jw-mode\" data-type=\"flash\" data-src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/jwplayer\/v5\/player.swf\"><\/div>\n<div class=\"jw-mode\" data-type=\"html5\"><\/div>\n<\/p><\/div>\n<\/div>\n<p><\/p>\n<h3>Extended options<\/h3>\n<p>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 <code>div.jw-extended<\/code> block inside the <code>div.jw-settings<\/code> block with the <code>data-type<\/code> attribute set to <code>rtmp<\/code>.<\/p>\n<p>The following settings can be added as <code>data-<\/code> attributes to this block in order to configure RTMP further:<\/p>\n<ul>\n<li><code>data-subscribe<\/code> &#8211; When streaming RTMP live streams using the Akamai, Edgecast or Limelight CDN, players cannot simply connect to the live stream. Setting this to <code>true<\/code> tells JW Player to send the necessary additional <strong>FC Subscribe<\/strong> setting to the server.<\/li>\n<li><code>data-dvr<\/code> &#8211; Flash Media Server 3.5 introduced live DVR streaming &#8211; 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 <code>true<\/code> 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<\/li>\n<li><code>data-loadbalance<\/code> &#8211; 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 <code>true<\/code> in association with a correctly formatted XML file will enable load-balancing.<\/li>\n<li><code>data-tunneling<\/code> &#8211; Set this to <code>false<\/code> in order to switch off RTMPT tunneling.<\/li>\n<li><code>data-streamer<\/code> &#8211; If all RTMP stream configurations are coming from the same server \/ application then the application part of the <strong>Full Stream URL<\/strong> 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.<\/li>\n<\/ul>\n<p>Below is an example of how to use the RTMP extended block:<\/p>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;video id=\"my_simple_video\" poster=\"\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"mp4:sintel-360.mp4\" type=\"stream\/rtmp\" data-bitrate=\"555000\" data-width=\"360\" data-label=\"SD\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"mp4:sintel-540.mp4\" type=\"stream\/rtmp\" data-bitrate=\"777000\" data-width=\"540\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"mp4:sintel-720.mp4\" type=\"stream\/rtmp\" data-bitrate=\"999000\" data-width=\"720\" data-label=\"HD\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- non-Flash fall-back sources --&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\"\/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/webm\/big-buck-bunny.webm\" type=\"video\/webm\"\/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/video&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-modes\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"flash\" data-src=\"\/jwplayer\/v5\/player.swf\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"html5\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- Extended RTMP Block --&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;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\"&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<h3>*Full stream URL<\/h3>\n<p>Technically, an RTMP stream consists of two pieces:<\/p>\n<ul>\n<li>The application path (e.g. <em>rtmp:\/\/example.com\/vod\/<\/em>).<\/li>\n<li>The stream identifier (e.g. <em>mp4:myFolder\/video.mp4<\/em>).<\/li>\n<\/ul>\n<p>Whilst in JW5 theses are configured separately, in JW6 these two pieces are rolled up into a single URL.<\/p>\n<p>JW HTML Config makes use of this new simple single configuration when defining sources in both JW5 and JW6 &#8211; <em>except, as detailed above, in the case where the <code>data-streamer<\/code> attribute is specified as part of the extended configuration.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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:&hellip; <a href=\"http:\/\/powered-by-haiku.co.uk\/?page_id=488\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":175,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-488","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=488"}],"version-history":[{"count":15,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/488\/revisions"}],"predecessor-version":[{"id":539,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/488\/revisions\/539"}],"wp:attachment":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}