source: plugins/sharing/doc/guide.html @ 2023

Revision 2023, 9.2 KB checked in by jeroen, 18 months ago (diff)

wrapped 3.1 sharing version
Line 
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    pre { font-size: 12px; background: #E5F3C8; padding:5px 10px; border: 1px solid #D3EAA4; }
11    dd { color: #333; font-style: italic; }
12</style>
13</head><body>
14
15
16<h1>Sharing Plugin Reference</h1>
17
18
19<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>
20
21<h2>Introduction</h2>
22
23<p>The sharing plugin works in both Flash and HTML5 mode. It provides a dialog window containing:</p>
24
25<ul>
26<li>An instructive <em>heading</em>, telling people to "share this video".</li>
27<li>An <em>embed code</em> field, displaying the video embed code.</li>
28<li>A <em>video link</em> field, displaying the URL of the page that embeds the video.</li>
29<li>Two buttons for quick sharing to <em>Facebook</em> and posting at <em>Twitter</em>.</li>
30</ul>
31
32<p><img src="assets/sharing.png" alt="The sharing plugin in action" /></p>
33
34<p><em>With Facebook, it is possible to post the video itself instead of a link by <a href="http://www.longtailvideo.com/support/addons/sharing-plugin/14048/facebook-video-sharing">setting some meta tags</a> in the &lt;head&gt; of your page. The Sharing plugin fully supports this.</em></p>
35
36
37
38<h2>Configuration Options</h2>
39
40<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, four dedicated flashvars are supported:</p>
41
42<dl>
43<dt><b>sharing.link</b> ( <em>undefined</em> )</dt>
44<dd>URL to display in the Video Link field of the plugin, for example <b>http://example.com/videos/12345/</b>.<br/> If no <b>link</b> is set, the URL of the current page is automatically used.</dd>
45<dt><b>sharing.heading</b> ( <em>Share this video</em> )</dt>
46<dd>Short, instructive text to display at the top of the sharing screen.</dd>
47<dt><b>sharing.shortcuts</b> ( <em>false</em> )</dt>
48<dd>Set this option to <strong>true</strong> to display the Facebook and Twitter buttons in the dock, discarding the sharing dialog altogether. This is useful for publishers only interested in Facebook/Twitter.</dd>
49<dt><b>sharing.code</b> ( <em>undefined</em> )</dt>
50<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>
51</dl>
52
53<pre>
54&lt;embed
55  src="http://example.com/player.swf"
56  width="480"
57  height="270"
58  allowfullscreen="true" /&gt;
59</pre>
60
61
62<p>Since the embed code may contain special characters like <em>&lt;</em>, <em>"</em> or <em>&amp;</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. See <a href="http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options">this player configuration guide</a> for more info.</p>
63
64<h3>Example</h3>
65
66<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>
67
68<pre>
69&lt;p id="container"&gt;The player will be placed here&lt;/p&gt;
70
71&lt;script type="text/javascript"&gt;
72 jwplayer("container").setup({
73   file: "/static/video/1775.mp4",
74   flashplayer: "player.swf",
75   height: 270,
76   plugins: {
77     "sharing-3": {
78       code: "%3Cembed src%3D%22http%3A%2F%2Fexample.com%2Fembeds%2F123.swf
79              %22width%3D%22320 %2F%3E",
80       link: "http://example.com/videos/1775/"
81     }
82   },
83   width: 480
84 });
85&lt;/script&gt;
86</pre>
87
88
89
90
91
92<h2>Rendering Modes</h2>
93
94<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.</p>
95
96<p>The plugin is being tested to work on both iPad/iPhone and Android 2.x devices.</p>
97
98<p><img src="assets/sharing_iphone.png" alt="The sharing plugin on iPhone" style="margin-left:60px;"/></p>
99
100<p>When using this plugin in HTML5 mode, it is best to use &lt;iframe&gt; embed codes instead of &lt;embed&gt; embed codes, since mobile 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 embed codes guide</a> for more info.</p>
101
102
103
104<h2>Using Playlists</h2>
105
106<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>
107
108<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>
109
110<ul>
111<li>Setting an <b>xmlns:jwplayer</b> attribute in the main XML tag.</li>
112<li>Prefixing the XML elements with <b>jwplayer:</b>, e.g. <em>&lt;jwplayer:sharing.code&gt;</em>.</li>
113</ul>
114
115<h3>Example</h3>
116
117<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>
118
119<pre>
120&lt;rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/"&gt;
121 &lt;channel&gt;
122   &lt;title&gt;Example RSS playlist with sharing options&lt;/title&gt;
123
124   &lt;item&gt;
125     &lt;title&gt;Both code and link&lt;/title&gt;
126     &lt;enclosure url="http://content.bitsontherun.com/videos/nPripu9l.mp4" /&gt;
127     &lt;jwplayer:sharing.link&gt;http://example.com/1234/&lt;/jwplayer:sharing.link&gt;
128     &lt;jwplayer:sharing.code&gt;
129       &lt;![CDATA[
130         &lt;embed src="http://example.com/players/nPripu9l-ALJ3XQCI.swf"
131           width="480" height="270" allowfullscreen="true" /&gt;
132       ]]&gt;
133     &lt;/jwplayer:sharing.code&gt;
134   &lt;/item&gt;
135
136 &lt;/channel&gt;
137&lt;/rss&gt;
138</pre>
139
140<p>Since the embed code may contain special characters like <em>&lt;</em>, <em>"</em> or <em>&amp;</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.</p>
141
142<h2>Media ID Replacement</h2>
143
144<p>An alternative to setting a full link and embed code for each video in the playlist, is the setting of the string <strong>MEDIAID</strong> in the <em>sharing.code</em> and <em>sharing.link</em> configuration options. The sharing plugin will, for each video in the playlist, automatically replace the MEDIAID string with the actual <em>mediaid</em> of the video. Example embed:</p>
145
146<pre>
147  jwplayer("container").setup({
148   flashplayer: "player.swf",
149   playlistfile: "/static/playlist.rss",
150   plugins: {
151     "sharing-3": {
152       code: "%3Cembed src%3D%22http%3A%2F%2Fexample.com%2Fembeds%2FMEDIAID.swf
153              %22width%3D%22320 %2F%3E",
154       link: "http://example.com/videos/MEDIAID/"
155     }
156   }
157 });
158</pre>
159
160<p>And here's the playlist with media ID:</p>
161
162<pre>
163&lt;rss version="2.0"&gt;
164 &lt;channel&gt;
165   &lt;item&gt;
166     &lt;title&gt;Both code and link&lt;/title&gt;
167     &lt;enclosure url="http://content.bitsontherun.com/videos/nPripu9l.mp4" /&gt;
168     &lt;guid&gt;nPripu9l&lt;guid&gt;
169   &lt;/item&gt;
170 &lt;/channel&gt;
171&lt;/rss&gt;
172</pre>
173
174<p><em>This playlist uses the RSS <strong>guid</strong> attribute, you can also use <strong>jwplayer:mediaid</strong>. For inline playlists, simply call the property <strong>mediaid</strong>.</em></p>
175
176<h2>Changelog</h2>
177
178<h3>Version 3.0</h3>
179
180<ul>
181<li>Added HTML5 support to the plugin, so it can work in HTML5 mode and on devices like the iPad.</li>
182<li>Removed skinning support in favor of a background sheet that blends in.</li>
183<li>Merged the sharing options into a single dialog. If no embed code is set, it will hide. Link is always shown.</li>
184<li>Removed both the MySpace and Email buttons. Enlarged the Facebook and Twitter buttons.</li>
185<li>Removed support for displaying the Sharing button in the controlbar (not supported in HTML5).</li>
186</ul>
187
188<h3>Version 3.1</h3>
189
190<ul>
191<li>Added support for discarding the screen and use solely Facebook/Twitter buttons instead.</li>
192<li>Added a configurable <em>heading</em> to the screen.</li>
193<li>Added support for the <em>MEDIAID</em> replacement in code/link configuration options.</li>
194</ul>
195
196<ul>
197<li>Updated the design to use rectangular fields/buttons, to fit more skins.</li>
198<li>Added a <em>close</em> button to the overlay top-right.</li>
199<li>Added a timed transition to nicely fade the overlay.</li>
200<li>Added fallback from the <em>sharing.link</em> to the <em>link</em> playlist option.</li>
201<li>Added rollovers to fields/buttons in the screen.</li>
202</ul>
203
204<ul>
205<li>Fixed an issue that prevented the code and link from getting copied on iOS.</li>
206</ul>
207
208</body>
209</html>
Note: See TracBrowser for help on using the repository browser.