Changeset 1711


Ignore:
Timestamp:
04/07/11 07:51:14 (2 years ago)
Author:
jeroen
Message:

added XML examples, updated facebook guide with OG data, updated reference guide with embedder/skins/changelog

Location:
plugins/sharing/v5/doc
Files:
3 edited
3 moved

Legend:

Unmodified
Added
Removed

  • plugins/sharing/v5/doc/examples/basic.xml

    r1185 r1711  
    1 <html> 
    2 <head> 
    3 <title>Sharing Plugin | Basic Example</title> 
    4 <style type="text/css"> 
    5     body { background-color: #fff; width: 720px; margin: 40px auto; color:#000; font: 13px/18px Arial, sans-serif; } 
    6     a,h1 { color: #7A2; } 
    7     h1, h3, p, pre { margin: 30px 0; } 
    8     ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; } 
    9     pre { font-family: monospace; color: #7A2; width: 720px; overflow: auto; background: #EEE; padding: 10px;} 
    10 </style> 
    11 <script type="text/javascript" src="../assets/swfobject.js"></script> 
    12 </head> 
    13 <body> 
    14  
    15  
    16 <h1>Basic Example</h1> 
    17 <p>Here is a basic example of the sharing plugin in action, showing both the <i>embed</i> and <i>share</i> dialogs.</p> 
    18  
    19  
    20 <p id="container">Get Flash to see the player</p> 
    21  
    22 <script type="text/javascript"> 
    23     swfobject.embedSWF('../assets/player.swf','container','480','295','9','false',{ 
    24         file: 'http://content.bitsontherun.com/videos/nPripu9l-60830.mp4',  
    25         image: 'http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg', 
    26         plugins: '../../sharing.swf', 
    27         'sharing.code': encodeURIComponent('<embed src="http://content.bitsontherun.com/players/nPripu9l-ALJ3XQCI.swf" width="480" height="270" allowfullscreen="true" />'), 
    28         'sharing.link': 'http://www.bigbuckbunny.org' 
    29     },{ allowfullscreen: true });  
    30 </script> 
    31  
    32  
    33  
    34 <p>Here is the embed code of this setup, using the <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12538/supported-player-embed-methods#SWFobject">SWFObject embed method</a>:</p> 
    35  
    36  
    37  
    38 <pre> 
    39 &lt;p id="container"&gt;Get Flash to see the player&lt;/p&gt; 
    40  
    41 &lt;script type="text/javascript" 
    42     src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt; 
    43  
    44 &lt;script type="text/javascript"&gt; 
    45     swfobject.embedSWF('../assets/player.swf','container','480','295','9','false',{ 
    46         file: 'http://content.bitsontherun.com/videos/nPripu9l-60830.mp4',  
    47         image: 'http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg', 
    48         plugins: 'sharing-2', 
    49         'sharing.code': encodeURIComponent('&lt;embed src="http://content.bitsontherun.com/players/nPripu9l-ALJ3XQCI.swf" width="480" height="270" allowfullscreen="true" /&gt;'), 
    50         'sharing.link': 'http://www.bigbuckbunny.org' 
    51     },{  
    52         allowfullscreen: true  
    53     });  
    54 &lt;/script&gt; 
    55 </pre> 
    56  
    57 <p>Note that the <b>sharing.code</b> flashvar is being <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options#encoding">URL Encoded</a> using the <i>encodeURIComponent()</i> javascript function. This is required in order to let the player load a complex option like this.</p> 
    58  
    59 </body> 
    60 </html> 
     1<example> 
     2    <html> 
     3        <p>Here is a basic example of the sharing plugin in action, showing both the <i>embed</i> and <i>share</i> dialogs.</p> 
     4    </html> 
     5     
     6    <player> 
     7        <flashplayer>http://player.longtailvideo.com/player.swf</flashplayer> 
     8        <id>playerID</id> 
     9        <width>480</width> 
     10        <height>270</height> 
     11        <flashvars> 
     12            <file embedvalue="http://content.bitsontherun.com/videos/nPripu9l-916885.mp4">/videos/bunny.mp4</file> 
     13            <image embedvalue="http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg">/thumbs/bunny.jpg</image> 
     14        </flashvars> 
     15        <plugins> 
     16            <plugin name="sharing-2"> 
     17                <link>http://www.bigbuckbunny.org</link> 
     18                <code>%3Cembed%20src%3D%22http%3A%2F%2Fexample.com%2Fplayers%2F12345.swf%22%20width%3D%22480%22%20height%3D%22270%22%20allowfullscreen%3D%22true%22%20%2F%3E</code> 
     19            </plugin> 
     20        </plugins> 
     21    </player> 
     22     
     23    <html> 
     24        <p>Note that the <b>sharing.code</b> flashvar is being <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options#encoding">URL Encoded</a>. This is required in order to let the player load a complex option like this.</p> 
     25    </html> 
     26</example> 

  • plugins/sharing/v5/doc/examples/playlist.xml

    r1185 r1711  
    1 <html> 
    2 <head> 
    3 <title>Sharing Plugin | Playlist Example</title> 
    4 <style type="text/css"> 
    5     body { background-color: #fff; width: 720px; margin: 40px auto; color:#000; font: 13px/18px Arial, sans-serif; } 
    6     a,h1 { color: #7A2; } 
    7     h1, h3, p, pre { margin: 30px 0; } 
    8     ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; } 
    9     pre { font-family: monospace; color: #7A2; width: 720px; overflow: auto; background: #EEE; padding: 10px;} 
    10 </style> 
    11 <script type="text/javascript" src="../assets/swfobject.js"></script> 
    12 </head> 
    13 <body> 
     1<example> 
     2    <player> 
     3        <flashplayer>http://player.longtailvideo.com/player.swf</flashplayer> 
     4        <id>playerID</id> 
     5        <width>720</width> 
     6        <height>240</height> 
     7        <flashvars> 
     8            <playlist>right</playlist> 
     9            <playlistfile embedvalue="http://developer.longtailvideo.com/player/plugins/sharing/v5/test/assets/playlist.xml">/assets/playlist.xml</playlistfile> 
     10            <playlistsize>360</playlistsize> 
     11        </flashvars> 
     12        <plugins> 
     13            <plugin name="sharing-2"> 
     14                <link>true</link> 
     15                <code>true</code> 
     16            </plugin> 
     17        </plugins> 
     18    </player> 
     19     
     20    <html title="Configuring your playlist"> 
     21        <p>As you can see, the embed code only contains a simple <b>true</b> for both sharing options. This tells the plugin to get the actual options from the playlist:</p> 
     22    </html> 
    1423 
    15  
    16 <h1>Playlist Example</h1> 
    17 <p>Here is an example of the sharing plugin with a playlist. Both the <i>embed</i> and <i>share</i> fields are shown:</p> 
    18  
    19  
    20 <p id="container">Get Flash to see the player</p> 
    21  
    22 <script type="text/javascript"> 
    23     swfobject.embedSWF('../assets/player.swf','container','480','400','9','false',{ 
    24         file: '../assets/playlist.xml',  
    25         plugins: '../../sharing.swf', 
    26         playlist: 'bottom', 
    27         playlistsize: 120, 
    28         'sharing.code': true, 
    29         'sharing.link': true 
    30     },{ allowfullscreen: true }); 
    31 </script> 
    32  
    33  
    34  
    35 <p>Here is the embed code of this setup, using the <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12538/supported-player-embed-methods#SWFobject">SWFObject embed method</a>:</p> 
    36  
    37  
    38  
    39 <pre> 
    40 &lt;p id="container"&gt;Get Flash to see the player&lt;/p&gt; 
    41  
    42 &lt;script type="text/javascript" 
    43     src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt; 
    44  
    45 &lt;script type="text/javascript"&gt; 
    46     swfobject.embedSWF('../assets/player.swf','container','480','270','9','false',{ 
    47         file: '../assets/playlist.xml', 
    48         playlist: 'bottom', 
    49         playlistsize: 120, 
    50         plugins: 'sharing-2', 
    51         'sharing.code': 'true', 
    52         'sharing.link': 'true' 
    53     },{  
    54         allowfullscreen: true  
    55     });  
    56 &lt;/script&gt; 
    57 </pre> 
    58  
    59 <p>As you can see, the embed code only contains a simple <b>true</b> for both sharing options. This tells the plugin to get the actual options from the playlist:</p> 
    60  
    61 <pre> 
    62 &lt;rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats"&gt; 
     24    <html title="playlist.xml" code="true"> 
     25    &lt;rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats"&gt; 
    6326    &lt;channel&gt; 
    6427        &lt;title&gt;Example RSS playlist with sharing&lt;/title&gt; 
    … …  
    8447    &lt;/channel&gt; 
    8548&lt;/rss&gt; 
    86 </pre> 
     49    </html> 
    8750 
    88 <p>The playlist is in <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support#supportedxml">RSS format</a> and uses the <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support#jwplayernamespace">jwplayer: extension</a> to display the sharing options.</p> 
     51    <html> 
     52        <p>The playlist is in <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support#supportedxml">RSS format</a> and uses the <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support#jwplayernamespace">jwplayer: extension</a> to display the sharing options.</p> 
     53        <p>Note the <i>sharing.code</i> option must be placed inside <b>CDATA</b> tags. It contains special characters that otherwise break the XML document.</p> 
     54    </html> 
    8955 
    90 <p>Note the <i>sharing.code</i> option must be placed inside <b>CDATA</b> tags. It contains special characters that otherwise break the XML document.</p> 
    9156 
    92 </body> 
    93 </html> 
     57</example> 

  • plugins/sharing/v5/doc/examples/skinning.xml

    r1185 r1711  
    1 <html> 
    2 <head> 
    3 <title>Sharing Plugin | Skinning Example</title> 
    4 <style type="text/css"> 
    5     body { background-color: #fff; width: 720px; margin: 40px auto; color:#000; font: 13px/18px Arial, sans-serif; } 
    6     a,h1 { color: #7A2; } 
    7     h1, h3, p, pre { margin: 30px 0; } 
    8     ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; } 
    9     pre { font-family: monospace; color: #7A2; width: 720px; overflow: auto; background: #EEE; padding: 10px;} 
    10 </style> 
    11 <script type="text/javascript" src="../assets/swfobject.js"></script> 
    12 </head> 
    13 <body> 
    14  
    15  
    16 <h1>Skinning Example</h1> 
    17 <p>Here is an example of the sharing plugin with a custom skin. Only the <i>share</i> dialog is shown.</p> 
    18  
    19  
    20 <p id="container">Get Flash to see the player</p> 
    21  
    22 <script type="text/javascript"> 
    23     swfobject.embedSWF('../assets/player.swf','container','480','270','9','false',{ 
    24         controlbar: 'over', 
    25         file: 'http://content.bitsontherun.com/videos/nPripu9l-60830.mp4',  
    26         image: 'http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg', 
    27         plugins: '../../sharing.swf', 
    28         'sharing.link': 'http://www.bigbuckbunny.org', 
    29         skin: '../assets/glow.zip' 
    30     },{ allowfullscreen: true });  
    31 </script> 
    32  
    33  
    34  
    35 <p>Here is the embed code of this setup, using the <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12538/supported-player-embed-methods#SWFobject">SWFObject embed method</a>:</p> 
    36  
    37  
    38  
    39 <pre> 
    40 &lt;p id="container"&gt;Get Flash to see the player&lt;/p&gt; 
    41  
    42 &lt;script type="text/javascript" 
    43     src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt; 
    44  
    45 &lt;script type="text/javascript"&gt; 
    46     swfobject.embedSWF('../assets/player.swf','container','480','270','9','false',{ 
    47         controlbar: 'over', 
    48         file: 'http://content.bitsontherun.com/videos/nPripu9l-60830.mp4',  
    49         image: 'http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg', 
    50         plugins: 'sharing-2', 
    51         'sharing.link': 'http://www.bigbuckbunny.org', 
    52         skin: '../assets/glow.zip' 
    53     },{  
    54         allowfullscreen: true  
    55     });  
    56 &lt;/script&gt; 
    57 </pre> 
    58  
    59 <p>Our <a href="http://www.longtailvideo.com/addons/skins/">skinning library</a> includes several skins that contain graphics for the <i>Sharing</i> plugin.<br/>Building your own skin to style the plugin is also <a href="#">a piece of cake</a>.</p> 
    60  
    61 </body> 
    62 </html> 
     1<example> 
     2    <html> 
     3        <p>Here is an example of the sharing plugin with a custom skin (<a href="http://www.longtailvideo.com/addons/skins/196/Glow">Glow</a>). Only the <i>share</i> dialog is shown.</p> 
     4    </html> 
     5     
     6    <player> 
     7        <flashplayer>http://player.longtailvideo.com/player.swf</flashplayer> 
     8        <id>playerID</id> 
     9        <width>480</width> 
     10        <height>270</height> 
     11        <flashvars> 
     12            <file embedvalue="http://content.bitsontherun.com/videos/nPripu9l-916885.mp4">/videos/bunny.mp4</file> 
     13            <image embedvalue="http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg">/thumbs/bunny.jpg</image> 
     14            <skin embedvalue="http://content.longtailvideo.com/skins/glow/glow.zip">/assets/glow.zip</skin> 
     15        </flashvars> 
     16        <plugins> 
     17            <plugin name="sharing-2"> 
     18                <link>http://www.bigbuckbunny.org</link> 
     19            </plugin> 
     20        </plugins> 
     21    </player> 
     22     
     23    <html> 
     24        <p>Our <a href="http://www.longtailvideo.com/addons/skins/">skinning library</a> includes several skins that contain graphics for the <i>Sharing</i> plugin.<br/>Building your own skin to style the plugin is also <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins">a piece of cake</a>.</p> 
     25    </html> 
     26</example> 

  • plugins/sharing/v5/doc/guides/facebook.rst

    r1185 r1711  
    3131.. code-block:: html 
    3232 
    33    <meta name="title" content="Bits on the Run introduction video" /> 
    34    <meta name="description" content="Bits on the Run is a clear and flexible platform  
    35        for transcoding, managing and streaming your video online." /> 
    36    <link rel="image_src" href="http://content.bitsontherun.com/thumbs/yYul4DRz-320.jpg" /> 
    37    <link rel="video_src" href="http://content.bitsontherun.com/players/yYul4DRz-tBYU3ED4.swf"/> 
    38    <meta name="video_height" content="245" /> 
    39    <meta name="video_width" content="400" /> 
    40    <meta name="video_type" content="application/x-shockwave-flash" /> 
     33    <meta property="og:title" content="Bits on the Run introduction video"/> 
     34    <meta property="og:description" content="Bits on the Run is a clear and flexible platform  
     35      for transcoding, managing and streaming your video online."/> 
     36    <meta property="og:image" content="http://example.com/thumbs/yYul4DRz-320.jpg" /> 
     37    <meta property="og:site_name" content="http://www.mysite.com" /> 
     38    <meta property="og:type" content="movie"/> 
     39    <meta property="og:url" content="http://example.com/previews/MSO47ORl-tBhZ0fIU"/> 
     40    <meta property="og:video" content="http://example.com/players/yYul4DRz-tBYU3ED4.swf" /> 
     41    <meta property="og:video:height" content="245" /> 
     42    <meta property="og:video:width" content="400" /> 
     43    <meta property="og:video:type" content="application/x-shockwave-flash" /> 
    4144 
    4245All these tags should be placed between the *<head>* and *</head>* tags of your page's HTML (`example <http://www.bitsontherun.com/demo/facebook/>`_). Here's what they do: 
    4346 
    4447* The *title* and *description* are straightforward: they provide some basic metadata on your video. 
    45 * The *image_src* provides a preview image of your video. When your friends click that image, the videoplayer will be loaded on their page. 
    46 * The *video_src* provides the link to your video **player** (not the actual video). In case your players are setup with :ref:`clean embed codes <embedcodes>` (e.g. when you use `Bits on the Run <http://www.bitsontherun.com/>`_), this is a single URL. When your player also needs flashvars, you should amend them the the URL of the player as querystring variables, like this: 
     48* The *image* provides a preview image of your video. When your friends click that image, the videoplayer will be loaded on their page. 
     49* The *video* provides the link to your video **player** (not the actual video). In case your players are setup with :ref:`clean embed codes <embedcodes>` (e.g. when you use `Bits on the Run <http://www.bitsontherun.com/>`_), this is a single URL. When your player also needs flashvars, you should amend them the the URL of the player as querystring variables, like this: 
    4750    
    4851   .. code-block:: html 
    … …  
    5053      http://www.mysite/com/player.swf?file=http://www.mysite.comvideo.mp4&image=... 
    5154    
    52 * The *video_height* and *video_width* define the dimensions of your video. The maximum width is **420** pixels and the maximum height is **280** pixels. Don't worry about setting other dimensions here than with the player on your own site; the JW Player will automatically resize itself. 
    53 * The *video_type* tells Facebook what media type the video player is. This should always be set to *application/x-shockwave-flash*. 
     55* The *video:height* and *video:width* define the dimensions of your video. The maximum width is **420** pixels and the maximum height is **280** pixels. Don't worry about setting other dimensions here than with the player on your own site; the JW Player will automatically resize itself. 
     56* The *video:type* tells Facebook what media type the video player is. This should always be set to *application/x-shockwave-flash*. 
    5457 
    5558Share page 

  • plugins/sharing/v5/doc/guides/reference.rst

    r1185 r1711  
    5050^^^^^^^ 
    5151 
    52 Here is a basic embed code example of a player using the sharing plugin. This example uses the SWFObject 2.0 embedding script: 
     52Here is a basic embed code example of a player using the sharing plugin. This example uses the JW Embedder embedding script: 
    5353 
    5454.. code-block:: html 
    … …  
    5757    
    5858   <script type="text/javascript"> 
    59      swfobject.embedSWF("player.swf","container","480","270","9.0.115","false",{ 
     59     jwplayer("container").setup({ 
    6060       file: "/static/video/1775.mp4", 
    61        plugins: "sharing", 
    62        "sharing.code": encodeURIComponent( 
    63          '<embed src="http://www.website.com/embeds/1775.swf" width="320 />' 
    64        ), 
    65        "sharing.link": "http://www.website.com/videos/1775/" 
     61       flashplayer: "player.swf", 
     62       height: 270, 
     63       plugins: { 
     64         "sharing-2": { 
     65           code: "%3Cembed src%3D%22http%3A%2F%2Fwww.website.com%2Fembeds%2F1775.swf%22 
     66                  width%3D%22320 %2F%3E", 
     67           link: "http://www.website.com/videos/1775/" 
     68         } 
     69       }, 
     70       width: 480 
    6671     }); 
    6772   </script> 
    … …  
    176181Here's a few skins that include a custom look for the *sharing* plugin (all using the dock, not the controlbar). Feel free to download these and/or tweak their looks: 
    177182 
     183* `Beelden <http://www.longtailvideo.com/addons/skins/155/Beelden>`_ 
    178184* `Glow <http://www.longtailvideo.com/addons/skins/196/Glow>`_ 
    179185* `Modieus <http://www.longtailvideo.com/addons/skins/50/Modieus>`_ 
    180186* `Bekle <http://www.longtailvideo.com/addons/skins/52/Bekle>`_ 
     187* `Stormtrooper <http://www.longtailvideo.com/addons/skins/156/Stormtrooper>`_ 
    181188* `Stijl <http://www.longtailvideo.com/addons/skins/25/Stijl>`_ 
    182  
    183189 
    184190 
    … …  
    195201* Added support for an embed code fallback and share link fallback in case no playlistItem code/link are set. 
    196202 
    197  
    198  
     203Version 2.1 
     204^^^^^^^^^^^ 
     205 
     206* Fixed page detection to account for players in iframes (player uses parent link) 
     207* Fixed URL encoding issue with percentages and hashes in Facebook/Twitter links. 
Note: See TracChangeset for help on using the changeset viewer.