Captions

Index: /tags/plugins/captions/3.0/build/encode-images.py =================================================================== --- /tags/plugins/captions/3.0/build/encode-images.py (revision 1956) +++ /tags/plugins/captions/3.0/build/encode-images.py (revision 1956) @@ -0,0 +1,36 @@ +import sys +if len(sys.argv) < 3 or len(sys.argv) > 3: + print """ + This script takes exactly two arguments: + the original file and the image path. + """ +else: + import base64, re + + org = sys.argv[1] + org_file = open(org, 'r') + css = org_file.read() + css_base = sys.argv[2] + extensions = { + 'png': 'image/png', + 'gif': 'image/gif', + } + for ext in extensions: + regex = re.compile('(\.*\/*)([a-zA-Z0-9-_/]+)\.%s' % ext) + matches = regex.finditer(css) + if matches: + for m in matches: + img_name = m.group(1) + m.group(2) + '.' + ext + img_file = css_base + '/' + img_name + try: + img_text = base64.b64encode(open(img_file,'rb').read()) + css = css.replace(img_name, 'data:%s;base64,%s' % (extensions[ext], img_text)) + except IOError: + print "%s does not exist" % img_file + else: + print "No %s images found." % ext + + org_file.close() + dest_file = open(org, 'w') + dest_file.write(css) + dest_file.close() Index: /tags/plugins/captions/3.0/build/build.xml =================================================================== --- /tags/plugins/captions/3.0/build/build.xml (revision 1964) +++ /tags/plugins/captions/3.0/build/build.xml (revision 1964) @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Index: /tags/plugins/captions/3.0/captions.xml =================================================================== --- /tags/plugins/captions/3.0/captions.xml (revision 1911) +++ /tags/plugins/captions/3.0/captions.xml (revision 1911) @@ -0,0 +1,62 @@ + + Captions + captions.swf + 2 + Compatible with 5.0 + LongTail Video + This plugin plays closed captions with a video. + http://developer.longtailvideo.com/trac/browser/plugins/captions + + + + back + false + Set this to "true" to show a semitransparent backdrop that makes the captions more readable. + + + file + + Location of the captions in (TimedText or SRT format) to display. + + + state + true + Set this to false to turn off the captions by default. + + + files + + Comma-separated list of multiple captions tracks. + + + labels + + Comma-separated list of labels for multiple tracks. + + + color + FFF + + + fontFamily + Arial,sans-serif + + + fontSize + 14 + + + fontStyle + normal + + + fontWeight + normal + + + textDecoration + none + + + + Index: /tags/plugins/captions/3.0/test/errors.html =================================================================== --- /tags/plugins/captions/3.0/test/errors.html (revision 2017) +++ /tags/plugins/captions/3.0/test/errors.html (revision 2017) @@ -0,0 +1,53 @@ + + + + + + + Error Handling + + + + + +

Error Handling

+ +

+ + + +

+ + +

Test all cases in Flash, and all but the DFXP case in one HTML5/MP4 browser.
+ In all cases, the captions should not show up and no error should pop up.
+ However, the browser console should pop a log line with the error. +

