Changeset 2211


Ignore:
Timestamp:
05/25/12 06:00:47 (12 months ago)
Author:
jeroen
Message:

updated RTMP guide to use streamer

Location:
branches/jw6/doc
Files:
2 deleted
8 edited

Legend:

Unmodified
Added
Removed

  • branches/jw6/doc/embedding.html

    r2207 r2211  
    3131</li> 
    3232<li>Insert a &lt;div&gt; element with a unique <em>id</em> at the location you want the player to appear: 
    33 <pre>&lt;div id="container"&gt;Loading the player ...&lt;/div&gt;</pre> 
     33<pre>&lt;div id="myElement"&gt;Loading the player ...&lt;/div&gt;</pre> 
    3434</li> 
    3535<li>Insert a script that invokes the JW Player <em>setup()</em> call on your &lt;div&gt;:</li> 
    3636<pre>&lt;script type="text/javascript"&gt; 
    37     jwplayer("container").setup({ 
     37    jwplayer("myElement").setup({ 
    3838        file: "/uploads/example.mp4", 
    3939        height: 360, 
    … …  
    108108<p>In addition to above configuration options, a list of configuration blocks is available to enable the more advanced functionalities of JW Player. For example, the <em>sidebar</em> block can be used to display the playlist in a sidebar next to the video display:</p> 
    109109 
    110 <pre>&lt;script type="text/javascript"&gt; 
    111     jwplayer("container").setup({ 
    112         playlist: "http://example.com/playlist.rss", 
    113         height: 360, 
    114         sidebar: { 
    115             position: 'right', 
    116             size: 320 
    117         }, 
    118         width: 960 
    119     }); 
    120 &lt;/script&gt;</pre> 
     110<pre> 
     111jwplayer("myElement").setup({ 
     112    playlist: "http://example.com/playlist.rss", 
     113    height: 360, 
     114    sidebar: { 
     115        position: 'right', 
     116        size: 320 
     117    }, 
     118    width: 960 
     119}); 
     120</pre> 
    121121 
    122122<p>As you can see, the <em>sidebar</em> is an object that itself contains a set of configuration options. In this case, the sidebar is setup to the right of the display and set 320 pixels wide. See the <a href="playlists.html">Working with Playlists</a> guide for more info on setting up the sidebar.</p> 
    … …  
    127127<dl> 
    128128<dt>sidebar</dt> 
    129 <dd>Config block for displaying a sidebar with the <a href="playlists.html#sidebar">Playlist</a>.</dd> 
     129<dd>Config block for displaying a sidebar with the <a href="playlists.html#sidebar">Playlist contents</a>.</dd> 
    130130<dt>captions</dt> 
    131 <dd>Config block for displaying <a href="#">closed captions or subtitles</a>.</dd> 
     131<dd>Config block for displaying <a href="captions.html">captions or subtitles</a>.</dd> 
    132132<dt>logo</dt> 
    133 <dd>Config block for displaying an <a href="#">on-screen watermark</a> (<em>licensed players only</em>).</dd> 
     133<dd>Config block for displaying an <a href="logo.html">on-screen watermark</a>.</dd> 
     134<dt>rtmp</dt> 
     135<dd>Config block for tweaking the playback of <a href="rtmp.html">RTMP streams</a>.</dd> 
    134136<dt>gapro</dt> 
    135137<dd>Config block for pinging events to <a href="#">Google Analytics</a>.</dd> 
    … …  
    139141<dd>Config block for displaying an overlay with <a href="#">Social Sharing links</a>.</dd> 
    140142<dt>ova</dt> 
    141 <dd>Config block for loading ads using the <a href="#">VAST/VPaid standards</a>  (<em>licensed players only</em>).</dd> 
     143<dd>Config block for loading ads using the <a href="#">VAST/VPaid standards</a>.</dd> 
     144<dt>adtonomy</dt> 
     145<dd>Config block for loading ads using <a href="#">self-hosted assets</a>.</dd> 
    142146</dl> 
    143147 

  • branches/jw6/doc/feeds.html

    r2207 r2211  
    4949<p>Here's an example <strong>jwplayer().setup()</strong> block that configures a player to load an RSS feed:</p> 
    5050 
    51 <pre>&lt;script type="text/javascript"&gt; 
    52     jwplayer("container").setup({ 
    53         playlist: "http://example.com/playlist.rss" 
    54     }); 
    55 &lt;/script&gt;</pre> 
     51<pre> 
     52jwplayer("myElement").setup({ 
     53    height: 360, 
     54    playlist: "http://example.com/playlist.rss", 
     55    width: 640 
     56}); 
     57</pre> 
    5658 
    5759<p>And here's the contents of an example RSS feed. It defines 2 playlist items:</p> 
    … …  
    8587<h2>Mapping</h2> 
    8688 
    87 <p>The full set of item and source properties that can be set <a href="playlists.html">for inline playlists</a> is also supported for RSS feeds. Here's how all <strong>item</strong> properties map to Media RSS elements:</p> 
     89<p>The full set of item and source properties that can be set <a href="playlists.html">for inline playlists</a> is also supported for RSS feeds. Here's how all properties map to Media RSS elements:</p> 
    8890 
    8991<table><tr> 
    … …  
    9496    <td>description</td><td>description</td><td></td> 
    9597</tr><tr> 
    96     <td>mediaid</td><td>guid</td><td>Needs <em>isPermalink="false"</em> attribute</td> 
     98    <td>mediaid</td><td>guid</td><td>Possibly using <em>isPermalink="false"</em></td> 
    9799</tr><tr> 
    98100    <td>image</td><td>media:thumbnail@url</td><td></td> 
    99101</tr><tr> 
    100102    <td>duration</td><td>media:content@duration</td><td>Needs to be a number</td> 
     103</tr><tr> 
     104    <td>source.file</td><td>media:content@url</td><td></td> 
     105</tr><tr> 
     106    <td>source.type</td><td>media:content@type</td><td>Should be a mimetype (<em>video/mp4</em>)</td> 
     107</tr><tr> 
     108    <td>source.width</td><td>media:content@width</td><td></td> 
     109</tr><tr> 
     110    <td>source.height</td><td>media:content@height</td><td>Amended with a <strong>p</strong> in the quality selector</td> 
    101111</tr></table> 
    102112 
    103 <p>All <strong>source</strong> properties are actually mapped to attributes of the <em>media:content</em> RSS element:</p> 
     113<p>See <a href="media.html">Supported Media Formats</a> to find out which mimetypes should be used for which media formats.</p> 
    104114 
    105 <table><tr> 
    106     <th>JW Player</th><th>RSS Feed</th><th>Comments</th> 
    107 </tr><tr> 
    108     <td>file</td><td>media:content@url</td><td></td> 
    109 </tr><tr> 
    110     <td>type</td><td>media:content@type</td><td>Should be a mimetype (<em>video/mp4</em>)</td> 
    111 </tr><tr> 
    112     <td>width</td><td>media:content@width</td><td></td> 
    113 </tr><tr> 
    114     <td>height</td><td>media:content@height</td><td>Amended with a <strong>p</strong> in the quality selector</td> 
    115 </tr></table> 
     115 
     116<h2>Multiple Elements</h2> 
    116117 
    117118<p>Having multiple <em>media:content</em> elements per RSS item is allowed, so the multi-format and multi-quality options of JW Player can be achieved with RSS as well. Here's an example feed with one item that has an SD + HD quality video:</p> 

  • branches/jw6/doc/index.html

    r2207 r2211  
    2727 
    2828<h3>Support</h3> 
    29  
    3029<ul> 
    3130<li><a href="media.html">Media Format Support</a></li> 
    3231<li><a href="browsers.html">Browser &amp; Device Support</a></li> 
     32<li>MP4 Video Encoding</li> 
    3333</ul> 
    3434 
    3535<h3>Embedding</h3> 
    36  
    3736<ul> 
    3837<li><a href="embedding.html">Embedding the Player</a></li> 
    39 <li><a href="troubles.html">Troubleshooting your Setup</a></li> 
    40 <li><a href="pseudo.html">Pseudostreaming in Flash</a></li> 
     38<li>Troubleshooting your Setup</li> 
     39<li><a href="pseudo.html">Pseudo-streaming in Flash</a></li> 
    4140</ul> 
    4241 
    4342<h3>Playlists</h3> 
    44  
    4543<ul> 
    4644<li><a href="playlists.html">Working with Playlists</a></li> 
    … …  
    4947</ul> 
    5048 
     49<h3>Captions</h3> 
     50<ul> 
     51<li>Captioning Your Videos</li> 
     52<li>Making Video Accessible</li> 
     53</ul> 
     54 
     55<h3>Skinning</h3> 
     56<ul> 
     57<li>Using JW Player Skins</li> 
     58<li>Building JW Player Skins</li> 
     59</ul> 
     60 
     61<h3>JavaScripting</h3> 
     62<ul> 
     63<li>Using the JavaScript API</li> 
     64<li>JavaScript API Reference</li> 
     65</ul> 
     66 
    5167<h3>Streaming</h3> 
    52  
    5368<ul> 
    5469<li><a href="rtmp.html">Using RTMP Streaming</a></li> 
     70<li>Using HLS Streaming</li> 
     71</ul> 
     72 
     73<h3>Branding</h3> 
     74<ul> 
     75<li>Adding a Watermark</li> 
     76</ul> 
     77 
     78<h3>Discovery</h3> 
     79<ul> 
     80<li>Enabling Social Sharing</li> 
     81<li>Showing Related Videos</li> 
     82</ul> 
     83 
     84<h3>Analytics</h3> 
     85<ul> 
     86<li>Connecting to Google Analytics</li> 
     87</ul> 
     88 
     89<h3>Advertising</h3> 
     90<ul> 
     91<li>Running VAST/VPaid Ads</li> 
     92<li>Running Self Hosted Ads</li> 
    5593</ul> 
    5694 

  • branches/jw6/doc/media.html

    r2207 r2211  
    3232<p>JW Player tries to recognize a file format by its extension (e.g. <em>.mp4</em> for MP4 videos). If the extension of your files is not recognized, the player will display an error. However, if you know your file is in a supported format, you can use the <strong>type</strong> playlist option to force the player to recognize the file as being of that format. See <a href="playlists.html">Working with Playlists</a> for more info.</p> 
    3333 
     34<p>When using RSS feeds to load media, the <em>type</em> option must always be set to the <strong>mimetype</strong> of the format. These mimetypes are listed below. See <a href="feeds.html">Loading RSS Feeds</a> for more info.</p> 
     35 
    3436<h2>Video Files</h2> 
    3537 
    … …  
    4244</ul> 
    4345 
    44 <p>Here is an overview of the recognized file extensions for these formats, plus their browser playback support:</p> 
     46<p>Here is an overview of the recognized file extensions and mimetype for these formats, plus their browser playback support:</p> 
    4547 
    4648<table><tr> 
    … …  
    4951    <th>Extension(s)</th><td>.mp4, .m4v, .f4v</td><td>.flv</td><td>.webm</td> 
    5052</tr><tr> 
    51     <th></th><td></td><td></td><td></td> 
     53    <th>Mimetype</th><td>video/mp4</td><td>video/flv</td><td>video/webm</td> 
    5254</tr><tr> 
    5355    <th>Internet Explorer</th><td>html5, flash <sup>1</sup></td><td>flash</td><td>-</td> 
    … …  
    8284</ul> 
    8385 
    84 <p>Here is an overview of the recognized file extensions for these formats, plus their browser playback support:</p> 
     86<p>Here is an overview of the recognized file extensions and mimetypes for these formats, plus their browser playback support:</p> 
    8587 
    8688<table><tr> 
    … …  
    8991    <th>Extension(s)</th><td>.aac, .m4a, .f4a</td><td>.mp3</td><td>.ogg, .oga</td> 
    9092</tr><tr> 
    91     <th></th><td></td><td></td><td></td> 
     93    <th>Mimetype</th><td>audio/mp4</td><td>audio/mpeg</td><td>audio/ogg</td> 
    9294</tr><tr> 
    9395    <th>Internet Explorer</th><td>html5, flash <sup>1</sup></td><td>html5, flash <sup>1</sup></td><td>-</td> 
    … …  
    142144</ul> 
    143145 
    144 <p>Here is an overview of the recognized file extensions for these protocols, plus their browser playback support:</p> 
     146<p>Here is an overview of the recognized file extensions and mimetypes for these protocols, plus their browser playback support:</p> 
    145147 
    146148<table><tr> 
    … …  
    149151    <th>Extension(s)</th><td>.m3u8</td><td>.smil</td> 
    150152</tr><tr> 
    151     <th></th><td></td><td></td> 
     153    <th>Mimetype</th><td>application/vnd.apple.mpegurl</td><td>application/smil</td> 
    152154</tr><tr> 
    153155    <th>Internet Explorer</th><td>flash <sup>1</sup></td><td>flash</td> 

  • branches/jw6/doc/playlists.html

    r2207 r2211  
    3636 
    3737<pre> 
    38 &lt;script type="text/javascript"&gt; 
    39     jwplayer("container").setup({ 
    40         playlist: [{ 
    41             image: "/assets/sintel.jpg", 
    42             sources: [{ 
    43                 file: "/assets/sintel.mp4", 
    44             }], 
    45             title: "Sintel Movie Trailer" 
    46         } 
    47     }); 
    48 &lt;/script&gt; 
     38jwplayer("myElement").setup({ 
     39    playlist: [{ 
     40        image: "/assets/sintel.jpg", 
     41        sources: [ 
     42            { file: "/assets/sintel.mp4" } 
     43        ], 
     44        title: "Sintel Movie Trailer" 
     45    } 
     46}); 
    4947</pre> 
    5048 
    … …  
    6967</dl> 
    7068 
    71 <p>For certain advanced features, like <a href="#">Closed Captioning</a>, additional properties can be set per playlist item. The guides of these features will contain more info.</p> 
     69<p>For certain advanced features, like <a href="#">Closed Captioning</a> or <a href="rtmp.html">RTMP Streaming</a>, additional properties can be set per playlist item. The guides of these features will contain more info.</p> 
    7270 
    7371<h3>Source</h3> 
    … …  
    9795 
    9896<pre> 
    99 &lt;script type="text/javascript"&gt; 
    100     jwplayer("container").setup({ 
    101         playlist: [{ 
    102             image: "/assets/sintel.jpg", 
    103             sources: [{ 
    104                 file: "/assets/sintel.mp4", 
    105             },{ 
    106                 file: "/assets/sintel.webm" 
    107             }], 
    108             title: "Sintel Movie Trailer" 
    109         } 
    110     }); 
    111 &lt;/script&gt; 
     97jwplayer("myElement").setup({ 
     98    playlist: [{ 
     99        image: "/assets/sintel.jpg", 
     100        sources: [ 
     101            { file: "/assets/sintel.mp4" }, 
     102            { file: "/assets/sintel.webm" } 
     103        ], 
     104        title: "Sintel Movie Trailer" 
     105    } 
     106}); 
    112107</pre> 
    113108 
    … …  
    119114 
    120115<pre> 
    121 &lt;script type="text/javascript"&gt; 
    122     jwplayer("container").setup({ 
    123         playlist: [{ 
    124             image: "/assets/sintel.jpg", 
    125             sources: [{ 
    126                 file: "/assets/sintel.mp4", 
    127                 height: 360, 
    128                 width: 640 
    129             },{ 
    130                 file: "/assets/sintel-hd.mp4", 
    131                 height: 720, 
    132                 width: 1280 
    133             }], 
    134             title: "Sintel Movie Trailer" 
    135         } 
    136     }); 
    137 &lt;/script&gt; 
     116jwplayer("myElement").setup({ 
     117    playlist: [{ 
     118        image: "/assets/sintel.jpg", 
     119        sources: [ 
     120            { file: "/assets/sintel.mp4", height: 360, width: 640 }, 
     121            { file: "/assets/sintel-hd.mp4", height: 720, width: 1280 } 
     122        ], 
     123        title: "Sintel Movie Trailer" 
     124    } 
     125}); 
    138126</pre> 
    139127 
    … …  
    146134 
    147135<pre> 
    148 &lt;script type="text/javascript"&gt; 
    149     jwplayer("container").setup({ 
    150         playlist: [{ 
    151             image: "/assets/sintel.jpg", 
    152             sources: [{ 
    153                 file: "/assets/sintel.mp4" 
    154             }], 
    155             title: "Sintel Movie Trailer" 
    156         },{ 
    157             image: "/assets/bunny.jpg", 
    158             sources: [{ 
    159                 file: "/assets/bunny.mp4" 
    160             }], 
    161             title: "Big Buck Bunny Movie Trailer" 
    162         }] 
    163     }); 
    164 &lt;/script&gt; 
     136jwplayer("myElement").setup({ 
     137    playlist: [{ 
     138        image: "/assets/sintel.jpg", 
     139        sources: [ 
     140            { file: "/assets/sintel.mp4" } 
     141        ], 
     142        title: "Sintel Movie Trailer" 
     143    },{ 
     144        image: "/assets/bunny.jpg", 
     145        sources: [ 
     146            { file: "/assets/bunny.mp4" } 
     147        ], 
     148        title: "Big Buck Bunny Movie Trailer" 
     149    }] 
     150}); 
    165151</pre> 
    166152 
    … …  
    183169<p>Here is an example setup with a sidebar that's positioned to the right of the video with an extended layout:</p> 
    184170 
    185 <pre>&lt;script type="text/javascript"&gt; 
    186     jwplayer("container").setup({ 
    187         playlist: "http://example.com/playlist.rss", 
    188         height: 360, 
    189         sidebar: { 
    190             layout: 'extended', 
    191             position: 'right', 
    192             size: 320 
    193         }, 
    194         width: 960 
    195     }); 
    196 &lt;/script&gt;</pre> 
     171<pre> 
     172jwplayer("myElement").setup({ 
     173    playlist: "http://example.com/playlist.rss", 
     174    height: 360, 
     175    sidebar: { 
     176        layout: 'extended', 
     177        position: 'right', 
     178        size: 320 
     179    }, 
     180    width: 960 
     181}); 
     182</pre> 
    197183 
    198184 

  • branches/jw6/doc/pseudo.html

    r2207 r2211  
    6464 
    6565<pre> 
    66 &lt;script type="text/javascript"&gt; 
    67     jwplayer("container").setup({ 
    68         file: "/uploads/example.mp4", 
    69         height: 360, 
    70         image: "/uploads/example.jpg", 
    71         startparam: "starttime", 
    72         width: 640 
    73     }); 
    74 &lt;/script&gt; 
     66jwplayer("myElement").setup({ 
     67    file: "/uploads/example.mp4", 
     68    height: 360, 
     69    image: "/uploads/example.jpg", 
     70    startparam: "starttime", 
     71    width: 640 
     72}); 
    7573</pre> 
    7674 

  • branches/jw6/doc/rtmp.html

    r2207 r2211  
    3737</ul> 
    3838 
     39<h3>Disadvantages</h3> 
     40 
    3941<p>However, do note that RTMP has its disadvantages too. The most important ones are:</p> 
    4042 
    … …  
    4850 
    4951 
    50 <h2>Servers and CDNs</h2> 
     52<h2>Server Support</h2> 
    5153 
    5254<p>In order to use RTMP, your host or CDN needs to have a dedicated RTMP server installed. There are two major offerings, both supported by JW Player:</p> 
    … …  
    5456<ul> 
    5557<li>The <a href="http://www.adobe.com/products/flash-media-server-family.html">Flash Media Server</a> from Adobe is the de facto standard. Since Flash is also developed by Adobe, new RTMP functionalities always find their way in FMS first.</li> 
    56 <li>The <a href="http://www.wowza.com/">Wowza Media Server</a> from Wowza is a great alternative, because it includes support for other streaming protocols than RTMP (e.g. <a href="hls.html">Apple HLS</a>).</li> 
    57 </ul> 
    58  
    59 <p>The following CDNs (Content Delivery Networks) support RTMP and are tested to work great with JW Player:</p> 
     58<li>The <a href="http://www.wowza.com/">Wowza Media Server</a> from Wowza is a great alternative, because it includes support for a wide variety of streaming protocols.</li> 
     59</ul> 
     60 
     61<h3>CDNs</h3> 
     62 
     63<p>The following CDNs (Content Delivery Networks) support RTMP and are tested to work great with JW Player. They all support <strong>dynamic</strong> streaming and, with the exception of CloudFront, <strong>live</strong> streaming too:</p> 
    6064 
    6165<ul> 
    … …  
    6771</ul> 
    6872 
    69 <p>All these CDNs support <strong>dynamic</strong> streaming. With the exception of CloudFront, they all support <strong>live</strong> streaming too.</p> 
     73<h3>Live Streaming</h3> 
     74 
     75<p>A key feature of RTMP is the ability to do live streaming, e.g. of presentations, concerts or sports events. Next to JW Player and an RTMP server, one then also needs a small tool to ingest the live video into the server. There's a bunch of such tools available. <a href="http://www.adobe.com/products/flash-media-encoder.html">Flash Live Media Encoder</a> is free and available for Windows and Mac.</p> 
     76 
     77<p>With both FMS and Wowza, a live stream is embedded in exactly the same way as an on-demand stream. However, the Akamai, Edgecast and Limelight CDNs require a player to <em>subscribe</em> to a live stream. JW Player <a href="#fcsubscribe">supports this mechanism</a>.</p> 
     78 
     79<p>JW Player will embed and play a live stream like an on-demand file, with one exception: instead of displaying a slider to scrub through the timeline, the player will display the <em>title</em> of the event in the display.</p> 
    7080 
    7181 
    … …  
    7585<p>JW Player is architectured to support playback on any browser and device with a single setup. It does this by <a href="playlists.html">supporting multiple sources</a> for each piece of content. Each source has canonical URL, a single location from where to access it. For RTMP, JW Player uses <strong>SMIL manifests</strong> as this single access point.</p> 
    7686 
    77 <p>SMIL manifests are simple XML files that contain the location of the RTMP application, plus the path to the (one or more) streams stored on the RTMP server. Here is a basic example, using one MP4 stream:</p> 
     87<p>SMIL manifests are simple XML files that contain the location of the RTMP application, plus the path to the (one or more) streams stored on the RTMP server. Here is a basic example, using one AAC stream:</p> 
    7888 
    7989<pre> 
    … …  
    8393    &lt;/head&gt; 
    8494    &lt;body&gt; 
    85         &lt;video src="myVideo.mp4" /&gt; 
     95        &lt;video src="myPodcast.aac" /&gt; 
    8696    &lt;/body&gt; 
    8797&lt;/smil&gt; 
    … …  
    118128</ul> 
    119129 
    120 <p>The highest quality video that fits both the bandwidth and the screen width is displayed. Users are able to override this value by selecting a quality from a controlbar popup menu.</p> 
     130<p>The highest quality video that fits both the bandwidth and the screen width is displayed. Users are able to override this by selecting a quality from a controlbar popup menu. If the bandwidth and width are omitted, the player will default to the first video in the manifest.</p> 
    121131 
    122132 
    … …  
    124134<h2>Embedding a Stream</h2> 
    125135 
    126 <p>The manifest needs to be stored on a web server and then loaded into JW Player using <a href="embedding.html">jwplayer().setup()</a>. If, for example, your manifest is saved as <em>myVideo.smil</em>, you can load it into JW Player using this setup block:</p> 
    127  
    128 <pre> 
    129 &lt;script type="text/javascript"&gt; 
    130     jwplayer("container").setup({ 
    131         file: "/assets/myVideo.smil", 
    132         height: 360, 
    133         image: "/uploads/myVideo.jpg", 
    134         width: 640 
    135     }); 
    136 &lt;/script&gt; 
    137 </pre> 
    138  
    139 <p>This setup by itself does not leverage the multi-device options of JW Player, since only RTMP is provided. Therefore, let's extend this setup by including a separate MP4 video that can play on mobile devices:</p> 
    140  
    141 <pre> 
    142 &lt;script type="text/javascript"&gt; 
    143     jwplayer("container").setup({ 
    144         playlist: [{ 
    145             image: "/uploads/myVideo.jpg", 
    146             sources: [{ 
    147                 file: "/assets/myVideo.smil" 
    148             },{ 
    149                 file: "assets/myVideo-low.mp4" 
    150             }] 
    151         }], 
    152         height: 360, 
    153         primary: "flash", 
    154         width: 640 
    155     }); 
    156 &lt;/script&gt; 
     136<p>The manifest needs to be stored on a web server and then loaded into JW Player using <a href="embedding.html">jwplayer().setup()</a>. If, for example, your manifest is saved as <em>/assets/myVideo.smil</em> on your server, you can load it into JW Player using this setup block:</p> 
     137 
     138<pre> 
     139jwplayer("myElement").setup({ 
     140    file: "/assets/myVideo.smil", 
     141    height: 360, 
     142    image: "/assets/myVideo.jpg", 
     143    width: 640 
     144}); 
     145</pre> 
     146 
     147<h3>Advanced</h3> 
     148 
     149<p>Above setup does not leverage the multi-device options of JW Player, since only RTMP is provided. Therefore, let's extend this setup by including a separate MP4 video that can play on mobile devices:</p> 
     150 
     151<pre> 
     152jwplayer("myElement").setup({ 
     153    playlist: [{ 
     154        image: "/assets/myVideo.jpg", 
     155        sources: [ 
     156            { file: "/assets/myVideo.smil" }, 
     157            { file: "/assets/myVideo.mp4" } 
     158        ] 
     159    }], 
     160    height: 360, 
     161    primary: "flash", 
     162    width: 640 
     163}); 
    157164</pre> 
    158165 
    159166<p>This setup will play the RTMP stream on all browsers that have Flash installed (therefore, Flash is set to be the <strong>primary</strong> mode). On all devices that don't have Flash, the MP4 video is played in HTML5. See <a href="playlists.html">Working with Playlists</a> for more info on loading multiple sources per playlist item.</p> 
    160167 
    161 <h3>Feeds</h3> 
    162  
    163 <p>RTMP manifests can also be loaded as part of RSS feeds, following the same rules as with inline playlists. Here is a simple setup, with one item containing both an RTMP manifest and MP4 video:</p> 
    164  
    165 <pre> 
    166 &lt;rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" &gt;  
    167   &lt;channel&gt;  
    168     &lt;title&gt;Example RSS Playlist&lt;/title&gt;  
    169     &lt;item&gt;  
    170       &lt;title&gt;Sintel&lt;/title&gt; 
    171       &lt;description&gt;Sintel is a fantasy computer generated short movie. It's the third  
    172          release from the Blender Open Movie Project.&lt;/description&gt; 
    173       &lt;media:thumbnail url="http://example.com/thumbs/sintel.jpg" /&gt; 
    174       &lt;media:content url="http://example.com/videos/sintel.smil" type="application/smil" /&gt; 
    175       &lt;media:content url="http://example.com/videos/sintel-hd.mp4" type="video/mp4" /&gt;  
    176     &lt;/item&gt; 
    177   &lt;/channel&gt; 
    178 &lt;/rss&gt; 
    179 </pre> 
    180  
    181 <p>See <a href="feeds.html">Loading RSS Feeds</a> for more information on the syntax and features of RSS</p> 
    182  
    183  
    184 <h2>Live Streaming</h2> 
    185  
    186 <p>A key feature of RTMP is the ability to do live streaming, e.g. of presentations, concerts or sports events. Next to the player and an RTMP server, one then also needs a small tool to ingest (upload) the live video into the server. There's a bunch of such tools available, but the easiest to use is the (free) <a href="http://www.adobe.com/products/flash-media-encoder.html">Flash Live Media Encoder</a> (FMLE). It is available for Windows and Mac.</p> 
    187  
    188 <p>With most server setups, a live stream can be embedded using the same mechanism as an on-demand stream. The only difference is that a live stream has no file extension. Here's an example SMIL manifest, using two quality levels (which is easy to setup with FMLE):</p> 
    189  
    190 <pre> 
    191 &lt;smil&gt; 
    192   &lt;head&gt; 
    193     &lt;meta base="rtmp://example.com/live/" /&gt; 
    194   &lt;/head&gt; 
    195   &lt;body&gt; 
    196     &lt;switch&gt; 
    197       &lt;video src="myLivestream-high" height="360" system-bitrate="9000000" width="640" /&gt; 
    198       &lt;video src="myLivestream-low" height="180" system-bitrate="400000" width="320" /&gt; 
    199     &lt;/switch&gt; 
    200   &lt;/body&gt; 
    201 &lt;/smil&gt; 
    202 </pre> 
    203  
    204 <p>A live stream is loaded into the player just like a regular stream. Here's the setup code for a SMIL manifest that's called <em>myLivestream.smil</em>:</p> 
    205  
    206 <pre> 
    207 &lt;script type="text/javascript"&gt; 
    208     jwplayer("container").setup({ 
    209         file: "/assets/myLivestream.smil", 
    210         height: 360, 
     168 
     169 
     170<h2>The Streamer Option</h2> 
     171 
     172<p>SMIL manifests nicely abstract and group the properties of an RTMP stream, allowing JW Player to load multiple media formats and serve many browser and devices with one setup. However, SMIL manifests add complexity in that they need to be authored and hosted in addition to the streams.</p> 
     173 
     174<p>Therefore, it is also possible to load RTMP streams without a SMIL manifest in JW Player. This is done by adding the <strong>streamer</strong> property to every item in your playlist. It is set to the URL of your RTMP application. Here's an example:</p> 
     175 
     176<pre> 
     177jwplayer("myElement").setup({ 
     178    playlist: [{ 
     179        image: "/assets/myVideo.jpg", 
     180        sources: [ 
     181            { file: "myVideo.mp4", type: "rtmp" } 
     182        ], 
     183        streamer: "rtmp://example.com/ondemand/" 
     184    }], 
     185    height: 360, 
     186    width: 640 
     187}); 
     188</pre> 
     189 
     190<p>Note the <strong>type</strong> option, which tells JW Player this stream is not a basic MP4 download, but part of the RTMP stream. Without this option, the inline setup won't work.</p> 
     191 
     192<h3>Advanced</h3> 
     193 
     194<p>Here's a more advanced example, including a dynamic stream and a regular MP4 download for mobile playback:</p> 
     195 
     196<pre> 
     197jwplayer("myElement").setup({ 
     198    height: 360, 
     199    playlist: [{ 
    211200        image: "/assets/myLivestream.jpg", 
    212         title: "Live stream of my awesome event", 
    213         width: 640 
    214     }); 
    215 &lt;/script&gt; 
    216 </pre> 
    217  
    218 <p>The player will embed and play the live stream like any on-demand event, with one exception: instead of displaying a slider to scrub through the timeline, the player will display the <em>title</em> of the event in the display.</p> 
    219  
    220  
    221 <h3>FC Subscribing</h3> 
    222  
    223 <p>When streaming live streams using the Akamai, Edgecast or Limelight CDN, players cannot simply connect to the live stream. Instead, they have to subscribe to it, by sending a so-called <strong>FC Subscribe</strong> call to the server. JW Player includes support for this.</p> 
    224  
    225 <p>Setup is straightforward. No changes to SMIL manifests are required. Only one change to the setup block is needed, to tell JW Player it should subscribe to the streams:</p> 
    226  
    227 <pre> 
    228 &lt;script type="text/javascript"&gt; 
    229     jwplayer("container").setup({ 
    230         file: "/assets/myLivestream.smil", 
    231         height: 360, 
    232         image: "/assets/myLivestream.jpg", 
    233         rtmp: { 
    234             subscribe: true 
    235         }, 
    236         title: "Live stream of my awesome event", 
    237         width: 640 
    238     }); 
    239 &lt;/script&gt; 
    240 </pre> 
    241  
    242 <p>Note this functionality also works in combination with dynamic streaming. The player automatically detects the stream levels and subscribes to each.</p> 
    243  
    244  
    245  
    246 <h2>RTMP without Manifest</h2> 
    247  
    248 <p>SMIL manifests nicely abstract and group the properties of an RTMP stream, allowing JW Player to load multiple media formats and serve many browser and devices with one setup. However, SMIL manifests add complexity in that they need to be authored and hosted in addition to the streams.</p> 
    249  
    250 <p>For basic setups, it is possible to load RTMP streams without a SMIL manifest in JW Player. This is done by adding the RTMP <strong>application</strong> property to your setup block. Here's an example:</p> 
    251  
    252 <pre> 
    253 &lt;script type="text/javascript"&gt; 
    254     jwplayer("container").setup({ 
    255         file: "myVideo.mp4", 
    256         height: 360, 
    257         image: "/assets/myLivestream.jpg", 
    258         rtmp: { 
    259             application: "rtmp://example.com/ondemand/" 
    260         }, 
    261         type: "rtmp", 
    262         width: 640 
    263     }); 
    264 &lt;/script&gt; 
    265 </pre> 
    266  
    267 <p>Note the <strong>type</strong> option, which tells JW Player this stream is not a basic MP4 download, but an RTMP stream. Next, the <strong>rtmp.application</strong> option tells JW Player to expect a single stream ID instead of a SMIL manifest.</p> 
    268  
    269 <p>Here's another example, this time including a regular MP4 download for mobile playback:</p> 
    270  
    271 <pre> 
    272 &lt;script type="text/javascript"&gt; 
    273     jwplayer("container").setup({ 
    274         height: 360, 
    275         playlist: [{ 
    276             image: "/assets/myLivestream.jpg", 
    277             sources: [{ 
    278                 file: "myVideo.mp4", 
    279                 type: "rtmp" 
    280             },{ 
    281                 file: "http://example.com/assets/myVideo.mp4", 
    282                 type: "mp4" 
    283             }] 
    284         }], 
    285         rtmp: { 
    286             application: "rtmp://example.com/ondemand/" 
    287         }, 
    288         width: 640 
    289     }); 
    290 &lt;/script&gt; 
    291 </pre> 
    292  
    293 <p>Inline configurations like this work for all RTMP streaming formats (video, audio, live). They do only work for single streams though, not for dynamic streams.</p> 
     201        sources: [ 
     202            { file: "myVideo-high.mp4", type: "rtmp" }, 
     203            { file: "myVideo-medium.mp4", type: "rtmp" }, 
     204            { file: "myVideo-low.mp4", type: "rtmp" }, 
     205            { file: "http://example.com/assets/myVideo.mp4" } 
     206        ], 
     207        streamer: "rtmp://example.com/ondemand/" 
     208    }], 
     209    primary: "flash", 
     210    width: 640 
     211}); 
     212</pre> 
     213 
     214<p>Note it is not possible to load RTMP streams in feeds using the <strong>streamer</strong> option, since RSS has no mechanism to distinguish between streaming MP4 files and progressive MP4 files. SMIL manifests must be used in such setups.</p> 
     215 
     216 
     217<h2>Configuration Options</h2> 
     218 
     219<p>RTMP supports a few configuration options to tweak playback of the streams. They are set in a dedicated <em>rtmp</em> options block.</p> 
     220 
     221<h3><a name="bufferlength"></a>Buffer Length</h3> 
     222 
     223<p>By default, JW Player tries to maintain a buffer length of <em>3 seconds</em> for RTMP video. This means that 3 seconds of video is fetched from the server and ready to play at all times. This can be changed to another value using the RTMP <strong>bufferlength</strong> option:</p> 
     224 
     225<pre> 
     226jwplayer("myElement").setup({ 
     227    file: "/assets/myVideo.smil", 
     228    height: 360, 
     229    image: "/assets/myVideo.jpg", 
     230    rtmp: { 
     231        bufferlength: 0.1 
     232    }, 
     233    width: 640 
     234}); 
     235</pre> 
     236 
     237<p>Sane values range from <em>0.1</em> (for low latency live streams) to <em>10</em> (to prevent frequent re-buffering).</p> 
     238 
     239<h3><a name="fcsubscribe"></a>FC Subscribe</h3> 
     240 
     241<p>When streaming live streams using the Akamai, Edgecast or Limelight CDN, players cannot simply connect to the live stream. Instead, they have to subscribe to it, by sending a so-called <strong>FC Subscribe</strong> call to the server. JW Player includes support for this, using the RTMP <strong>subscribe</strong> option:</p> 
     242 
     243<pre> 
     244jwplayer("myElement").setup({ 
     245    file: "/assets/myLivestream.smil", 
     246    height: 360, 
     247    image: "/assets/myLivestream.jpg", 
     248    rtmp: { 
     249        subscribe: true 
     250    }, 
     251    width: 640 
     252}); 
     253</pre> 
     254 
     255<p>This functionality also works in combination with <strong>dynamic</strong> streaming. The player automatically detects the stream levels and subscribes to each.</p> 
     256 
     257<h3><a name="securetoken"></a>Secure Token</h3> 
     258 
     259<p>The Wowza Media Server includes a feature called <a href="http://www.wowza.com/forums/content.php?115">Secure Token</a> that is used to protect your streams from downloading. It works by having the player send a token to the server, which is verified before the stream is started. JW Player supports this mechanism, using the RTMP <strong>securetoken</strong> option:</p> 
     260 
     261<pre> 
     262jwplayer("myElement").setup({ 
     263    file: "/assets/myVideo.smil", 
     264    height: 360, 
     265    image: "/assets/myVideo.jpg", 
     266    rtmp: { 
     267        securetoken: "Kosif093n203a" 
     268    }, 
     269    width: 640 
     270}); 
     271</pre> 
     272 
     273<p>Since the token is part of your HTML, downloaders could extract it to grab your streams. Incremental security is achieved by compiling this token into the player. See our <a href="http://developer.longtailvideo.com">developer site</a> for more information (note: very techie!).</p> 
    294274 
    295275 

  • branches/jw6/doc/start.html

    r2207 r2211  
    4949</li> 
    5050<li>Insert a &lt;div&gt; element with a unique <em>id</em> at the location you want the player to appear: 
    51 <pre>&lt;div id="container"&gt;Loading the player ...&lt;/div&gt;</pre> 
     51<pre>&lt;div id="myElement"&gt;Loading the player ...&lt;/div&gt;</pre> 
    5252</li> 
    5353<li>Insert a script that invokes the JW Player <em>setup()</em> call on your &lt;div&gt;:</li> 
    5454<pre>&lt;script type="text/javascript"&gt; 
    55     jwplayer("container").setup({ 
     55    jwplayer("myElement").setup({ 
    5656        file: "/uploads/example.mp4", 
    5757        height: 270, 
Note: See TracChangeset for help on using the changeset viewer.