Changeset 1293
- Timestamp:
- 09/20/10 07:19:11 (3 years ago)
- Location:
- plugins/captions/v5
- Files:
-
- 39 added
- 23 deleted
- 4 edited
- 6 copied
- 1 moved
-
assets/controlbar.png (modified) (previous)
-
build/build.properties (deleted)
-
build/build.sh (copied) (copied from plugins/qualitymonitor/v5/build/build.sh) (1 diff)
-
build/build.xml (deleted)
-
captions.swf (modified) (previous)
-
captions.xml (modified) (1 diff)
-
com (deleted)
-
doc/Captions.pdf (added)
-
doc/Makefile (deleted)
-
doc/api.rst (deleted)
-
doc/assets (added)
-
doc/assets/examples.png (added)
-
doc/assets/longtail.png (added)
-
doc/assets/stijlskin.png (added)
-
doc/conf.py (deleted)
-
doc/dfxp.rst (deleted)
-
doc/guides (added)
-
doc/guides/Makefile (copied) (copied from plugins/qualitymonitor/v5/doc/guides/Makefile)
-
doc/guides/conf.py (copied) (copied from plugins/qualitymonitor/v5/doc/guides/conf.py) (3 diffs)
-
doc/guides/index.rst (copied) (copied from plugins/qualitymonitor/v5/doc/guides/index.rst) (1 diff)
-
doc/guides/reference.rst (copied) (copied from plugins/qualitymonitor/v5/doc/guides/reference.rst) (4 diffs)
-
doc/index.rst (deleted)
-
doc/install.rst (deleted)
-
doc/readme.txt (deleted)
-
doc/skinning.rst (deleted)
-
doc/srt.rst (deleted)
-
lib (copied) (copied from plugins/qualitymonitor/v5/lib)
-
libs (deleted)
-
src (added)
-
src/com (added)
-
src/com/longtailvideo (added)
-
src/com/longtailvideo/plugins (added)
-
src/com/longtailvideo/plugins/captions (added)
-
src/com/longtailvideo/plugins/captions/Captions.as (added)
-
src/com/longtailvideo/plugins/captions/SRTParser.as (added)
-
src/com/longtailvideo/plugins/captions/TTParser.as (added)
-
test/assets/bunny.jpg (added)
-
test/assets/bunny.mp4 (added)
-
test/assets/bunny.srt (added)
-
test/assets/captions.swf (deleted)
-
test/assets/corrie.flv (added)
-
test/assets/corrie.jpg (added)
-
test/assets/halo-es.srt (deleted)
-
test/assets/halo.srt (deleted)
-
test/assets/halo.tt.xml (deleted)
-
test/assets/index.html (deleted)
-
test/assets/js.html (deleted)
-
test/assets/language.html (deleted)
-
test/assets/margin.html (deleted)
-
test/assets/plain.html (deleted)
-
test/assets/plain.srt (added)
-
test/assets/plain.xml (added)
-
test/assets/playlist.xml (added)
-
test/assets/style.css (added)
-
test/assets/styled.srt (added)
-
test/assets/styled.xml (added)
-
test/assets/tt.html (deleted)
-
test/index.html (modified) (2 diffs)
-
test/players (added)
-
test/players/5.0.swf (added)
-
test/players/5.0.xml (added)
-
test/players/5.1.swf (added)
-
test/players/5.1.xml (added)
-
test/players/5.2.swf (added)
-
test/players/5.2.xml (added)
-
test/players/5.3.swf (added)
-
test/players/5.3.xml (added)
-
test/settings.js (moved) (moved from plugins/captions/v5/test/index.js) (1 diff)
-
test/skins (added)
-
test/skins/bekle.zip (added)
-
test/skins/glow.zip (added)
-
test/skins/modieus.zip (added)
-
test/skins/stijl.zip (added)
Legend:
- Unmodified
- Added
- Removed
-
plugins/captions/v5/build/build.sh
r1205 r1293 7 7 echo "Compiling with MXMLC..." 8 8 9 $FLEXPATH/bin/mxmlc ../src/com/longtailvideo/plugins/ qualitymonitor/QualityMonitor.as -sp ../src -o ../qualitymonitor.swf -library-path+=../lib -load-externs=../lib/jwplayer-5-classes.xml -use-network=false -optimize=true -incremental=false9 $FLEXPATH/bin/mxmlc ../src/com/longtailvideo/plugins/captions/Captions.as -sp ../src -o ../captions.swf -library-path+=../lib -load-externs=../lib/jwplayer-5-classes.xml -use-network=false -optimize=true -incremental=false 10 10 11 # $FLEXPATH/bin/compc -source-path ../src -output ../ qualitymonitor.swc -compiler.library-path $FLEXPATH/frameworks/libs -compiler.library-path ../lib -include-classes com.longtailvideo.plugins.qualitymonitor.QualityMonitor -link-report='../qualitymonitor-classes.xml'11 # $FLEXPATH/bin/compc -source-path ../src -output ../captions.swc -compiler.library-path $FLEXPATH/frameworks/libs -compiler.library-path ../lib -include-classes com.longtailvideo.plugins.captions.Captions -link-report='../captions-classes.xml' -
plugins/captions/v5/captions.xml
r907 r1293 18 18 </flashvar> 19 19 <flashvar> 20 <name>callback</name>21 <default></default>22 <description>Name of a javscript method the captions can be pinged to.</description>23 </flashvar>24 <flashvar>25 20 <name>file</name> 26 21 <default></default> 27 22 <description>Location of the captions in (TimedText or SRT format) to display.</description> 23 </flashvar> 24 <flashvar> 25 <name>fontsize</name> 26 <default>14</default> 27 <description> 28 Base fontsize of the captions, correlating to 80 characters per line. 29 Increase this for small players, decrease this for lengthy texts. 30 </description> 28 31 </flashvar> 29 32 <flashvar> -
plugins/captions/v5/doc/guides/conf.py
r1260 r1293 26 26 27 27 # General information about the project. 28 project = 'JW Player QualitymonitorPlugin'28 project = 'JW Player Captions Plugin' 29 29 copyright = 'LongTail Video' 30 30 … … 63 63 64 64 # Output file base name for HTML help builder. 65 htmlhelp_basename = ' Qualitymonitor'65 htmlhelp_basename = 'Captions' 66 66 67 67 … … 77 77 # (source start file, target name, title, author, documentclass [howto/manual]). 78 78 latex_documents = [ 79 ('index',' Qualitymonitor.tex','JW Player QualitymonitorPlugin','www.longtailvideo.com','howto',False)79 ('index','Captions.tex','JW Player Captions Plugin','www.longtailvideo.com','howto',False) 80 80 ] 81 81 -
plugins/captions/v5/doc/guides/index.rst
r1260 r1293 1 Qualitymonitor plugin 2 ===================== 1 =============== 2 Captions plugin 3 =============== 3 4 4 5 .. toctree:: -
plugins/captions/v5/doc/guides/reference.rst
r1260 r1293 2 2 ============ 3 3 4 The Qualitymonitor plugin for the JW Player is used to monitor the status of the bitrate switching / dynamic streaming functionalty of the player. This functionality is triggered by loading multiple quality levels of one video into the player. It will then monitor certain quality metrics and play the optimal stream is served for every viewer. 5 6 For more info about this functionality, please refer to the dedicated sections in the HTTP resp. RTMP streaming guides: 7 8 * `HTTP bitrate switching <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12534/video-delivery-http-pseudo-streaming#bitrateswitching>`_ 9 * `RTMP dynamic streaming <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12535/video-delivery-rtmp-streaming#dynamicstreaming>`_ functionality of the player. 10 11 Screenshot 12 ========== 13 14 Here's a screenshot of a JW Player with the qualitymonitor plugin: 15 16 .. image:: ../assets/qualitymonitor.png 17 :alt: Skinning examples. 18 19 20 The plugin consists of two sections. The biggest one is the overlay at the top of the video that lists and charts the current quality metrics. Additionally, the plugin contains a small messaging area in the middle of the screen, for printing player messages that relate to the video quality. 21 22 23 Metrics 24 ======= 25 26 The Qualitymonitor plugin monitors the following metrics: 27 28 * The **bandwidth** of the current connection, in kilobits per second (green). 29 * The number of **frames dropped** per second (red). 30 * The **width** of the video screen (blue). 31 * The currently playing **quality level** (white). The required width and bandwidth of this level is shown between parentheses. 32 33 Messages 34 -------- 35 36 In addition to these four metrics, the plugin displays two quality level related messages in the middle of the screen: 37 38 * The completion of a smooth transition for `RTMP dynamic streaming <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12535/video-delivery-rtmp-streaming#dynamicstreaming>`_ (in green text). 39 * The blacklisting and un-blacklisting of a quality level as a result of too many framedrops (in red text). 40 41 .. note:: 42 43 The framedrop detection and resulting (un)blacklisting of levels is only supported in JW Player 5.3+. For JW Player 5.0, 5.1 and 5.2, the framedrop chart will simply remain at 0. 44 4 The Captions plugin for JW Player supports the display of a closed captions or foreign language subtitle track with audio or video files. More creative use cases are karaoke, or the displaying of timed comments or footnotes with the video. 5 6 Captions are read from an external file in either the W3C recommended DFXP (TimedText) XML format or in the SubRip Text plain-text format. Alternatively, the Captions plugin can display captions embedded into MP4 files. 7 8 The plugin supports playlists and can be skinned using the JW Player PNG skinning model. 9 10 11 12 .. _options: 45 13 46 14 Configuration Options 47 15 ===================== 48 16 49 Embedding the qualitymonitor plugin is a matter of setting amending its name to the **plugins** player option. The plugin contains no configuration options itself. 50 51 Here is a basic embed code example of a player using the qualitymonitor plugin. This example uses the SWFObject 2.0 embedding script: 17 Like the `JW Player overall <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options>`_, the Captions plugin can be configured with options set in the embed code. The following configuration options (flashvars) are available: 18 19 .. describe:: captions.back 20 21 When set to **true**, a semitransparant black background is drawn below the captions. This background makes the captions more readeable (nice for small texts), but does set the captions more apart from the video. 22 23 By default, this black background is not shown. Instead, the player renders a thin black outline around the captions, similar to TV / DVD captions. 24 25 .. describe:: captions.file 26 27 Location of the captions file(s) to display. Should be the URL to a valid :ref:`DFXP <dfxp>` or :ref:`SRT <srt>` captions file. 28 29 If your captions are embedded in your MP4 videos, or if you use a playlist, this option is not needed. The Captions plugin will automatically load and display captions found in either the video metadata or playlist contents. 30 31 .. note:: 32 33 If your captions file(s) are located at another webserver than your JW Player (*player.swf*), you need to place a **crossdomain.xml** file in the root of that webserver. Without a *crossdomain.xml*, the Flash plugin will refuse to load the captions for security reasons. More info can be found `in this reference <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12541/crossdomain-file-loading-restrictions>`_. 34 35 .. describe:: captions.fontsize 36 37 The base size of the captions text in pixels. Is **14** by default. This fits about 80 characters per line, just like with TV / DVD. The fontsize can be overridden with this option, but also with styling rules embedded in a :ref:`DFXP <dfxp>` or :ref:`SRT <srt>` captions file. 38 39 .. describe:: captions.state 40 41 Describes whether to show the captions on startup or not. The default is **true** (captions are shown). 42 43 .. note:: 44 45 The *state* option is also saved in a cookie. When a user disables the captions on one video, they will be disabled by default on subsequent videos he watches on the same site. The configuration option overrides the cookie. 46 47 48 Dock Option 49 ----------- 50 51 One option for `the player itself <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options>`_ greatly influences the interface of the Captions plugin. This option is called **dock** and can be set to either *true* (the default) or *false*. 52 53 * When set *true*, the button to show/hide captions is displayed in the *dock*, an area in the top right of the display. 54 * When set *false* the button to show/hide captions is displayed in the controlbar, usually at the right side, before the mute button (this can be set in the skin). 55 56 Dock buttons are larger than controlbar buttons, which allows for clearer graphics to display. Dock buttons automatically fade out after a few seconds of playback. 57 58 Examples 59 -------- 60 61 Here is an example embed code of a player using the captions plugin. This example uses the `SWFObject 2.0 <http://code.google.com/p/swfobject/>`_ embedding script: 52 62 53 63 .. code-block:: html … … 57 67 <script type="text/javascript"> 58 68 swfobject.embedSWF("player.swf","container","480","270","9.0.115","false",{ 59 file: "/static/dynamic_stream.xml", 60 plugins: "qualitymonitor" 69 file: "/static/video.mp4", 70 plugins: "captions", 71 "captions.file": "/static/captions.xml" 61 72 }); 62 73 </script> 63 74 75 Here is a second embed code, in which the *dock* is disabled (showing a controlbar button) and the *captions.back* is enabled (showing the black background): 76 77 .. code-block:: html 78 79 <p id="container">The player will be placed here</p> 80 81 <script type="text/javascript"> 82 swfobject.embedSWF("player.swf","container","480","270","9.0.115","false",{ 83 file: "/static/video.mp4", 84 plugins: "captions", 85 "captions.back": true, 86 "captions.file": "/static/captions.xml", 87 dock: false 88 }); 89 </script> 90 91 Here's a screenshot of both examples: 92 93 .. image:: ../assets/examples.png 94 :alt: Captions example. 95 96 .. note:: 97 98 The dock button will automatically fade away after 3 seconds of playback. 99 100 101 102 103 Supported Formats 104 ================= 105 106 The plugin supports two distinct text formats for loading the captions. Additionally, the plugin can display texttracks embedded in MP4 files. 107 108 A great, easy to use tool for creating subtitles is `Subtitle Horse <http://www.subtitle-horse.com/>`_. It's an online editor that allows you to *live* insert captions into your video. The captions can be exported to both SRT and DFXP. It is also possible to edit already existing SRT or DFXP files ánd the tool can be downloaded, e.g. for inclusion in your own CMS. 109 110 111 .. _dfxp: 112 113 W3C TimedText (DFXP) 114 -------------------- 115 116 The `W3C TimedText format <http://www.w3.org/TR/2010/PR-ttaf1-dfxp-20100914/>`_ is an XML format for storing closed captions or subtitles. Another name for this format is DFXP (Distribution Format Exchange Profile). Here is an example: 117 118 .. code-block:: xml 119 120 <tt xmlns="http://www.w3.org/2006/10/ttaf1"> 121 <body> 122 <div> 123 <p begin="00:00:08" end="00:00:10">- Nothing is going on.</p> 124 <p begin="00:00:10.5" end="00:00:12.5">You liar!</p> 125 <p begin="00:00:13.5" end="00:00:15">Are you?</p> 126 <p begin="00:00:17" end="00:00:20">Violet, please!<br/>- I am not your babe!</p> 127 <p begin="00:00:34" end="00:00:36">Vi, please.<br/>- Leave me alone!</p> 128 </div> 129 </body> 130 </tt> 131 132 The *<br/>* tags inside the paragraphs identify linebreaks in the captions. With the default fontsize, about 80 characters fit on a single line. This is similar to TV / DVD standards. 133 134 Though the format supports multiple languages (by using multiple *<div lang='xx'>* elements), only one language/div is supported by the Captions plugin for now. 135 136 .. note:: 137 138 Your DFXP files should use UTF8 encoding in order to correctly display special characters (accents, but also Chinese or Hebrew). 139 140 Styling 141 ^^^^^^^ 142 143 TimedText files can contain directions for styling the captions. These can be inserted in two ways, both supported by the Captions plugin: 144 145 * The *<tt>* element can contain a *<head>* tag with multiple style elements. These styles are all given an ID. The individual pragraphs in the *<body>* can be linked to the style rules using the *<p style="xx">* attribute. 146 * Each paragraph can contain *<span tts:xxx="yyy">* elements, to only style certain text snippets. 147 148 The following style rules are supported by the Captions plugin: 149 150 * **color**, e.g. *<span tts:color="#ffcc00">hello</span>*. 151 * **fontFamily**, e.g. *<span tts:fontFamily="Arial, sans-serif">hello</span>*. 152 * **fontSize**, e.g. *<span tts:fontSize="20">hello</span>*. 153 * **fontStyle**, e.g. *<span tts:fontStyle="italic">hello</span>*. 154 * **fontWeight**, e.g. *<span tts:fontWeight="bold">hello</span>*. 155 * **textDecoration**, e.g. *<span tts:textDecoration="underline">hello</span>*. 156 157 Here is the example DFXP file again, this time with styling rules in both the head and in inline spans. Don't forget the additional namespace declaration for the *tts* elements: 158 159 .. code-block:: xml 160 161 <tt xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling"> 162 <head> 163 <styling> 164 <style id="normal" tts:fontSize="15" /> 165 <style id="yellow" tts:fontSize="15" tts:color="#FFFF00" /> 166 <style id="bigred" tts:color="#FF0000" tts:textDecoration="underline" tts:fontSize="20" /> 167 </styling> 168 </head> 169 <body> 170 <div> 171 <p begin="00:00:08" end="00:00:10" style="normal">- Nothing is going on.</p> 172 <p begin="00:00:10.5" end="00:00:12.5" style="normal"> 173 You <span tts:fontSize="+10">liar</span>! 174 </p> 175 <p begin="00:00:13.5" end="00:00:15" style="yellow">Are you?</p> 176 <p begin="00:00:17" end="00:00:20" style="bigred"> 177 Violet, please!<br/>- I am <span tts:fontSize="30">not</span> your babe! 178 </p> 179 <p begin="00:00:24" end="00:00:29" style="normal"> 180 You <span tts:fontFamily="Times, serif">stupid cow</span>,<br/> 181 look what you gone and done now, ay. 182 </p> 183 </div> 184 </body> 185 </tt> 186 187 .. note:: 188 189 The captions plugin does not support either a *<span>* in *<span>* or a *<br/>* in *<span>* construction inside paragraphs. This would make the parsing of texts needlessly complex. 190 191 .. note:: 192 193 Fontsizes can be set both with absolute (*<font size="15">*) and with relative (*<font size="+5">*) values. 194 195 .. _srt: 196 197 SubRip (SRT) 198 ------------ 199 200 The `SubRip captions format <http://en.wikipedia.org/wiki/SubRip>`_ uses plain text files. Here's an example again: 201 202 .. code-block:: text 203 204 1 205 00:00:08,000 --> 00:00:10,000 206 Nothing is going on. 207 208 2 209 00:00:10,500 --> 00:00:12,500 210 Violet, please! 211 - I am not your babe! 212 213 3 214 00:00:17,000 --> 00:00:20,000 215 You stupid cow, 216 look what you gone and done now, ay. 217 218 The formatting is easy to read, but also easy to break, especially in the timecode lines. Make sure to use the correct delimiters. 219 220 A double linebreak with enumeration is used to distinct between caption entries. Single linebreaks can be used to add breaks in the captions themselves. We recommend you stick to about 80 characters per line. This looks good with a default setup of the captions plugin. It is also the standard for TV / DVD setups. 221 222 .. note:: 223 224 Your SRT files should use UTF8 encoding in order to correctly display special characters (accents, but also Chinese or Hebrew). 225 226 Styling 227 ^^^^^^^ 228 229 The SRT format does not support any styling by itself. The Captions plugin does support styling though, by using a few basic HTML tags. In effect, the same set of styles as with :ref:`DFXP <dfxp>` is supported: 230 231 * *<b>* (bold), *<i>* (italic) and *<u>* (underline) 232 * *<font color="#ff0000" face="Courier, monospace" size="+2">* (font style) 233 234 Here is the same SRT example, this time with a number of styling tags: 235 236 .. code-block:: text 237 238 1 239 00:00:08,000 --> 00:00:10,000 240 <b>Nothing</b> is going on. 241 242 2 243 00:00:10,500 --> 00:00:12,500 244 Violet, <i>please</i>! 245 - I am <font face="Courier, monospace" size="+10" color="#FF0000">not</font> your babe! 246 247 3 248 00:00:17,000 --> 00:00:20,000 249 <font color="#00FF00">You <i><u>stupid cow</u></i>, 250 <b>look</b> what you gone and done now, ay.</font> 251 252 .. note:: 253 254 Fontsizes can be set both with absolute (*<font size="15">*) and with relative (*<font size="+5">*) values. 255 256 257 258 MPEG-4 Timed Text 259 ----------------- 260 261 The MP4 media container has the ability to `embed timed text tracks <http://en.wikipedia.org/wiki/MPEG-4_Part_17>`_, in addition to e.g. a video and an audio track. This text data, often referred to as MPEG-4 Timed Text, is automatically picked up and displayed by the Captions plugin. 262 263 The Captions plugin ignores the *trackid* of a Timed Text track. In other words, the plugin only supports a single text track, since all incoming textdata is simply printed in the captions area. 264 265 Since MPEG-4 Timed Text is a plain-text format, no styling options are supported (except the *captions.fontsize* and *captions.back* :ref:`configuration options <options>`). 266 267 .. note:: 268 269 There is little support for displaying MPEG-4 Timed Text across media players. Another player supporting this is the Quicktime player built into Apple's iOS (iPod/iPhone/iPad). 270 271 Handbrake 272 ^^^^^^^^^ 273 274 A great tool for embedding captions in MP4 files is `Handbrake <http://handbrake.fr/>`_. This free, cross-platform encoding tool can: 275 276 * Embed captions from external SRT files into your transcodes. 277 * Migrate captions from DVDs it rips into your transcodes. 278 279 .. note:: 280 281 Handbrake's `documentation <http://trac.handbrake.fr/wiki/Subtitles>`_ uses the term *subtitles* instead of *captions*. 282 283 284 285 286 Playlist support 287 ================ 288 289 Captions can be assigned to one or more videos in a playlist. You can mix SRT, TT and MPEG-4 captions with videos that have no captions in a single feed. Since none of the XML playlist formats define elements for linking to captions files, the captions should be set using the `JWPlayer XML namespace <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support>`_. In practice, the namespace is enabled by: 290 291 * Setting an **xmlns:jwplayer** attribute in the main XML tag. 292 * Prefixing the XML elements with **jwplayer:**, e.g. *<jwplayer:sharing.code>*. 293 294 Example 295 ------- 296 297 Here is an example embed code for captions with a playlist, using the `SWFObject 2.0 <http://code.google.com/p/swfobject/>`_ embedding script. Note the *captions.file* option is not set: 298 299 .. code-block:: html 300 301 <p id="container">The player will be placed here</p> 302 303 <script type="text/javascript"> 304 swfobject.embedSWF("player.swf","container","480","270","9.0.115","false",{ 305 file: "/static/playlist.xml", 306 plugins: "captions" 307 }); 308 </script> 309 310 And here is how the *playlist.xml* from this example can look like. The *captions.file* option is now set for each entry: 311 312 .. code-block:: xml 313 314 <rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/"> 315 <channel> 316 <title>Example RSS playlist with captions</title> 317 318 <item> 319 <title>Coronation Street</title> 320 <description>This entry has external DFXP captions</description> 321 <enclosure url="/static/corrie.flv" /> 322 <jwplayer:captions.file>/static/corrie.xml</jwplayer:captions.file> 323 </item> 324 325 <item> 326 <title>Big Buck Bunny</title> 327 <description>This entry has external SRT captions.</description> 328 <enclosure url="/static/bunny.mp4" /> 329 <jwplayer:captions.file>/static/bunny.srt</jwplayer:captions.file> 330 </item> 331 332 </channel> 333 </rss> 334 335 .. note:: 336 337 The same `crossdomain file restrictions <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12541/crossdomain-file-loading-restrictions>`_ that apply to captions also apply to playlists. Therefore make sure you have placed a *crossdomain.xml* on the webserver that hosts your captions and playlist, if they are different from the *player.swf*'s webserver. 338 339 64 340 65 341 … … 67 343 ======== 68 344 69 This plugin cannot be skinned. 345 The Captions plugin includes support for styling its controlbar or dock button through the JW Player `PNG Skinning Model <http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/skinning-the-jw-player-5>`_. Styling of the captions themselves must be included in the DFXP or SRT captions file. 346 347 Due to current limitations in the PNG skinning model, not all desired results can be achieved: 348 349 * Rollovers cannot be set, for neither the *dock* nor the *controlbar* button. 350 * Alternative icons (for the **off** state) cannot be set, for neither the *dock* nor the *controlbar* button. 351 * Contrary to regular controlbar buttons, the captions controlbar button is given a margin of 5px to its left and to its right. You should take this into account, removing any margins you have in the button graphics. 352 353 Here's an example of a skin that includes custom Captions graphics: 354 355 .. image:: ../assets/stijlskin.png 356 :alt: Skinning example. 357 358 This skin, called **Stijl**, can be `freely downloaded here <http://www.longtailvideo.com/addons/skins/25/Stijl>`_. 359 360 XML Block 361 --------- 362 363 Here is the XML code block you should include in your PNG skin to style the Captions plugin: 364 365 .. code-block:: html 366 367 ... 368 <component name="captions"> 369 <elements> 370 <element name="controlbarButton" src="controlbar.png" /> 371 <element name="dockIcon" src="dock.png" /> 372 </elements> 373 </component> 374 375 The two PNG images (*controlbar.png* and *dock.png*) should be placed in a **captions** subdirectory of the main skin directory. 376 70 377 71 378 … … 74 381 ========= 75 382 383 An annoying known bug is the fact the Captions area is *stealing* mouse focus from the video screen. The plugin contains the neccessary *.mouseChildren=false* and *.mouseEnabled=false* settings, but the mouse doesn't pass nontheless. Suggestions are welcome! 384 76 385 Version 2.0 77 386 ----------- 78 387 79 * Switched from the 4.x to the 5.x plugin API. As of now, the plugin cannot be loaded in the JW Player v4.80 * Added support for monitoring framedrops in the chart, and level (un)blacklisting events in the center message.81 * Colored the various quality metrics in the chart, to easily distinct between them.82 * Made the chart stop drawing when the video is paused or stopped.83 84 85 388 * Migrated plugin to V5 API; new Captions.as implements IPlugin and works natively with JW 5+. As of 2.0, the plugin doesn't work with the 4.x player anymore. 389 * Added support for styling using TimedText Styles (color, fontFamily, fontSize, fontWeight, fontStyle, fontWeight). Styles can be defined both inline and in the *<head>* of a TimedText file. 390 * Added besic support for PNG skinning, by allowing a custom controlbar and dock icon. 391 * Added support for error handling. 404 not founds, crossdomain security errors and file parsing errors are caught. 392 * Added support for controlbars placed over the display, by moving the captions further up. 393 * Fixed an issue that left the captions 'back' element visible as a thin bar when there where no captions. 394 * Fixed an issue where captions loaded though the configuration options were ignored when using a single-track playlist. -
plugins/captions/v5/test/index.html
r1077 r1293 5 5 <script type="text/javascript" src="assets/jquery.js"></script> 6 6 <script type="text/javascript" src="assets/swfobject.js"></script> 7 <script type="text/javascript" src=" index.js"></script>7 <script type="text/javascript" src="settings.js"></script> 8 8 <script type="text/javascript"> 9 9 … … 301 301 302 302 </script> 303 <style type="text/css" media="all">304 body { font-family: Arial, sans-serif; padding: 20px 40px; }305 a { color: #58C; }306 object { display: block; margin: 0 auto; border: 1px solid #FFF; }307 form, div { margin: 0 0 40px 0; }308 fieldset { clear:both; padding: 5px 10px 10px 10px; margin: 0; background:#F5F5F5; border: 1px solid #7A2; }309 hr { border:0; clear: both; display: block; height: 10px; width: 100%; }310 legend { padding: 0; font-weight: bold; }311 label { display: block; float: left; width: 19%; font-size: 70%; margin: 5px 0 0 0; }312 input, select { margin: 2px 0; border: 1px solid #999; display: block; float: left; width: 80%; }313 button { margin: 0; padding: 5px 0; width: 100%; border: 0; background: #7A2; color: #FFF; }314 li { list-style: none; display: block; float: left; padding: 8px 16px; color: #FFF; margin-right: 2px;315 border-bottom: 2px solid #FFF; font-size: 70%; cursor: pointer; background: #7A2; }316 ul { display: block; padding: 0; margin: 0; }317 p { font-size: 85%; line-height: 150%; padding: 0 0 0 19%; }318 319 #javascript { height: 100px; display: none; }320 #javascript form { width: 32%; margin-right: 2%; float: left; }321 #javascript #listenersform { float: right; margin: 0; }322 #preview { background: #F5F5F5; text-align: center; }323 #preview a { display: block; float: right; padding: 5px 10px; font-size: 80%; color: #666; }324 #flashvarsform li.active { border-bottom: 2px solid #7A2; cursor: default; }325 #flashvarsform fieldset { display: none; }326 #plugins { height: 100px; }327 </style>328 303 </head> 329 304 <body> -
plugins/captions/v5/test/settings.js
r1077 r1293 1 1 var settings = { 2 /** Player versions to test. **/2 /** Players to list. **/ 3 3 players: { 4 '5.0':'/player/tags/mediaplayer-5.0/player.swf', 5 '5.1':'/player/tags/mediaplayer-5.0/player.swf', 6 'trunk':'/player/trunk/fl5/player.swf' 4 '5.3':'players/5.3.swf', 5 '5.2':'players/5.2.swf', 6 '5.1':'players/5.1.swf', 7 '5.0':'players/5.0.swf' 7 8 }, 8 /** Available JW4 plugins to test. **/9 /** Plugins to list. **/ 9 10 plugins: { 10 audiodescription:'/player/plugins/audiodescription/v5/audiodescription.swf', 11 captions:'../captions.swf', 12 hd:'/player/plugins/hd/v4/hd.swf' 11 captions:'../captions.swf' 13 12 }, 14 /** PNG skins to test. **/13 /** Skins to list. **/ 15 14 skins: { 16 15 none:'', 17 beelden:'/player/skins/beelden/beelden.xml', 18 bekle:'/player/skins/bekle/bekle.xml', 19 bluemetal:'/player/skins/bluemetal/bluemetal.xml', 20 classic:'/player/skins/classic/classic.xml', 21 five:'/player/skins/five/five.xml', 22 lulu:'/player/skins/lulu/lulu.xml', 23 modieus:'/player/skins/modieus/modieus.xml', 24 nacht:'/player/skins/nacht/nacht.xml', 25 snel:'/player/skins/snel/snel.xml', 26 stormtrooper:'/player/skins/stormtrooper/stormtrooper.xml' 16 bekle:'skins/bekle.zip', 17 glow:'skins/glow.zip', 18 modieus:'skins/modieus.zip', 19 stijl:'skins/stijl.zip', 27 20 }, 28 21 /** All the setup examples with their flashvars. **/ 29 22 examples: { 30 23 '':{}, 31 'TT captions with button in the dock': { 32 dock:'true', 24 'TT plain captions': { 33 25 plugins:'captions', 34 file:'/player/testing/files/corrie.flv', 35 'captions.file':'/player/testing/files/corrie.xml' 26 file:'../assets/corrie.flv', 27 image:'assets/corrie.jpg', 28 'captions.file':'assets/plain.xml' 36 29 }, 37 'SRT captions with button in the controlbar': {30 'SRT plain captions': { 38 31 dock:'false', 39 32 plugins:'captions', 40 file:'/player/testing/files/corrie.flv', 41 'captions.file':'/player/testing/files/corrie.srt' 33 file:'../assets/corrie.flv', 34 image:'assets/corrie.jpg', 35 'captions.file':'assets/plain.srt' 42 36 }, 43 37 'TT captions with styling': { 44 38 plugins:'captions', 45 file:'/player/testing/files/bunny.flv', 46 'captions.file':'/player/testing/files/captions.xml' 39 file:'../assets/corrie.flv', 40 image:'assets/corrie.jpg', 41 'captions.file':'assets/styled.xml' 47 42 }, 48 43 'SRT captions with styling': { 49 44 plugins:'captions', 50 file:'/player/testing/files/bunny.flv', 51 'captions.file':'/player/testing/files/captions.srt' 45 file:'../assets/corrie.flv', 46 image:'assets/corrie.jpg', 47 'captions.file':'assets/styled.srt' 52 48 }, 53 ' Caption selector in the dock': {49 'MP4 timedtext captions': { 54 50 plugins:'captions', 55 dock:'true', 56 file:'/player/testing/files/bunny.flv', 57 'captions.file':'english:/player/testing/files/captions.srt,deutsch:/player/testing/files/captions.srt,nederlands:/player/testing/files/corrie.srt' 51 file:'../assets/bunny.mp4', 52 image:'assets/bunny.jpg' 58 53 }, 59 'Caption selector in the controlbar': { 54 ' ':{}, 55 'Playlist with captions': { 56 dock:false, 57 file:'assets/playlist.xml', 58 height:240, 59 playlist:'right', 60 playlistsize:240, 60 61 plugins:'captions', 61 dock:'false', 62 file:'/player/testing/files/bunny.flv', 63 'captions.file':'language 1:/player/testing/files/captions.srt,language 2:/player/testing/files/captions.srt,another one:/player/testing/files/corrie.srt' 62 width:720 64 63 }, 65 ' Javascript callback (console.log)': {64 'Multibitrate stream with captions': { 66 65 plugins:'captions', 67 file:'/player/testing/files/corrie.flv', 68 'captions.file':'/player/testing/files/corrie.xml', 69 'captions.callback':'console.log' 66 file:'http://content.bitsontherun.com/jwp/nPripu9l.xml', 67 captions:'assets/bunny.srt' 70 68 } 71 69 }
Note: See TracChangeset
for help on using the changeset viewer.
