diff --git a/MediaTrack.markdown b/MediaTrack.markdown new file mode 100644 index 0000000..b73705b --- /dev/null +++ b/MediaTrack.markdown @@ -0,0 +1,131 @@ +# Video and Audio tracks (MediaTrack) # + +**PLEASE NOTE:** The WHATWG now has a specification for Media Tracks, which is separated out into `audioTrack` and `videoTrack` categories. For now, this functionality remains in Captionator, but it will change. **I would advise you to avoid using it for now.** + +Captionator has experimental support for HTML5 video and Audio tracks (designed both for assistive purposes, and for enriching existing media.) + +Some use cases for additional audio & video tracks might include: + +* Directors commentary +* Sign language picture-in-picture video +* Audio description for blind / vision impaired users +* Alternate video angle (useful for concerts etc) +* Alternate video track for a conference, with the slides +* (For movie special features) - video track showing storyboards + +Captionator allows you to make use of this additional media without writing infinity-million lines of code. + +**Caveat:** +This stuff is totally non-standard. I'll be pushing for an implementation similar to this one, and will adjust captionator to mimic any standards which are drafted, but for the time being, I have to invent how this should work! + +**Rationale:** +It's important to provide a way of including and manipulating out-of-band (_and_ in-band, but I can't do that with JS) media tracks, including, but not limited to those use cases mentioned above. I think that providing an implementation as close as possible to the current TextTrack draft is a good idea, as much of the TextTrack implementation philosophy works with respect to media tracks, and keeping things consistent reduces confusion and the learning curve, and provides greater opportunities to integrate the two APIs later down the track. (No pun intended!) + +##The long and short of it## + + + + + + + +Essentially, Captionator provides Media Track support in much the same way it provides text track support - through the `` element. Both the way it interprets the `MediaTrack` `` elements and the API it provides to manipulate them is subtly different, though based around the same principles and ideas. + +Instead of providing a `.track` property on `HTMLVideoElement` objects, Captionator instead puts these elements in a very similar property called `mediaTracks`, containing `MediaTrack` objects instead of `TextTrack` objects. The reasons for this are twofold: + +* Because of its non-standard implementation, Captionator endeavours to separate it from the standards-based `TextTrack` API (while keeping its implementation as similar to the `TextTrack` API as possible.) +* Developers may not necessarily want to see `MediaTrack` objects in the track list when they're expecting `TextTrack` objects. Keeping the two types separate means it's easier to loop through and parse each type of track. If you want to see `MediaTrack` objects, you just look in the `.mediaTrack` property instead. + +Many of the properties of these tracks are the same, though: + +* `label` - String - describes the track (in plain human language) +* `language` - BCP47 language string which describes the track +* `kind` - Resource type (one of `audiodescription`, `commentary`, `alternate`, `signlanguage`.) +* `mode` - the most important property (probably!) - determines whether captionator will fetch and render the resource. +* `readyState` - indicates whether the resource is loaded (one of NONE/0, LOADING/1, LOADED/2, or ERROR/3) +* `videoNode` - the HTMLVideoElement which the track relates to/extends. (Not in the WHATWG spec.) + +The `MediaTrack` object has some extensions on this basic set: + +* `mediaElement` - The audio or video element responsible for displaying the MediaTrack itself +* `type` - The MIME type of the element + +Captionator will automatically sync `MediaTrack` objects to the playback of your master media element, prioritising their display according to whether you have enabled them or not. + +## Enabling and Disabling MediaTracks ## + +Essentially, this procedure works the same way enabling and disabling regular `TextTrack` objects does: + + myVideo.mediaTracks[2].mode = 2; // SHOWING (Either video is visible or audio is audible) + myVideo.mediaTracks[2].mode = 1; // HIDDEN (Elements are not visible or audible) + myVideo.mediaTracks[2].mode = 0; // OFF + +**Setting MediaTracks as Showing By Default** + +For now, this can only be done in markup (I don't think there's any point in doing this at runtime in JavaScript, because there's no functional difference to just changing the track mode.) It's pretty straightforward - just add the boolean attribute 'default'. + + + +## What the Track Types Mean ## + +Captionator implements a number of different track types in extension to the ones defined by the WHATWG spec. Below are the MediaTrack specific extensions, what they are, and how you should use them. + +* **`audiodescription`** + + _Audio Only._ Refers specifically to Audio Descriptions provided for the express purpose of explaining visual content in a video to people with vision impairments. Do not use this track for other forms of audio. + + Captionator will ensure `audiodescription` track audio is audible and synced to the playback state of the master element, but will not display an independent interface for controlling the audio (ala the `controls` attribute.) + +* **`commentary`** + + _Audio Only._ Use for additional commentary, which enriches the original video (such as a Director's commentary for a movie) but is not required for accessibility purposes. Do not use this track type to provide assistive features. + + Captionator will ensure `commentary` track audio is audible and synced to the playback state of the master element, but will not display an independent interface for controlling the audio (ala the `controls` attribute.) + +* **`alternate`** + + _Audio & Video._ Provide additional (alternate) audio and video tracks exclusively for enriching the user experience, **not** providing assistive features. Alternate angles and views, different soundtracks, etc. are all good uses of this track type. Here are some more examples: + * Providing other camera angles for sporting events or concerts + * Alternate soundtracks, or isolating individual instruments in a music video + * Showing slides or other video material as part of a presentation, where the primary media element is a video/audio recording of the presenter + * A video track showing storyboards timed to the movie playing in the master media element + + Remember that you should provide additional assistive tracks for any 'content enrichment' (I just made that up - but you know what I mean!) tracks you create. + + Be aware that Captionator will mute the audio of the master media element if an audio alternate track is selected to play. Multiple audio tracks may play at once, but it may sound awful! This does not apply with video - alternate video tracks will play without silencing the audio of their master media element. For this reason, you should avoid encoding audio into them. + + Captionator will display alternate video over the master element, obscuring its contents. Audio is audible and synced to the playback state of the master element, but no audio interface is displayed. + +* **`signlanguage`** + + _Video Only._ A video of a person providing a sign-language simultaneous translation of the content playing in the master media element. + + Captionator will render this video as picture-in-picture, with the video taking up approximately a quarter of the available area in the master video. For this reason, you should ensure that even at small sizes, your `signLanguage` track is clear and free of visual distraction, and that the person signing takes up as much of the frame as possible (as long as you can still see all the gestures!) + +## Browser Format Support ## + +**NOTE: Due to some browser parser limitations, this syntax doesn't work yet. It will, but in the meantime, if you need `` support, use a synchronised element.** + +"But what about Safari/IE? They don't support ogg/vorbis! And Firefox doesn't support MP3! I don't want to deliver my audio as enormous wav/PCM files!" + +Luckily for you, there's an alternate syntax: + + + + + + + +This works exactly the same way that the `` tags work when nested within regular HTML5 video and audio elements. + +## Synchronised Media Elements ## + +Captionator also implements [proposal six from the Media Multitrack API](http://www.w3.org/WAI/PF/HTML/wiki/Media_Multitrack_Media_API#.286.29_Synchronize_separate_media_elements_through_attributes). You can set the attribute `syncMaster` on any video or audio you'd like to be synchronised to a video track managed by Captionator: + + captionator.captionify(document.getElementByID("myVideo")); + ... + + +That's all there is to it! Captionator will automatically pick up on any new elements you add. \ No newline at end of file diff --git a/README.markdown b/README.markdown index 191830c..aa16618 100644 --- a/README.markdown +++ b/README.markdown @@ -1,44 +1,61 @@ Captionator =========== -**Simple closed-captioning polyfill for HTML5** +**Simple closed-captioning polyfill for HTML5. Just 8KB when gzipped!** -**Implements WHATWG TimedTextTrack Specification!** -This basic polyfill aims to add support for the HTML5 video `` element. +What does Captionator do? +------------------------- -It currently includes rudimentary support for multiple language subtitle tracks, -auto-selected based on the user-agent language and implements the draft WHATWG -track API. +* Implements the WHATWG `TimedTextTrack` Specification, complete with the full JavaScript API +* Supports the `` element +* Supports 100% of WebVTT, along with WebVTT v2 proposed features +* Additional support for SRT, SBV, and SUB caption/subtitle formats +* Works in Firefox 3.5+, IE9, Safari 4+, Chrome, Opera 11... basically any browser which supports HTML5 Video! +* Small, configurable, and under active development +* Library independent +* Accessible, with ARIA support +* Minimal global namespace footprint (written with a closure) + +What can I do with Captionator? +-------------------------- + +* Add subtitles to make foreign-language video content available to your audience +* Add captions for the hard of hearing +* Add descriptions for the blind or vision impaired +* Add time-sensitive thumbnails to your custom video seek bar using `metadata` tracks +* Display realtime tweets or timed comments on top of your video, like soundcloud +* Fancy chapter based navigation with the `chapters` track type +* Overlay lyrics, interview supers, or explanatory text on your videos +* ...and much, much more! + +You can see a demo of Captionator here: http://captionatorjs.com/demo.html + +Using Captionator +------------------ -It is designed to be js-library independent (but I might port it to jQuery later, -as the raw DOM is chunky indeed.) It currently works in browsers which offer support -for HTML5 video, and relies on some JavaScript (ECMAScript 5) features you won't -find in older browsers (but they don't support HTML5 video anyway.) - After including the library, adding captions to your video is pretty simple: - - +```html + + +``` This will not only caption your video (this example will caption every element on the page with Timed Text Tracks available to it,) but it will also provide a `.tracks` property on your video element(s) - which you can use to dynamically manipulate the track data as per the WHATWG specification. -It's also easy to generate a transcript once a video has been captioned if required: - - var track = document.getElementsById("myVideo").tracks[0]; - track.generateTranscript("#divForTranscript"); // Doesn't *have* to be a div, of course! - If you've got specific requirements about which videos get captioned, and in what language(s), there are some extra options: - captionator.captionify(videoElementsToCaption,defaultLanguage,options); +```javascript +captionator.captionify(videoElementsToCaption,defaultLanguage,options) +``` The first parameter can be an array of selectors or DOMElements, or a single selector string or DOMElement. The second parameter is a language string. @@ -46,33 +63,39 @@ string or DOMElement. The second parameter is a language string. You can use the options parameter to specify your own render function for captions, if you don't like captionator's inbuilt renderer: - captionator.captionify(["#yourVideoElement1","#yourVideoElement2"],"de",{ renderer: myFunction }); - +```javascript +captionator.captionify(["#yourVideoElement1","#yourVideoElement2"],"de",{ renderer: myFunction }); +``` + (More on this below!) -Multiple subtitles and containers +Multiple subtitles and custom render functions --------------------------------- -**Specifying containers** - It's pretty straightforward to manage multiple enabled subtitle tracks. Take this set of track elements for example: - - - +```html + + + +``` In this case, the English subtitles are enabled by default. Unless you specify a custom renderer, Captionator will automatically generate as many separate containers as are required for enabled tracks, set up -the relevant events and style +the relevant events and styles. + +**Specifying a custom renderer** Should you wish to specify your own renderer, you can use the following syntax when calling `captionator.captionify`: - captionator.captionify(null,null,{ - "renderer": function(yourHTMLVideoElement) { - ... - } - }); +```javascript +captionator.captionify(null,null,{ + "renderer": function(yourHTMLVideoElement) { + ... + } +}); +``` The renderer function you define is executed, and passed the HTMLVideoElement whenever it fires a `timeupdate` event. You can use the `TextTrack.activeCues` to determine what cues should be displayed at any given time. @@ -89,41 +112,55 @@ You can find a demonstration of this feature in the example file. Captionator simply makes a new property (array) available through javascript on the HTMLVideoElement: - var myVideo = document.getElementsById("myVideo"); - var myTracks = myVideo.tracks; - +```javascript +var myVideo = document.getElementById("myVideo"); +var myTracks = myVideo.tracks; +``` + By extension, getting access to the track you want is as simple as: - var firstSubtitleTrack = myVideo.tracks[0]; - +```javascript +var firstSubtitleTrack = myVideo.tracks[0]; +``` + Each track defines the following user accessible properties: * `label` - String - describes the track (in plain human language) * `language` - BCP47 language string which describes the track * `kind` - Resource type (one of `subtitles`, `captions`, `chapters`, `descriptions`, `metadata`.) +* `readyState` - indicates whether the resource is loaded (one of NONE/0, LOADING/1, LOADED/2, or ERROR/3) * `mode` - the most important property (probably!) - determines whether captionator will fetch and render the resource. +* `cues` - A TextTrackCueList (functionally, an array) containing all the cues for the track +* `activeCues` - A TextTrackCueList containing all the cues for the track which are currently active * `videoNode` - the HTMLVideoElement which the track relates to/extends. (Not in the WHATWG spec.) Ergo, to access the property `language` from the third track, you'd use the following code: - var thirdTrackLanguage = myVideo.tracks[2].language; - +```javascript +var thirdTrackLanguage = myVideo.tracks[2].language; +``` + To enable or disable a track: - myVideo.tracks[2].mode = 2; // SHOWING - myVideo.tracks[2].mode = 1; // HIDDEN - myVideo.tracks[2].mode = 0; // OFF +```javascript +myVideo.tracks[2].mode = captionator.TextTrack.SHOWING; // Equivalent to (integer) 2 +myVideo.tracks[2].mode = captionator.TextTrack.HIDDEN; // Equivalent to (integer) 1 +myVideo.tracks[2].mode = captionator.TextTrack.OFF; // Equivalent to (integer) 0 +``` The track is then enabled/disabled when the video fires a `timeupdate` event, or when a track mode changes. -You can update it immediately like so: +You can update it immediately (although Captionator handles this itself in nearly every case) like so: - captionator.rebuildCaptions(myVideo); +```javascript +captionator.rebuildCaptions(myVideo); +``` (Where `myVideo` is an instance of a captioned HTMLVideoElement) For a more advanced example, see the subtitle selector in the example file. -### Options ### +Options +--------------------------------- The following lists options which you can pass to captionator: @@ -131,14 +168,54 @@ The following lists options which you can pass to captionator: * `enableDescriptionsByDefault` (Boolean) - as above, except for `description` track types instead of `caption` or `subtitle` types. * `exportObjects` (Boolean) - instructs Captionator to export its own implementation of the TimedTextTrack objects (TextTrack, TextTrackCue, etc.) and their relevant constants into the global scope. Captionator ordinarily keeps these within its own object. You might find this useful for creating code which utilises `instanceof` conditionals, or creates instances of these objects itself, which you want to be native-TextTrack-support-agnostic. (Phew, what a mouthful.) * `renderer` (Function) - sets an alternative renderer for captions & subtitles. You can utilise the WHATWG TimedTextTrack specification to manipulate or get information about the tracks themselves. +* `processCueHTML` (Boolean) - determines whether HTML/WebVTT cue source is parsed. Defaults to true. If this is set to false, cue source will be retained as unprocessed text, and special WebVTT cue spans will be appended straight into the DOM (rather than perform their function as detailed in the WebVTT specification.) `metadata` tracks are never processed, regardless of the value of this setting. +* `sanitiseCueHTML` (Boolean) - determines whether non-WebVTT-compliant tags are dropped when parsing, thereby sanitising the source of WebVTT cues. Defaults to true. Cue source is not sanitised when `processCueHTML` is set to false. +* `ignoreWhitespace` (Boolean) - By default, line breaks (single) within cues are converted to
elements in HTML. Set this to true to prevent whitespace from changing processing behaviour. By default, this is false. +* `controlHeight` (Integer) - defines an 'exclusion zone' (where cues will not be rendered) at the bottom of the video to allow for video controls. The available area for cues is determined based on the height of the video less the height of the video controls. By default, if the `controls` attribute is present on the video element, this is calculated automatically based on the user agent. Should the `controls` attribute be missing, this value is zero. If you want to implement your own controls, use this to tell captionator how tall they are. +* `debugMode` (Boolean) - If true, draws a canvas with debugging information for cue positioning on top (in z-space) of the video. The canvas displays `vertical`, `vertical-lr`, and `horizontal` line divisions, as well as Captionator's own understanding of the available cue area (post cue-rendering.) This option is not available in the minified builds of Captionator. +* `appendCueCanvasTo` (HTMLElement | DOM Query as string) - Defines a node in the document within which Captionator should render the video cues. This function is intended to allow you to create a wrapper div and have Captionator render cues within it - hopefully easing the process of making a custom video player. If successful, and Captionator is able to find the wrapper node based on your input, it will set the `top` and `left` values of its own cue canvas to zero, rather than finding the offset position of the video element itself, and append its cue canvas within the wrapper when rendering. If the query fails, the cue canvas will be appended to the body as normal, and positioned using the offset position of the video element. +* `enableHighResolution` (Boolean) - If true, Captionator sets up a 20ms timer for refreshing cues and captions, firing much more rapidly than the default `timeupdate` event listener on the video element. This option causes Captionator to use a lot more of the user's CPU time - only use this if you have a real need for quick, <250ms response times. This option defaults to false. + +#### Styling Options #### +* `minimumFontSize` (Float) - Defines the minimum allowable font size with which Captionator will render cues (in points.) Defaults to 10pt. +* `minimumLineHeight` (Float) - Defines the minimum line height with which Captionator will render cues (in points.) Defaults to 16pt. +* `fontSizeVerticalPercentage` (Float) - The cue font size as a percentage (0 - 100) of the height of a given captioned video. Defaults to 4.5%. +* `lineHeightRatio` (Float) - The ratio of line height to font size. Defaults to 1.5. +* `cueBackgroundColour` (Array) - An array containing four items, each for: red (R), green (G), blue (B), and alpha (A), in that order, which define the background colour of cues. Defaults to [0,0,0,0.5]. +* `sizeCuesByTextBoundingBox` (Boolean) - Instructs Captionator to set the cue size by the default bounding box of the text, rather than size them to 100% of the available rendering area (the WebVTT specification's method, and Captionator's default method.) False by default. + + +Video and Audio tracks (MediaTrack) +----------------------------------- + +**PLEASE NOTE:** The WHATWG now has a specification for Media Tracks, which is separated out into `audioTrack` and `videoTrack` categories. For now, this functionality remains in Captionator, but it will change. **I would advise you to avoid using it for now.** + +Captionator has experimental support for HTML5 video and Audio tracks (designed both for assistive purposes, and for enriching existing media.) + +This is a documentation category in and of itself, so I've moved it to [MediaTrack.markdown](https://github.com/cgiffard/Captionator/blob/master/MediaTrack.markdown). New Features --------------- -* Support for `aria-describedby`, `aria-live`, and `aria-atomic` -* Implements the W3 draft Multitrack Media API proposal: http://www.w3.org/WAI/PF/HTML/wiki/Media_MultitrackAPI -* Now implements the WHATWG draft [Timed Text Track specification](http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html), which is far more up to date and better documented. -* Through the spec, supports dynamic subtitle manipulation (as demonstrated in the example file) -* Supports multiple (simultaneously playing) video files on a page, each with an unlimited number of tracks -* Adaptively scales default subtitle UI to fit video \ No newline at end of file +* Supports WebVTT proposed features such as `DEFAULTS`, `STYLE`, and `COMMENT` cues +* Optional auto cue sizing algorithm, which sizes the cue to the text bounding box +* Brand new WebVTT renderer, with new styling options! +* Performs automatic validation of WebVTT cue spans and HTML! + +Thanks +---------------- +Thanks to @silviapfeiffer for her knowledge and assistance with some of the hairier aspects of these specifications! Thanks also to @ourmaninjapan for his welcome assistance with Japanese text/line breaking algorithms! + +Licence +---------------- + +Copyright (c) 2012, Christopher Giffard +All rights reserved. + +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. +* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file diff --git a/TODO.markdown b/TODO.markdown index 0f2162f..ee49327 100644 --- a/TODO.markdown +++ b/TODO.markdown @@ -1,34 +1,35 @@ TODO ---- -* API Reference Docs -* Fix language parsing -* Where UA language doesn't match first, use the language of the document +* Fix Japanese, Korean, Chinese text line breaking in vertical captions +* Fix BCP-47 language string parsing +* Enable WebVTT inline style support (already parsed, but ignored by renderer) +* **50% - `addCue` complete** Implement `addCue` and `removeCue` events _properly_ for TextTrack objects +* **DONE!** API Reference Docs * **DONE!** Allow dynamic re-enabling and disabling of subtitles (possibly through the Multitrack API - below) -* Test with proper WebVTT files & confirm support for them -* Add (option to prepend) timestamps to generated transcript -* **50%** Formalise and document options argument -* Ensure non-breakingness in old browsers (i.e. won't work - but won't cause script errors either) -* Investigate (safari) webkit embedded subtitles API and determine whether to switch off embedded subtitles if Captionator present, or to use the embedded subtitles instead +* **DONE!** Test with proper WebVTT files & confirm support for them +* **DONE!** Formalise and document options argument +* **DONE!** Ensure non-breakingness in old browsers (i.e. won't work - but won't cause script errors either) * **DONE!** The W3C or the WHATWG haven't really been clear on the `track` element's `kind` property. Determine an appropriate behaviour for it. * **DONE!** Test with more than one video on a page (it should already work - ...or does it?) -* Positional collision detection for subtitles, preventing overlaps. How this should be implemented is a bit of a debate. +* **DONE!** Positional collision detection for subtitles, preventing overlaps. How this should be implemented is a bit of a debate. * **DONE!** Enable use of external renderer -* Fix `oncuechange` event firing +* **DONE!** Fix `oncuechange` event firing ## Big Stuff ## -* **80%** Include compatibility with the in-development JS TimedTextTrack API described by [this WHATWG Document](http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html). -* Respect extra cue settings as described by WebVTT (currently Captionator reads in, but ignores, most of the cue settings.) -* Put back external container support (removed when moving from the W3 spec to the WHATWG spec, as the way I'd implemented it didn't fit the model any more) -* Implement animation options -* Support audio and video tracks too (!!!) * Include QUnit test framework & tests file -* Externalise & modularise parser, possibly move WebSRT parser to a different file (this won't affect the published API at all) -* Write a parser for TTML +* Externalise & modularise parser, enabling import of alternate parsers into captionator core + * Write a parser for TTML + * **50%** Write a parser for LRC +* Implement animation options +* **DONE!** WebVTT Support! (Just compatibility checking to do now!) +* **DONE!** Include compatibility with the in-development JS TimedTextTrack API described by [this WHATWG Document](http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html). +* **DONE!** Respect extra cue settings as described by WebVTT (currently Captionator reads in, but ignores, most of the cue settings.) ## Bugs ## -* **FIXED** Something's up in firefox: [Firefox error 'setting a property that only has a getter' when calling Array.prototype.slice](http://stackoverflow.com/questions/5087755/firefox-error-setting-a-property-that-only-has-a-getter-when-calling-array-prot) -* **FIXED** Script inefficiently reapplies subtitle data with every event call (not by design) -* **FIXED** A bug where captions (which had not yet been downloaded and parsed) were not being rebuilt when the video was paused \ No newline at end of file +* **FIXED** Something's up in firefox: [Firefox error 'setting a property that only has a getter' when calling Array.prototype.slice](http://stackoverflow.com/questions/5087755/firefox-error-setting-a-property-that-only-has-a-getter-when-calling-array-prot) +* **FIXED** Script inefficiently reapplies subtitle data with every event call (not by design) +* **FIXED** A bug where captions (which had not yet been downloaded and parsed) were not being rebuilt when the video was paused +* **FIXED** (Google chrome) fails to apply subtitles properly starting in v.10, despite the changes being reflected in the DOM \ No newline at end of file diff --git a/audio/arduino-en.mp3 b/audio/arduino-en.mp3 new file mode 100644 index 0000000..82bd04e Binary files /dev/null and b/audio/arduino-en.mp3 differ diff --git a/audio/arduino-en.ogg b/audio/arduino-en.ogg new file mode 100644 index 0000000..f587b55 Binary files /dev/null and b/audio/arduino-en.ogg differ diff --git a/audio/arduino-en.wav b/audio/arduino-en.wav new file mode 100644 index 0000000..2db60b6 Binary files /dev/null and b/audio/arduino-en.wav differ diff --git a/css/captions.css b/css/captions.css index 0b6aa23..016b34b 100644 --- a/css/captions.css +++ b/css/captions.css @@ -17,4 +17,14 @@ font-family: "Helvetica Neue"; font-weight: bolder; color: red; +} + +q.voice:before { + content: attr(title); + color:red; + margin-right: 0.5em; +} + +q.voice:after { + content: ""; } \ No newline at end of file diff --git a/index.html b/index.html index a96baa2..4660555 100644 --- a/index.html +++ b/index.html @@ -7,52 +7,39 @@

HTML5 Video Closed Captioning Example

-

Note: the German and Japanese subtitles are machine translated.

-