+ + + + Index: /tags/plugins/captions/3.0/test/assets/sintel-far.txt =================================================================== --- /tags/plugins/captions/3.0/test/assets/sintel-far.txt (revision 1964) +++ /tags/plugins/captions/3.0/test/assets/sintel-far.txt (revision 1964) @@ -0,0 +1,106 @@ +1 +00:01:47,250 --> 00:01:50,500 +این شمشیر گذشته تاریکی دارد. + +2 +00:01:51,800 --> 00:01:55,800 +خون های بسیاری ریخته؛ + +3 +00:01:58,000 --> 00:02:01,450 +تو برای تنها سفر کردن نادانی، +خامی رو تو وجودت حس می کنم. + +4 +00:02:01,750 --> 00:02:04,800 +تو خوش شانسی که خونت هنوز جریان داره. + +5 +00:02:05,250 --> 00:02:06,300 +متشکرم. + +6 +00:02:07,500 --> 00:02:09,000 +بنابراین... + +7 +00:02:09,400 --> 00:02:13,800 +سرزمین دروازه بان ها چه چیزی برای تو به ارمغان آورده ؟ + +8 +00:02:15,000 --> 00:02:17,500 +من دنبال کسی می گردم. + +9 +00:02:18,000 --> 00:02:22,200 +یک شخص بسیار عزیز ؟ +روح یک خویشاوند ؟ + +10 +00:02:23,400 --> 00:02:25,000 +یک اژدها. + +11 +00:02:28,850 --> 00:02:31,750 +یک تلاش خطرناک برای شکارچی تنها. + +12 +00:02:32,950 --> 00:02:35,870 +من تا زمانی که به یاد دارم تنها بودم. + +13 +00:03:27,250 --> 00:03:30,500 +ما تقریباً انجامش دادیم. ششش... + +14 +00:03:30,750 --> 00:03:33,500 +هی، هنوز بشین. + +15 +00:03:48,250 --> 00:03:52,250 +شب بخیر, اسکالز. + +16 +00:04:10,350 --> 00:04:13,850 +بگیرش, اسکالز! بیا! + +17 +00:04:25,250 --> 00:04:28,250 +اسکالز؟ + +18 +00:05:04,000 --> 00:05:07,500 +آره! بیا! + +19 +00:05:38,750 --> 00:05:42,000 +اسکالز! + +20 +00:07:25,850 --> 00:07:27,500 +من شکست خورم. + +21 +00:07:32,800 --> 00:07:36,500 +تو فقط در دیدن شکست خوردی... + +22 +00:07:37,800 --> 00:07:40,500 +این سرزمین اژدها هاست، سینتل. + +23 +00:07:40,850 --> 00:07:44,000 +تو نزدیک تر از اونی که بدونی. + +24 +00:09:17,600 --> 00:09:19,500 +اسکالز! + +25 +00:10:21,600 --> 00:10:24,000 +اسکالز? + +26 +00:10:26,200 --> 00:10:29,800 +اسکالز... + Index: /tags/plugins/captions/3.0/test/assets/corrie-styled.xml =================================================================== --- /tags/plugins/captions/3.0/test/assets/corrie-styled.xml (revision 1815) +++ /tags/plugins/captions/3.0/test/assets/corrie-styled.xml (revision 1815) @@ -0,0 +1,26 @@ ++ + + + + + +Captions Plugin Reference + +Purpose + +The purpose of this guide is providing a feature overview of the JW Player Captions Plugin. + + + +Introduction + +The Captions plugin for JW Player supports the display of closed captions or subtitles at the bottom of a video. Captions can be shown or hidden with a toggle: + + + +Captions are read from external files, in the SRT (SubRip) text format or the DFXP (W3C TimedText) XML format. Captions are also read from MP4 videos (3GPP Timed Text). The plugin works in both Flash and HTML5, but there are certain format/device restrictions (see below). + +The plugin can load multiple subtitle tracks per video, in which case a selection menu is presented. It also supports playlists and styling of the captions with CSS properties. + + + +Configuration Options + +Like the JW Player itself, the Captions plugin can be configured with options that are set in the embed code. The following configuration options are available: + + +back (false) +By default, the player renders a thin black outline around the captions, similar to TV / DVD captions. When setting this option true, a black box is drawn around the captions. This background makes the captions more readeable (nice for small texts), but does set them more apart from the video. +file (undefined) +Location of the captions file to display. Should be the URL to a valid DFXP or SRT captions file. If your captions are embedded in your MP4 videos, or if you use a playlist, this option is not needed. +state (true) +Describes whether to show the captions on startup or not. The default is true (captions are shown). When a viewer changes the state, the value is saved in a cookie, so users won't have to disable the captions on every video again if they don't want them. + + +Example + +Here is a basic embed code of a player with the captions plugin, using the JW Embedder. The file option is used to load SRT captions: + ++<script type="text/javascript" src="/jwplayer/jwplayer.min.js"></script> + +<p id="container">The player will be placed here</p> + +<script type="text/javascript"> + jwplayer("container").setup({ + file: "/assets/video.mp4", + flashplayer: "/jwplayer/player.swf", + height: 360, + plugins: { + "captions-3": { + file: "/assets/captions.srt" + } + }, + width: 640 + }); +</script> + + +Crossdomain loading + +An important issue to keep in mind with captions is that they cannot be loaded cross-domain. In other words, if your player is embedded at http://somesite.com, you cannot load SRT or XML captions from http://othersite.com. This restriction applies to all browsers and devices, in Flash and HTML5. There are workarounds though: + + +You can place a small (PHP) script on the server that hosts your player to proxy the external playlist. This is the easiest solution which works for both Flash and HTML5. +If you're using only the Flash mode of JW Player (no HTML5), you can place a crossdomain.xml file on the server that hosts the captions. +A very technical solution for HTML5 is to configure the server that hosts your captions for Cross-Origin Resource Sharing. + + + + +Formats and Devices + +This section lists the 3 formats the plugin supports, as well as the modes (Flash, HTML5) and devices (iPad, iPhone, Android) in which these formats work. + +SRT (SubRip) + +The SRT format is a widely used and easy to understand plain text captioning format. It is supported in both Flash and HTML5 mode on all desktop browsers. SRT is not supported on Android and the iPad/iPhone. On those devices, it is not possible to render custom graphics during (fullscreen) video playback. + +In SRT, a double linebreak is used to distinct between entries. Single linebreaks are used to add breaks in the texts themselves. Lines should be restricted to about 80 characters per line, which fits the default plugin setup. Here's an example file: + ++1 +00:00:08,000 --> 00:00:10,000 +Nothing is going on. + +2 +00:00:10,500 --> 00:00:12,500 +Violet, please! +- I am not your babe! + +3 +00:00:17,000 --> 00:00:20,000 +You stupid cow, +look what you gone and done now, ay. + + +Note your SRT files should be saved using UTF8 encoding in order to correctly display special characters (accents, but also e.g. Arab, Chinese, Russian). + +DFXP (W3C TimedText) + +The DFXP format is an XML captioning format popular amongst Flash and Silverlight players. The Captions plugin also supports it in Flash mode, but not in HTML5. DFXP is therefore also not supported on the iPad, Android and the iPhone. + +DFXP is a fairly complicated and structured XML format. The actual captions entries are found inside <p> tags inside the <body>, with <br/> tags used for line breaks. Here is an example: + ++<tt xmlns="http://www.w3.org/2006/10/ttaf1"> + <body> + <div> + <p begin="00:00:08" end="00:00:10">- Nothing is going on.</p> + <p begin="00:00:10.5" end="00:00:12.5">You liar!</p> + <p begin="00:00:13.5" end="00:00:15">Are you?</p> + <p begin="00:00:17" end="00:00:20">Violet, please!<br/>- I am not your babe!</p> + <p begin="00:00:34" end="00:00:36">Vi, please.<br/>- Leave me alone!</p> + </div> + </body> +</tt> + + +Note your DFXP files should be saved using UTF8 encoding in order to correctly display special characters (accents, but also e.g. Arab, Chinese, Russian). + +MP4 (3GPP Text Tracks) + +The MP4 media container has the ability to embed timed text tracks, in addition to e.g. a video and an audio track. This text data, often referred to as 3GPP Timed Text, is automatically picked up and displayed by the Captions plugin in Flash mode. + +On the iPad and iPhone, the video element controller itself detect and renders the closed captions. It also displays a language selection menu in case multiple tracks are shown: + + + +In HTML5 mode on desktop browsers and on Android, embedded MP4 captions are not supported. + + + +Multiple Tracks + +It is possible to assign multiple captions tracks (for multiple languages) to one video. The button that used to toggle the captions then pops up a language selection menu: + + + +For MP4 files with multiple tracks, the plugin automatically detects the languages and renders the menu. For SRT or DFXP files, there's two configuration options to set: + + +files (undefined) +When you have multiple captions, use the files option instead of file. Set it to a comma-separated list of URLs. Each URL in this list should link to a valid SRT or DFXP captions file. If your captions are embedded in your MP4 videos, this option is not needed. +labels (undefined) +Set this value to a second comma-separated list, defining the labels for each language that should pop up in the selection menu (e.g. English,Deutsch,Francais). The amount and order of these labels should be the same as the amount and order of entries in the files option. + + +When a viewer changes the captions track, the value is saved in a cookie. That way the viewer won't have to re-set the track with every new video or page reload. You can override this cookied value by setting another option called label. Set it to the label of the track you want pre-selected. + + Note you can also set the labels option to override the default MP4 track labels. + +Example + +This example embed code loads a video with 3 different SRT files: + ++<script type="text/javascript" src="/jwplayer/jwplayer.min.js"></script> + +<p id="container">The player will be placed here</p> + +<script type="text/javascript"> + jwplayer("container").setup({ + file: "/assets/video.mp4", + flashplayer: "/jwplayer/player.swf", + height: 360, + plugins: { + "captions-3": { + files: "/assets/deu.srt,/assets/fra.srt,/assets/ita.srt", + labels: "Deutsch,FranÃ§ais,Italiano" + } + }, + width: 640 + }); +</script> + + +Note the selection menu cannot scroll (yet) if there are too many languages. Work around this issue by offering a language selection outside the player or use browser info for pre-selecting a few languages. + + + +Playlist Support + +Captions can be assigned to one or more videos in a playlist. The functionality is available for both inline and RSS playlists, in both Flash and HTML5. You can mix videos with and videos without captions in a single feed. + +Since RSS playlist format does not define an element for linking to captions files, captions should be set using the JWPlayer XML namespace. In practice, the namespace is enabled by: + + +Setting an xmlns:jwplayer attribute in the main XML tag. +Prefixing the XML elements with jwplayer:, e.g. <jwplayer:captions.file> + + +You can set either the captions.file (single track) or the captions.files & captions.labels (multiple tracks) options for each playlist entry. + +Example + +Here is an example RSS playlist. The captions.file option is set for both entries: + ++<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/"> + <channel> + <title>Example RSS playlist with captions</title> + + <item> + <title>Coronation Street</title> + <description>A episode clip, with captions.</description> + <enclosure url="/static/corrie.mp4" /> + <jwplayer:captions.file>/static/corrie.srt</jwplayer:captions.file> + </item> + + <item> + <title>Big Buck Bunny</title> + <description>The official trailer, with captions.</description> + <enclosure url="/static/bunny.mp4" /> + <jwplayer:captions.file>/static/bunny.srt</jwplayer:captions.file> + </item> + + </channel> +</rss> + + +Note the same crossdomain loading restrictions that apply to captions also apply to playlists. + + + +Styling the Captions + +It is possible to change the styling of the captions with a couple of configuration options. Here's a screenshot of a video with styled captions: + + + +The following six style properties can be set. Add them to the player embed code, just like the back and state options: + + +color ( #FFFFFF ) +Can be any hexadecimal color value (e.g. #FFCC00). +fontFamily ( Arian,sans-serif ) +Can be any font installed on a user's computer (e.g. Georgia,serif). +fontSize ( 15 ) +Can be any size in pixels (e.g. 20). Note the captions are scaled to cover the video, with the actual pixel size used at a video width of 400px. +fontStyle ( normal ) +Can be set to italic for making the text italic. +fontWeight ( normal ) +Can be set to bold for boldening the text. +textDecoration ( none ) +Can be set to underline to add a line below the text. + + +Note these styling options do not work for MP4 captions on the iPad/iPhone, since these devices offer no control over rendering of the captions. + +DFXP Styling + +The DFXP format contains two different mechanisms for styling captions. Both are supported by the player, though solely in Flash mode: + + +The <head> of a DFXP file can contain one or more style elements. These elements are all given an ID. The individual captions paragraphs can be linked to the style rules using the style="xx" attribute. +Inside captions paragraphs, text snippets can be wrapped in <span> elements. These spans can contain a style="xx" attribute, or even list individual style rules (like fontWeight="bold"). + + +Here is the example DFXP file, containing both styling methods. Note the individual rules (color, fontSize, etc.) need to be prefixed with a tts: namespace identifier. The according namespace declaration (xmlns:tts) needs to be set in the main XML element to make it a valid file: + ++<tt xmlns="http://www.w3.org/2006/10/ttaf1" + xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling"> + <head> + <styling> + <style id="normal" tts:fontSize="15" /> + <style id="warning" tts:color="#FF0000" tts:fontWeight="bold" tts:fontSize="20" /> + </styling> + </head> + <body> + <div> + <p begin="00:00:08" end="00:00:10" style="normal">- Nothing is going on.</p> + <p begin="00:00:10.5" end="00:00:12.5" style="warning">You liar!</p> + <p begin="00:00:17" end="00:00:20" style="normal">Violet, please!<br/> + - I am <span style="warning">not</span> your babe! + </p> + <p begin="00:00:24" end="00:00:29" style="normal"> + You <span tts:fontStyle="italic">stupid cow</span>, look what you did.</p> + </div> + </body> +</tt> + + +Note the captions plugin does not support <span> tags inside <span> tags. + +SRT Styling + +The SRT file format does not support any styling, but this can be forces by inserting HTML tags. <b>, <i> and <u> can be used to set weight, style and decoration and <font color="#ff0000" face="Courier" size="18"> can be used to set color, family and size. Use this as last resort, since compatibility with many tools will likely break. + + + +Changelog + +Version 3.0 + + +Added support for HTML5 mode: back/file/state options, SRT/MP4 formats, multiple tracks, captions styling and playlists. + + +Enhanced support for dock button language shortcode in multitrack setups. The full label is simply shown. +Made captions aware of controlbar in the "over" state. For player 5.7+, the captions will now scroll up if the controlbar shows and scroll down again if the controlbar hides. +Added a timed transition to showing/hiding of the language selector. +Added support for overriding the MP4 language labels with the "labels" option. +Added a close button to the language selector menu. +Added support for displaying filenames in language selector if labels are not shown. +Added support for forcing a pre-set language through the "label" option. +Enhanced scaling of the captions. For larger dimensions, they're now scaled relatively smaller. + + +Fixed an issue with language selector tabbing that required two tabs for advancing one entry. +Fixed an issue with OVA advertising that caused displaying captions on the preroll. + + +Deprecated skinning the captions toggle (no skinning in HTML5). The feature still works, but only in Flash. +Deprecated placing the toggle in the controlbar (no custom controlbar buttons in HTML5). The feature still works, but only in Flash. + + + + + Index: /tags/plugins/captions/3.0/doc/assets/playlist_captions.xml =================================================================== --- /tags/plugins/captions/3.0/doc/assets/playlist_captions.xml (revision 1769) +++ /tags/plugins/captions/3.0/doc/assets/playlist_captions.xml (revision 1769) @@ -0,0 +1,29 @@ + + + Example RSS playlist with captions + + + Coronation Street + This entry has external DFXP captions + http://content.bitsontherun.com/videos/7OCSON1y-393434.flv + http://content.bitsontherun.com/thumbs/7OCSON1y-480.jpg + /support/sites/default/files/plain.xml + + + + Sintel (trailer) + This entry has external SRT captions. + http://content.bitsontherun.com/videos/3XnJSIm4-364766.mp4 + http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg + /support/sites/default/files/sintel.txt + + + + Big Buck Bunny (trailer) + This entry has embedded MP4 captions. + http://content.bitsontherun.com/videos/aytCR4cx-393434.mp4 + http://content.bitsontherun.com/thumbs/aytCR4cx-480.jpg + + + + Index: /tags/plugins/captions/3.0/doc/assets/captions_styled.xml =================================================================== --- /tags/plugins/captions/3.0/doc/assets/captions_styled.xml (revision 1769) +++ /tags/plugins/captions/3.0/doc/assets/captions_styled.xml (revision 1769) @@ -0,0 +1,23 @@ + + + +