source: plugins/sharing/doc/reference.html @ 1917

Revision 1917, 6.6 KB checked in by jeroen, 23 months ago (diff)

some doc fixes and additional CSS resets on labels/inputs of overlay
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    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
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>
21
22<h2>Introduction</h2>
23
24<p>The sharing plugin works in both Flash and HTML5 mode. It provides a dialog window with two input fields:</p>
25
26<ul>
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>
29</ul>
30
31<p>Below the input fiels, shortcuts are provided for sharing the video link on <em>Facebook</em> and <em>Twitter</em></p>
32
33<p><img src="assets/sharing.png" alt="The sharing plugin in action" /></p>
34
35<p><em>Note that, with Facebook, it is possible to share an inline video player 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.</em></p>
36
37
38
39<h2>Configuration Options</h2>
40
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>
42
43<dl>
44<dt><b>sharing.link</b> ( <em>undefined</em> )</dt>
45<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>
46<dt><b>sharing.code</b> ( <em>undefined</em> )</dt>
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>
48</dl>
49
50<pre>
51&lt;embed
52  src="http://example.com/player.swf"
53  width="480"
54  height="270"
55  allowfullscreen="true" /&gt;
56</pre>
57
58<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. <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>
59
60<h3>Example</h3>
61
62<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>
63
64<pre>
65&lt;p id="container"&gt;The player will be placed here&lt;/p&gt;
66
67&lt;script type="text/javascript"&gt;
68 jwplayer("container").setup({
69   file: "/static/video/1775.mp4",
70   flashplayer: "player.swf",
71   height: 270,
72   plugins: {
73     "sharing-3": {
74       code: "%3Cembed src%3D%22http%3A%2F%2Fexample.com%2Fembeds%2F123.swf
75              %22width%3D%22320 %2F%3E",
76       link: "http://example.com/videos/1775/"
77     }
78   },
79   width: 480
80 });
81&lt;/script&gt;
82</pre>
83
84
85<h2>Using Playlists</h2>
86
87<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>
88
89<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>
90
91<ul>
92<li>Setting an <b>xmlns:jwplayer</b> attribute in the main XML tag.</li>
93<li>Prefixing the XML elements with <b>jwplayer:</b>, e.g. <em>&lt;jwplayer:sharing.code&gt;</em>.</li>
94</ul>
95
96<h3>Example</h3>
97
98<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>
99
100<pre>
101&lt;rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/"&gt;
102 &lt;channel&gt;
103   &lt;title&gt;Example RSS playlist with sharing options&lt;/title&gt;
104
105   &lt;item&gt;
106     &lt;title&gt;Both code and link&lt;/title&gt;
107     &lt;enclosure url="http://content.bitsontherun.com/videos/nPripu9l.mp4" /&gt;
108     &lt;jwplayer:sharing.link&gt;http://example.com/1234/&lt;/jwplayer:sharing.link&gt;
109     &lt;jwplayer:sharing.code&gt;
110       &lt;![CDATA[
111         &lt;embed src="http://example.com/players/nPripu9l-ALJ3XQCI.swf"
112           width="480" height="270" allowfullscreen="true" /&gt;
113       ]]&gt;
114     &lt;/jwplayer:sharing.code&gt;
115   &lt;/item&gt;
116
117 &lt;/channel&gt;
118&lt;/rss&gt;
119</pre>
120
121Since 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.
122
123
124
125<h2>Rendering Modes</h2>
126
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.
128
129<p>Playlists, both inline and RSS, are fully supported in HTML5.</p>
130
131<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 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 embed codes guide</a> for more info.</p>
132
133<h2>Changelog</h2>
134
135<h3>Version 3.0</h3>
136
137<ul>
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>
142</ul>
143
144
145</body>
146</html>
Note: See TracBrowser for help on using the repository browser.