| [1915] | 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | <title>Sharing Plugin Reference</title> |
|---|
| 4 | <style> |
|---|
| 5 | body { padding: 50px 100px; width: 660px; font: 13px/20px Arial; background: #FFF; } |
|---|
| 6 | a , h1, h2{ color: #369; } |
|---|
| 7 | h1 { font-size: 32px; } |
|---|
| 8 | h2 { margin-top: 50px; } |
|---|
| 9 | h3 { margin-top: 25px; } |
|---|
| 10 | img, #player { -webkit-box-shadow: 0 0 5px #999; margin: 0 10px; } |
|---|
| 11 | pre { font-size: 12px; background: #E5F3C8; padding:5px 10px; border: 1px solid #D3EAA4; } |
|---|
| 12 | dd { color: #333; font-style: italic; } |
|---|
| 13 | </style> |
|---|
| 14 | </head><body> |
|---|
| 15 | |
|---|
| 16 | |
|---|
| 17 | <h1>Sharing Plugin Reference</h1> |
|---|
| 18 | |
|---|
| 19 | |
|---|
| [1880] | 20 | <p>The purpose of this guide is to be a reference for you as you get started with the latest version of the <a href="http://www.longtailvideo.com/addons/plugins/110/Sharing">Sharing plugin for the JW Player</a>.</p> |
|---|
| [1178] | 21 | |
|---|
| [1749] | 22 | <h2>Introduction</h2> |
|---|
| [1178] | 23 | |
|---|
| [1880] | 24 | <p>The sharing plugin works in both Flash and HTML5 mode. It provides a dialog window with two input fields:</p> |
|---|
| 25 | |
|---|
| [1749] | 26 | <ul> |
|---|
| [1880] | 27 | <li>The <b>embed code</b> field displays the video embed code, similar to Youtube or Vimeo.</li> |
|---|
| 28 | <li>The <b>video link</b> field displays the URL of the page that contains the video.</li> |
|---|
| [1749] | 29 | </ul> |
|---|
| [1178] | 30 | |
|---|
| [1880] | 31 | <p>Below the input fiels, shortcuts are provided for sharing the video link on <em>Facebook</em> and <em>Twitter</em></p> |
|---|
| [1178] | 32 | |
|---|
| [1880] | 33 | <p><img src="assets/sharing.png" alt="The sharing plugin in action" /></p> |
|---|
| [1178] | 34 | |
|---|
| [1880] | 35 | <p><em>Note that, with Facebook, it is possible to share an inline video player by <a href="http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags">setting some meta tags</a> in the <head> of your page.</em></p> |
|---|
| [1178] | 36 | |
|---|
| 37 | |
|---|
| 38 | |
|---|
| [1749] | 39 | <h2>Configuration Options</h2> |
|---|
| [1178] | 40 | |
|---|
| [1880] | 41 | <p>The plugin is loaded with the <b>plugins=sharing-3</b> option in the JW Player. This ensures you load version 3 of the plugin, which includes HTML5 support. In addition to the plugin assignor, two dedicated flashvars are supported:</p> |
|---|
| [1178] | 42 | |
|---|
| [1749] | 43 | <dl> |
|---|
| 44 | <dt><b>sharing.link</b> ( <em>undefined</em> )</dt> |
|---|
| [1880] | 45 | <dd>URL to display in the Video Link field of the plugin, for example <em>http://www.mywebsite.com/videos/12345/</em>. If no <b>link</b> is set, the page URL is automatically used.</dd> |
|---|
| [1749] | 46 | <dt><b>sharing.code</b> ( <em>undefined</em> )</dt> |
|---|
| [1915] | 47 | <dd>Embed code to display in the Embed Code field of the plugin. If no <b>code</b> is set, the field is not shown. Example code:</dd> |
|---|
| [1749] | 48 | <pre> |
|---|
| [1915] | 49 | <embed |
|---|
| 50 | src="http://example.com/player.swf" |
|---|
| 51 | width="480" |
|---|
| 52 | height="270" |
|---|
| 53 | allowfullscreen="true" /> |
|---|
| 54 | </pre> |
|---|
| [1178] | 55 | |
|---|
| [1880] | 56 | <p>Since the embed code may contain special characters like <em><</em>, <em>"</em> or <em>&</em>, you should <strong>URIEncode</strong> the string in the embed code of your player. The JW Player will automatically decode your string when it is loaded. <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options">See the beginning of this guide</a> for more info.</p> |
|---|
| [1178] | 57 | |
|---|
| [1915] | 58 | <h3>Example</h3> |
|---|
| [1178] | 59 | |
|---|
| [1749] | 60 | <p>Here is a basic embed code example of a player using the sharing plugin. This example uses the <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15995/jw-embedder-reference-guide">JW Embedder</a>:</p> |
|---|
| [1178] | 61 | |
|---|
| [1749] | 62 | <pre> |
|---|
| 63 | <p id="container">The player will be placed here</p> |
|---|
| [1178] | 64 | |
|---|
| [1749] | 65 | <script type="text/javascript"> |
|---|
| 66 | jwplayer("container").setup({ |
|---|
| 67 | file: "/static/video/1775.mp4", |
|---|
| 68 | flashplayer: "player.swf", |
|---|
| 69 | height: 270, |
|---|
| 70 | plugins: { |
|---|
| [1880] | 71 | "sharing-3": { |
|---|
| [1915] | 72 | code: "%3Cembed src%3D%22http%3A%2F%2Fexample.com%2Fembeds%2F123.swf |
|---|
| 73 | %22width%3D%22320 %2F%3E", |
|---|
| [1749] | 74 | link: "http://www.website.com/videos/1775/" |
|---|
| 75 | } |
|---|
| 76 | }, |
|---|
| 77 | width: 480 |
|---|
| 78 | }); |
|---|
| 79 | </script> |
|---|
| 80 | </pre> |
|---|
| [1178] | 81 | |
|---|
| 82 | |
|---|
| [1749] | 83 | <h2>Using Playlists</h2> |
|---|
| [1178] | 84 | |
|---|
| [1880] | 85 | <p>In addition to setting them in the embed code, the two sharing options can also be set per playlist entry. This works for both inline playlists and XML playlists.</p> |
|---|
| [1178] | 86 | |
|---|
| [1749] | 87 | <p>Since none of the XML playlist formats define elements for setting sharing links and codes, the two options should be set using the <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support">JWPlayer XML namespace</a>. In practice, the namespace is enabled by:</p> |
|---|
| [1178] | 88 | |
|---|
| [1749] | 89 | <ul> |
|---|
| 90 | <li>Setting an <b>xmlns:jwplayer</b> attribute in the main XML tag.</li> |
|---|
| 91 | <li>Prefixing the XML elements with <b>jwplayer:</b>, e.g. <em><jwplayer:sharing.code></em>.</li> |
|---|
| 92 | </ul> |
|---|
| [1178] | 93 | |
|---|
| [1915] | 94 | <h3>Example</h3> |
|---|
| [1178] | 95 | |
|---|
| [1749] | 96 | <p>Here is a basic example; an RSS playlist with one entry that has both a <b>sharing.link</b> and <b>sharing.code</b> defined.</p> |
|---|
| [1178] | 97 | |
|---|
| [1749] | 98 | <pre> |
|---|
| 99 | <rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/"> |
|---|
| 100 | <channel> |
|---|
| 101 | <title>Example RSS playlist with sharing options</title> |
|---|
| [1178] | 102 | |
|---|
| [1749] | 103 | <item> |
|---|
| 104 | <title>Both code and link</title> |
|---|
| 105 | <enclosure url="http://content.bitsontherun.com/videos/nPripu9l.mp4" /> |
|---|
| 106 | <jwplayer:sharing.link> |
|---|
| 107 | http://www.longtailvideo.com |
|---|
| 108 | </jwplayer:sharing.link> |
|---|
| 109 | <jwplayer:sharing.code> |
|---|
| 110 | <![CDATA[ |
|---|
| [1915] | 111 | <embed src="http://example.com/players/nPripu9l-ALJ3XQCI.swf" |
|---|
| [1749] | 112 | width="480" height="270" allowfullscreen="true" /> |
|---|
| 113 | ]]> |
|---|
| 114 | </jwplayer:sharing.code> |
|---|
| 115 | </item> |
|---|
| [1178] | 116 | |
|---|
| [1749] | 117 | </channel> |
|---|
| 118 | </rss> |
|---|
| 119 | </pre> |
|---|
| [1178] | 120 | |
|---|
| [1915] | 121 | Since the embed code may contain special characters like <em><</em>, <em>"</em> or <em>&</em>, you should enclose it in CDATA tags in the playlist, as displayed in the above example. Otherwise, the XML syntax of the playlist will be broken. <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support">See the playlist support guide</a> for more info. |
|---|
| [1178] | 122 | |
|---|
| 123 | |
|---|
| 124 | |
|---|
| [1880] | 125 | <h2>Rendering Modes</h2> |
|---|
| [1178] | 126 | |
|---|
| [1880] | 127 | <p>All functionalities of the plugin are available in both Flash and HTML5 mode, except for the <strong>Copy</strong> buttons on top of the input fields. Since JavaScript does not provide any clipboard functionalities, viewers have to manually select and copy the text in the field. |
|---|
| [1178] | 128 | |
|---|
| [1910] | 129 | <p>Playlists, both inline and RSS, are fully supported in HTML5.</p> |
|---|
| [1178] | 130 | |
|---|
| [1910] | 131 | <p>When using this plugin in HTML5 mode, it is best to use <iframe> embed codes instead of <embed> embed codes, since some HTML5 devices (like the iPad) do not support Flash. Please see our <a href="http://www.longtailvideo.com/support/addons/sharing-plugin/14049/setting-clean-embed-codes">Setting clean embedcodes guide</a> for more info.</p> |
|---|
| 132 | |
|---|
| [1749] | 133 | <h2>Changelog</h2> |
|---|
| [1178] | 134 | |
|---|
| [1915] | 135 | <h3>Version 3.0</h3> |
|---|
| [1178] | 136 | |
|---|
| [1749] | 137 | <ul> |
|---|
| [1880] | 138 | <li>Added HTML5 support to the plugin, so it can work in HTML5 mode and on devices like the iPad.</li> |
|---|
| 139 | <li>Removed skinning support in favor of a background sheet that blends in.</li> |
|---|
| 140 | <li>Merged the sharing options into a single dialog. If no embed code is set, it will hide. Link is always shown.</li> |
|---|
| 141 | <li>Removed both the MySpace and Email buttons. Enlarged the Facebook and Twitter buttons.</li> |
|---|
| [1915] | 142 | </ul> |
|---|
| 143 | |
|---|
| 144 | |
|---|
| 145 | </body> |
|---|
| 146 | </html> |
|---|
