Changeset 2188


Ignore:
Timestamp:
05/08/12 13:47:45 (13 months ago)
Author:
jeroen
Message:

added playlists and feeds guides

Location:
branches/jw6/doc
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • branches/jw6/doc/about.html

    r2187 r2188  
    7373    <td>-</td> 
    7474    <td>HLS <sup>2</sup></td> 
    75 </tr><tr> 
    76     <td>Opera</td> 
    77     <td>MP4, FLV, WebM</td> 
    78     <td>AAC, MP3, Vorbis</td> 
    79     <td>Yes</td> 
    80     <td>HLS, RTMP</td> 
    81 </tr><tr> 
    82     <td>Windows Phone</td> 
    83     <td>MP4</td> 
    84     <td>AAC, MP3</td> 
    85     <td>-</td> 
    86     <td>-</td> 
    8775</tr></table> 
    8876 
    … …  
    9078<ol> 
    9179<li>Limited support leveraging the player fallback option.</li> 
    92 <li>WebM, Vorbis, HLS supported as of Android 4.0</li> 
     80<li>WebM video, Vorbis audio and HLS streams are supported as of Android 4.0</li> 
    9381</ol> 
    9482 
    … …  
    10290 
    10391<ul> 
    104 <li>A slick and intuitive interface that looks and works the same <a href="formats.html">across browsers and devices</a>.</li> 
     92<li>A slick and intuitive interface that looks and works the same <a href="browsers.html">across desktop browsers and across mobile devices</a>.</li> 
    10593<li>An automated and elegant model for <a href="modes.html">selecting HTML5 or Flash</a> for rendering the media.</li> 
    10694<li>An extensive list of options for easily <a href="embedding.html">configuring layout and behavior</a> of the player.</li> 
    … …  
    10896</ul> 
    10997 
    110 <p>JW Player can be customized and extended beyond its existing feature set. A <a href="">Skinning Model</a> is available to completely match the player's look and feel to a website and a <a href="">Scripting API</a> is available to add new functionalities or build rich player-page interactions.</p> 
     98<p>JW Player can be customized and extended beyond its existing feature set. A <a href="">Skinning Model</a> is available to completely match the player's look and feel to a website and a <a href="">JavaScript API</a> is available to add new functionalities or build rich player-page interactions.</p> 
    11199 
    112100<h3>Advanced Features</h3> 
    … …  
    116104<ul> 
    117105<li>Live and adaptive streaming through the <a href="">Apple HLS</a> and <a href="">Adobe RTMP</a> protocols.</li> 
    118 <li>Display of <a href="">captions or subtitles</a> using MP4 or external SRT/DFXP files.</li> 
     106<li>Display of <a href="">captions or subtitles</a> using MP4 text tracks or external SRT/DFXP files.</li> 
    119107<li>In-stream advertising using the <a href="">Vast/VPaid standards</a> or <a href="">Google's IMA platform</a>.</li> 
    120108<li>Analytics callbacks to <a href="">Google Analytics</a> or any custom analytics backend.</li> 

  • branches/jw6/doc/browsers.html

    r2187 r2188  
    22<html> 
    33<head> 
    4 <title>Supported Browsers &amp; Devices</title> 
     4<title>Browser &amp; Device Support</title> 
    55<style> 
    66    body { padding: 50px 100px; width: 700px; font: 13px/20px Arial; background: #FFF; } 
    … …  
    2020</head><body> 
    2121 
    22 <h1>Supported Browsers &amp; Devices</h1> 
     22<h1>Browser &amp; Device Support</h1> 
    2323 
    2424<p>JW Player is designed to support its full feature set on all popular browsers and devices. This page enumerates which browsers and devices are supported, including any existing limitations and differences between desktop and mobile.</p> 
    … …  
    4646</tr><tr> 
    4747    <td>Safari 5.1 <sup>1</sup></td><td>yes</td><td>yes</td> 
    48 </tr><tr> 
    49     <td>Opera 11.6 <sup>1</sup></td><td>yes</td><td>yes</td> 
    5048</tr></table> 
    5149 
    … …  
    7472</tr><tr> 
    7573    <td>Android 4</td><td>yes</td><td>-</td> 
    76 </tr><tr> 
    77     <td>Windows Phone 7.5</td><td>yes</td><td>-</td> 
    7874</tr></table> 
    7975 

  • branches/jw6/doc/embedding.html

    r2187 r2188  
    5353 
    5454<dl> 
    55 <dt>file (undefined)</dt> 
    56 <dd>URL to a single audio/video file, HLS/RTMP manifest or YouTube video to play. See the <a href="support.html">Supported Media</a> guide for an overview. Use the <strong>playlist</strong> option for more advanced file setups.</dd> 
    57 <dt>image (undefined)</dt> 
     55<dt>file</dt> 
     56<dd>URL to a single MP4/FLV/WebM video, AAC/MP3/Vorbis audio, HLS/RTMP manifest or YouTube stream to play. See <a href="media.html">Supported Media Formats</a> for an overview. Use the <strong>playlist</strong> option for more advanced file setups.</dd> 
     57<dt>image</dt> 
    5858<dd>URL to a JPG/PNG poster image to display before playback is started (and during playback for audio). If not set, the image of the first item in the <strong>playlist</strong> is used.</dd> 
    59 <dt>playlist (undefined)</dt> 
    60 <dd>Array with links to multiple files to load. Enables all sophisticated media playback options, like multiple formats, multiple quality levels or multiple items. See <a href="playlists.html">Working with Playlists</a> for more info.</dd> 
     59<dt>playlist</dt> 
     60<dd>Array with playlist data or URL to RSS feed. Enables all sophisticated media playback options, like multiple formats, multiple quality levels or multiple items. See <a href="playlists.html">Working with Playlists</a> and <a href="feeds.html">Loading RSS Feeds</a> for more info.</dd> 
    6161</dl> 
    6262 
    … …  
    6969 
    7070<dl> 
    71 <dt>controls (true)</dt> 
    72 <dd>Whether to display the video controls at the bottom of the screen. Can be <strong>false</strong> or <strong>true</strong>.</dd> 
    73 <dt>height (360)</dt> 
    74 <dd>Height of the player in pixels. We recommend setting this to at least <strong>180</strong>, so all UI elements will fit. However, it can be set to a small size (e.g. <strong>40</strong>) for audio-only playback.</dd> 
    75 <dt>icons (true)</dt> 
    76 <dd>Whether to display the Play and Buffer icons in the center of the screen. Can be <strong>false</strong> or <strong>true</strong>.</dd> 
    77 <dt>skin (undefined)</dt> 
    78 <dd>Which skin to use for styling the player. Can be the identifier of a CDN hosted skin or the URL to a self-hosted skin. See the Player Skinning guide for more info.</dd> 
    79 <dt>stretching (uniform)</dt> 
    80 <dd>How to resize the poster and video to fit the display. Can be <strong>none</strong> (keep original dimensions), <strong>exactfit</strong> (stretch disproportionally), <strong>uniform</strong> (stretch proportionally;  black borders) or <strong>fill</strong> (stretch proportionally; parts cut off).</dd> 
    81 <dt>width (640)</dt> 
    82 <dd>Width of the player in pixels. We recommend setting this to at least <strong>320</strong>. On smaller players, certain UI elements may not fit.</dd> 
     71<dt>controlbar</dt> 
     72<dd>Whether to display the video controlbar at the bottom of the screen. Can be <strong>false</strong> or <strong>true</strong> (default).</dd> 
     73<dt>height</dt> 
     74<dd>Height of the player in pixels. We recommend setting this to at least <strong>180</strong>, so all UI elements will fit. However, it can be set to a small size (e.g. <strong>40</strong>) for audio-only playback. Defaults to <strong>360</strong>.</dd> 
     75<dt>icons</dt> 
     76<dd>Whether to display the Play and Buffer icons in the center of the screen. Can be <strong>false</strong> or <strong>true</strong> (default).</dd> 
     77<dt>skin</dt> 
     78<dd>Which skin to use for styling the player. Can be the identifier of a CDN hosted skin or the URL to a self-hosted skin. See <a href="#">Using JW Player Skins</a> for more info.</dd> 
     79<dt>stretching</dt> 
     80<dd>How to resize the poster and video to fit the display. Can be <strong>none</strong> (keep original dimensions), <strong>exactfit</strong> (stretch disproportionally), <strong>uniform</strong> (stretch proportionally;  black borders) or <strong>fill</strong> (stretch proportionally; parts cut off). Defaults to <strong>uniform</strong>.</dd> 
     81<dt>width</dt> 
     82<dd>Width of the player in pixels. We recommend setting this to at least <strong>320</strong>. On smaller players, certain UI elements may not fit.  Defaults to <strong>640</strong>.</dd> 
    8383</dl> 
    8484 
    … …  
    8989 
    9090<dl> 
    91 <dt>autostart (false)</dt> 
    92 <dd>Automatically start playing the video on page load. Can be <strong>true</strong> or <strong>false</strong>. Autostart does not work on mobile devices like iOS or Android.</dd> 
    93 <dt>fallback (true)</dt> 
    94 <dd>Whether to render a nice download link for the video if HTML5 and/or Flash are not supported. Can be <strong>true</strong> (a download link is rendered) or <strong>false</strong> (the original HTML is not touched).</dd> 
    95 <dt>mute (false)</dt> 
    96 <dd>Whether to have the sound muted on startup or not. Can be <strong>false</strong> (sound) or <strong>true</strong> (no sound).</dd> 
    97 <dt>primary (html5)</dt> 
    98 <dd>Which rendering mode to try first for rendering the player. Can be <strong>html5</strong> or <strong>flash</strong>.</dd> 
    99 <dt>repeat (list)</dt> 
    100 <dd>What to do when an item finished playback. Can be <strong>list</strong> (play the full playlist once), <strong>none</strong> (stop playback after every item), <strong>always</strong> (repeat the playlist forever) or <strong>single</strong> (repeat the active item forever).</dd> 
    101 <dt>shuffle (false)</dt> 
    102 <dd>Whether to play items from the playlist in random order (if there's more than 1). Can be <strong>true</strong> or <strong>false</strong></dd> 
     91<dt>autostart</dt> 
     92<dd>Automatically start playing the video on page load. Can be <strong>true</strong> or <strong>false</strong> (default). Autostart does not work on mobile devices like iOS or Android.</dd> 
     93<dt>debug</dt> 
     94<dd>Whether debugging mode is enabled. Can be <strong>false</strong> or <strong>true</strong>. When enabled, all player events are sent to "console.log". Use this to debug setup or playback issues.</dd> 
     95<dt>fallback</dt> 
     96<dd>Whether to render a nice download link for the video if HTML5 and/or Flash are not supported. Can be <strong>true</strong> (a fallback is rendered; the default) or <strong>false</strong> (the original HTML is not touched).</dd> 
     97<dt>mute</dt> 
     98<dd>Whether to have the sound muted on startup or not. Can be <strong>false</strong> (default) or <strong>true</strong>.</dd> 
     99<dt>primary</dt> 
     100<dd>Which rendering mode to try first for rendering the player. Can be <strong>html5</strong> (default) or <strong>flash</strong>.</dd> 
     101<dt>repeat</dt> 
     102<dd>What to do when an item finished playback. Can be <strong>list</strong> (play the full playlist once), <strong>none</strong> (stop playback after every item), <strong>always</strong> (repeat the playlist forever) or <strong>single</strong> (repeat the active item forever).  Defaults to <strong>list</strong>.</dd> 
    103103</dl> 
    104104 
    … …  
    123123 
    124124 
    125 <p>In addition to the <em>sidebar</em>, the following advanced option blocks are available:</p> 
     125<p>In all, the following advanced option blocks are available:</p> 
    126126 
    127127<dl> 
    128 <dt>rtmp</dt> 
    129 <dd>Config block for streaming video with the <a href="#">Adobe RTMP protocol</a>.</dd> 
     128<dt>sidebar</dt> 
     129<dd>Config block for displaying a sidebar with the <a href="playlists.html#sidebar">Playlist</a>.</dd> 
    130130<dt>captions</dt> 
    131131<dd>Config block for displaying <a href="#">closed captions or subtitles</a>.</dd> 

  • branches/jw6/doc/index.html

    r2183 r2188  
    2121 
    2222 
    23 <h3>Introduction</h3> 
    24  
    2523<ul> 
    2624<li><a href="about.html">About JW Player</a></li> 
    … …  
    3129 
    3230<ul> 
    33 <li><a href="media.html">Supported Media Formats</a></li> 
    34 <li><a href="browsers.html">Supported Browsers &amp; Devices</a></li> 
     31<li><a href="media.html">Media Format Support</a></li> 
     32<li><a href="browsers.html">Browser &amp; Device Support</a></li> 
    3533</ul> 
    3634 
    … …  
    3937<ul> 
    4038<li><a href="embedding.html">Embedding the Player</a></li> 
     39<li><a href="troubleshooting.html">Troubleshooting</a></li> 
     40</ul> 
     41 
     42<h3>Playlists</h3> 
     43 
     44<ul> 
    4145<li><a href="playlists.html">Working with Playlists</a></li> 
     46<li><a href="feeds.html">Loading RSS Feeds</a></li> 
    4247</ul> 
    4348 

  • branches/jw6/doc/media.html

    r2187 r2188  
    22<html> 
    33<head> 
    4 <title>Supported Media Formats</title> 
     4<title>Media Format Support</title> 
    55<style> 
    66    body { padding: 50px 100px; width: 700px; font: 13px/20px Arial; background: #FFF; } 
    … …  
    2020</head><body> 
    2121 
    22 <h1>Supported Media Formats</h1> 
     22<h1>Media Format Support</h1> 
    2323 
    2424<p>This guide lists all media formats JW Player officially supports.</p> 
    … …  
    3737 
    3838<ul> 
    39 <li><a href="http://en.wikipedia.org/wiki/MP4">MP4</a> videos using the <a href="http://en.wikipedia.org/wiki/H.264">H.264</a> video codec and the <a href="http://en.wikipedia.org/wiki/Advanced_Audio_Coding">AAC</a> audio codec. MP4 is of high quality and is can be played in all browsers and devices. It is today's video format of choice.</li> 
     39<li><a href="http://en.wikipedia.org/wiki/MP4">MP4</a> videos using the <a href="http://en.wikipedia.org/wiki/H.264">H.264</a> video codec and the <a href="http://en.wikipedia.org/wiki/Advanced_Audio_Coding">AAC</a> audio codec. MP4 is of high quality and can be played in all browsers and devices. It is today's video format of choice.</li> 
    4040<li><a href="http://en.wikipedia.org/wiki/FLV">FLV</a> videos using the <a href="http://en.wikipedia.org/wiki/H.263">H.263</a> video codec and the <a href="http://en.wikipedia.org/wiki/MP3">MP3</a> audio codec. FLV is of lower quality than MP4 and only supported in browsers that run Flash. Many existing video libraries are encoded in FLV.</li> 
    4141<li><a href="http://en.wikipedia.org/wiki/WebM">WebM</a> videos using the <a href="http://en.wikipedia.org/wiki/VP8">VP8</a> video codec and the <a href="http://en.wikipedia.org/wiki/Vorbis">Vorbis</a> audio codec. WebM is royalty free and of comparable quality to MP4. It has limited browser and device support.</li> 
    … …  
    6161    <th>iOS</th><td>html5</td><td>-</td><td>-</td> 
    6262</tr><tr> 
    63     <th>Android</th><td>html5, flash <sup>2</sup></td><td>flash <sup>2</sup></td><td>html5 <sup>3</sup></td> 
    64 </tr><tr> 
    65     <th>Opera</th><td>flash</td><td>flash</td><td>html5</td> 
     63    <th>Android</th><td>html5</td><td>-</td><td>html5 <sup>2</sup></td> 
    6664</tr></table> 
    6765 
    6866<ol> 
    6967    <li>HTML5 playback as of Internet Explorer 9.</li> 
    70     <li>Not all Android devices have Flash installed.</li> 
    7168    <li>WebM support as of Android 4.</li> 
    7269</ol> 
    7370 
    74 <p>Note the H.264 video codec supports different <em>profiles</em>; different levels of encoding sophistication. The <strong>Baseline</strong> profile is supported by all devices (older Androids and iPhone 2G/3G), while the <strong>Main</strong> profile is only supported by recent devices. The <strong>High</strong> profile has even less support and only adds efficiency for 1080p quality or higher.</p> 
     71<p>See <a href="encoding.html">Encoding Web Videos</a> for hints and tools on converting your video library to MP4.</p> 
    7572 
    7673 
    … …  
    8077 
    8178<ul> 
    82 <li><a href="http://en.wikipedia.org/wiki/Advanced_Audio_Coding">AAC</a> audio files, either as raw data or inside an MP4 container. AAC is of high quality and supported by all browsers and devices.</li> 
    83 <li><a href="http://en.wikipedia.org/wiki/MP3">MP3</a> audio files, as raw data. Though not as good in quality as AAC, MP3 is very widely used. Many existing audio libraries are encoded in MP3.</li> 
    84 <li><a href="http://en.wikipedia.org/wiki/Vorbis">Vorbis</a> audio files inside an Ogg container. Vorbis is royalty-free, but has limited browser and device support.</li> 
     79<li><a href="http://en.wikipedia.org/wiki/Advanced_Audio_Coding">AAC</a> audio files. AAC is of high quality and supported by all browsers and devices.</li> 
     80<li><a href="http://en.wikipedia.org/wiki/MP3">MP3</a> audio files. Though not as good in quality as AAC, MP3 is very widely used. Many existing audio libraries are encoded in MP3.</li> 
     81<li>Ogg <a href="http://en.wikipedia.org/wiki/Vorbis">Vorbis</a> audio files. Vorbis is royalty-free, but has limited browser and device support.</li> 
    8582</ul> 
    8683 
    … …  
    104101    <th>iOS</th><td>html5</td><td>html5</td><td>-</td> 
    105102</tr><tr> 
    106     <th>Android</th><td>html5, flash <sup>2</sup></td><td>html5, flash <sup>2</sup></td><td>html5 <sup>3</sup></td> 
    107 </tr><tr> 
    108     <th>Opera</th><td>flash</td><td>flash</td><td>html5</td> 
     103    <th>Android</th><td>html5</td><td>html5</td><td>html5 <sup>2</sup></td> 
    109104</tr></table> 
    110105 
    111106<ol> 
    112107    <li>HTML5 playback as of Internet Explorer 9.</li> 
    113     <li>Not all Android devices have Flash installed.</li> 
    114108    <li>Ogg Vorbis support as of Android 4.</li> 
    115109</ol> 
    … …  
    144138    <th>iOS</th><td>html5</td><td>-</td> 
    145139</tr><tr> 
    146     <th>Android</th><td>html5 <sup>2</sup></td><td>flash <sup>3</sup></td> 
    147 </tr><tr> 
    148     <th>Opera</th><td>flash <sup>1</sup></td><td>flash</td> 
     140    <th>Android</th><td>html5 <sup>2</sup></td><td>-</td> 
    149141</tr></table> 
    150142 
    … …  
    152144    <li>HLS playback requires Flash Player 10.1, which <a href="http://riastats.com/">is not yet ubiquitous</a>.</li> 
    153145    <li>HLS support as of Android 4.</li> 
    154     <li>Not all Android devices have Flash installed.</li> 
    155146</ol> 
    156147 
    … …  
    168159</ul> 
    169160 
    170 <p>The YouTube API requires the Flash plugin at present. Therefore, it is supported only on desktop browsers and Android devices running Flash. On iOS, limited playback support is available as part of the <a href="browsers.html">Download Fallback</a>. YouTube's experimental <a href="https://developers.google.com/youtube/iframe_api_reference">iFrame API</a> will likely introduce full iOS support in the future.</p> 
     161<p>The YouTube API requires the Flash plugin at present. Therefore, it is supported only on desktop browsers and Android devices running Flash. On iOS, limited playback support is available as part of the <a href="browsers.html">Download Fallback</a>. YouTube's experimental <a href="https://developers.google.com/youtube/iframe_api_reference">iFrame API</a> will likely introduce full HTML5 support in the future.</p> 
    171162 
    172163<p>Some additional notes on YouTube support:</p> 
    … …  
    175166<li>YouTube may place ads over the video during playback. These ads can not be disabled. Neither can the YouTube logo in the bottom right corner be removed.</li> 
    176167<li>If the owner of a YouTube video has disabled it for embedding on 3rd party sites, JW Player cannot play the video. An error message is then displayed.</li> 
    177 <li>YouTube videos are always available in multiple qualities, which means the JW Player's quality selector is automatically displayed in the controlbar.</li> 
     168<li>YouTube videos are mostly available in multiple qualities, which means the JW Player's quality selector is automatically displayed in the controlbar.</li> 
    178169</ul> 
    179170 

  • branches/jw6/doc/playlists.html

    r2187 r2188  
    1010    h3 { margin-top: 25px; } 
    1111    img { display: block; box-shadow: 0 0 5px #999; margin: 0 10px; } 
    12     pre { font-size: 12px; background: #E5F3C8; padding:5px 10px; border: 1px solid #D3EAA4; } 
     12    pre { font-size: 12px; background: #E5F3C8; padding:5px 10px; border: 1px solid #D3EAA4; line-height: 15px;} 
     13    dt { margin-left: 20px; font-weight: bold; }  
    1314    dd { color: #333; font-style: italic; } 
    1415    table { width: 100%; border-collapse: collapse; margin: 20px 0; } 
    … …  
    2223<h1>Working with Playlists</h1> 
    2324 
     25<p>The <strong>playlist</strong> is a powerful concept in JW Player that can be used to load multiple pieces of content into a single player. It can also be used to load multiple media formats and/or multiple quality levels for each piece of content. The playlist can be displayed as a sidebar to the video window.</p> 
    2426 
    25 <h2>The Playlist Syntax</h2> 
     27<p>The playlist is defined as part of the <em>jwplayer().setup()</em> call. See <a href="embedding.html">Embedding JW Player</a> for more info on embedding the player. Instead of an inline, the playlist can also be defined in an external RSS feed. See <a href="feeds.html">Loading RSS Feeds</a> for more info.</p> 
    2628 
    2729 
    28 <h2>Playlist Use Cases</h2> 
    2930 
    30 <h3>Multiple Items</h3> 
     31<h2>Playlist Structure</h2> 
     32 
     33<p>The playlist consists of two layers: <strong>item</strong> and <strong>source</strong>. An item contains all data for a distinct piece of content (e.g. its <em>title</em>) and a source contains all data for a distinct media resource (e.g. its <em>file</em>). The playlist contains one or more items, and each item contains one or more sources.</p> 
     34 
     35<h3>Item</h3> 
     36 
     37<p>The following item properties are recognized and used by JW Player:</p> 
     38 
     39<dl> 
     40<dt>title</dt> 
     41<dd>Title of the item. It is displayed inside the <em>play</em> icon before playback starts, plus in the <a href="#sidebar">sidebar</a>.</dd> 
     42<dt>description</dt> 
     43<dd>Short description of the item. It is displayed in the <a href="#sidebar">sidebar</a>.</dd> 
     44<dt>mediaid</dt> 
     45<dd>Unique identifier of this item. Used by advertising, analytics and discovery services.</dd> 
     46<dt>image</dt> 
     47<dd>Poster image representing the item. Displayed below the <em>play</em> icon before playback starts, plus in the <a href="#sidebar">sidebar</a>.</dd> 
     48<dt>duration</dt> 
     49<dd>Duration of the item in seconds. It is displayed in the <a href="#sidebar">sidebar</a>. It cannot be used to restrict the duration of the item.</dd> 
     50<dt>sources</dt> 
     51<dd>Array with one or more media sources for this item. Is required. See below.</dd> 
     52</dl> 
     53 
     54<p>For certain advanced features, like <a href="#">Closed Captioning</a>, <a href="#">RTMP Streaming</a> or <a href="#">Related Videos</a>, additional properties can be set per playlist item. See the respective guides for more info.</p> 
     55 
     56<h3>Source</h3> 
     57 
     58<p>The following source properties are recognized and used by JW Player:</p> 
     59 
     60<dl> 
     61<dt>file</dt> 
     62<dd>URL of the source. Is absolutely required.</dd> 
     63<dt>width</dt> 
     64<dd>Width of the source in pixels. Used for quality selection heuristics. Used when setting multiple qualities of the same format.</dd> 
     65<dt>label</dt> 
     66<dd>Human-readable description of the source. Displayed in the quality selection popup. Used when setting multiple qualities of the same format.</dd> 
     67<dt>type</dt> 
     68<dd>Media type of the source. Can be <strong>mp4</strong>, <strong>flv</strong>, <strong>webm</strong>, <strong>aac</strong>, <strong>mp3</strong>, <strong>vorbis</strong>, <strong>hls</strong>, <strong>rtmp</strong> or <strong>youtube</strong>. Is only needed when the file property does not contain a recognized file extensions (like .mp4 or .m4v for <strong>mp4</strong>). See <a href="media.html">Supported Media Formats</a> for more info</a>.</dd> 
     69</dl> 
    3170 
    3271 
    33 <h3>Multiple Formats</h3> 
     72 
     73<h2>Playlist Examples</h2> 
     74 
     75<p>Let's take a look at a few examples of playlists. These examples only show the contents of the <em>setup()</em> code block. See <a href="embedding.html">Embedding JW Player</a> on how to set the script library and container element.</p> 
     76 
     77<h3>Setting Multiple Formats</h3> 
     78 
     79<p>This setup has one item in the playlist with two sources: MP4 and WebM. JW Player will automatically display the MP4 source on Chrome/IE/Safari and the WebM source on Firefox:</p> 
     80 
     81<pre> 
     82&lt;script type="text/javascript"&gt; 
     83    jwplayer("container").setup({ 
     84        playlist: [{ 
     85            image: "/assets/sintel.jpg", 
     86            sources: [{ 
     87                file: "/assets/sintel.mp4", 
     88            },{ 
     89                file: "/assets/sintel.webm" 
     90            }], 
     91            title: "Sintel Movie Trailer" 
     92        } 
     93    }); 
     94&lt;/script&gt; 
     95</pre> 
     96 
     97<p>See <a href="browsers.html">Browser &amp; Device Support</a> for more info on browser support and mode/source selection.</p> 
     98 
     99<h3>Setting Multiple Qualities</h3> 
     100 
     101<p>This setup has one item in the playlist with two sources. Both are MP4, but one is 640x360 pixels (SD) and the other is 1280x720 pixels (HD):</p> 
     102 
     103<pre> 
     104&lt;script type="text/javascript"&gt; 
     105    jwplayer("container").setup({ 
     106        playlist: [{ 
     107            image: "/assets/sintel.jpg", 
     108            sources: [{ 
     109                file: "/assets/sintel.mp4", 
     110                label: "360p", 
     111                width: 640 
     112            },{ 
     113                file: "/assets/sintel-hd.mp4", 
     114                label: "720p", 
     115                width: 1280 
     116            }], 
     117            title: "Sintel Movie Trailer" 
     118        } 
     119    }); 
     120&lt;/script&gt; 
     121</pre> 
     122 
     123<p>On desktop browsers, JW Player will now display a quality selection menu in the controlbar, allowing viewers to toggle between "360p" and "720p" quality.</p> 
     124 
     125<p>On mobile devices, JW Player will select the 360p version for devices whose screen is closer to 640 pixels wide and the 720p version for devices whose screen is closer to 1280 pixels wide. This is a poor man's automated quality selection; see <a href="#">Using HLS Streaming</a> for a better setup that also take bandwidth into account.</p> 
    34126 
    35127 
    36 <h3>Multiple Qualities</h3> 
     128<h3>Setting Multiple Items</h3> 
     129 
     130<p>Finally, this setup contains two playlist items, each with a title, image and single media source (mp4):</p> 
     131 
     132<pre> 
     133&lt;script type="text/javascript"&gt; 
     134    jwplayer("container").setup({ 
     135        playlist: [{ 
     136            image: "/assets/sintel.jpg", 
     137            sources: [{ 
     138                file: "/assets/sintel.mp4" 
     139            }], 
     140            title: "Sintel Movie Trailer" 
     141        },{ 
     142            image: "/assets/bunny.jpg", 
     143            sources: [{ 
     144                file: "/assets/bunny.mp4" 
     145            }], 
     146            title: "Big Buck Bunny Movie Trailer" 
     147        }] 
     148    }); 
     149&lt;/script&gt; 
     150</pre> 
     151 
     152<p>Combining multiple media formats, multiple quality levels and multiple playlist items is no problem. For example, one could setup a playlist with 5 items that each contain an RTMP manifest, an HLS manifest, an SD/HD MP4 file and an SD/HD WebM file...</p> 
    37153 
    38154 
    39 <h2>Using RSS Feeds</h2> 
     155<h2><a name="sidebar"></a>Displaying the Sidebar</h2> 
    40156 
     157<p>The playlist can be displayed as a sidebar to the video window, using the <strong>sidebar</strong> configuration block. This allows users to scroll through it and play specific items. The configuration block has the following properties:</p> 
    41158 
    42 <h2>Rendering the Playlist</h2> 
     159<dl> 
     160<dt>layout (basic)</dt> 
     161<dd>Layout of the playlist items in the sidebar. Can be <strong>basic</strong> (title and duration) or <strong>extended</strong> (image, title, duration and 3 lines of description).</dd> 
     162<dt>position (none)</dt> 
     163<dd>Position of the sidebar relative to the video display. Can be <strong>bottom</strong> (below the display), <strong>none</strong> (no sidebar) or <strong>right</strong> (to the right of the display).</dd> 
     164<dt>size (180)</dt> 
     165<dd>Width (if position is right) or height (if position is bottom) of the sidebar. This is basically the amount of pixels the sidebar "steals" from the video window.</dd> 
     166</dl> 
    43167 
     168<p>Here is an example setup with a sidebar that's positioned to the right of the video with an extended layout:</p> 
     169 
     170<pre>&lt;script type="text/javascript"&gt; 
     171    jwplayer("container").setup({ 
     172        playlist: "http://example.com/playlist.rss", 
     173        height: 360, 
     174        sidebar: { 
     175            layout: 'extended', 
     176            position: 'right', 
     177            size: 320 
     178        }, 
     179        width: 960 
     180    }); 
     181&lt;/script&gt;</pre> 
    44182 
    45183 

  • branches/jw6/doc/start.html

    r2187 r2188  
    7373 
    7474<ul> 
    75 <li><a href="">Supported Browsers &amp; Media</a> lists all supported desktop and mobile browsers, as well as supported media formats.</li> 
    76 <li><a href="">Embedding JW Player</a> lists all options for modifying the player's layout and behavior.</li> 
    77 <li><a href="">Skinning JW Player</a> explains how to change the player's design.</li> 
    78 <li><a href="">JavaScript API Overview</a> explains how to use the JavaScript API for rich player-page interaction.</li> 
     75<li><a href="media.html">Supported Media Formats</a> lists audio and video types can be played on which browsers &amp; devices.</li> 
     76<li><a href="embedding.html">Embedding JW Player</a> lists all options for modifying the player's layout and behavior.</li> 
     77<li><a href="">Using JW Player Skins</a> explains how to completely change the player's design through skinning.</li> 
     78<li><a href="">Using the JavaScript API</a> explains how to build rich player interaction with JavaScript.</li> 
    7979</ul> 
    8080 
Note: See TracChangeset for help on using the changeset viewer.