A simple system for adding captions and an interactive transcript to online videos. EasyCaptions uses progressive enhancement, providing the best possible experience for all visitors. Background information
Documentation
EasyCaptions API
Options:
enableTranscript
(boolean; default istrue
)- If set to
false
, EasyCaptions will NOT make the transcript clickable.
- If set to
enableCaptions
(boolean; default istrue
)- If set to
false
, EasyCaptions will NOT dynamically generate the caption<div>
- If set to
transcriptElementID
(string or HTML DOM element)- Required. The HTML element containing the transcript. The transcript must be marked up with
<span>
elements using the customdata-begin
attribute (data-end
is optional).
- Required. The HTML element containing the transcript. The transcript must be marked up with
videoElementID
(string or HTML DOM element)- The HTML5 video element. If this element is not supplied the fallback will still function (assuming it is configured properly).
transcriptEnabledClass
(string, default is “EasyCaptions-enabled”)- The class to append to the transcript text container. If no custom class name is provided by the user, the default “EasyCaptions-enabled” will be used
captionID
(string, default is “EasyCaptions-caption”)- The ID to append to the generated caption area. If no custom ID is provided by the user, the default “EasyCaptions-caption” will be used
Returns: object
with the following properties and methods
video_element
(HTML DOM element)- The video element specified by the
videoElementID
option
- The video element specified by the
transcript_element
(HTML DOM element)- The transcript element specified by the
transcriptElementID
option
- The transcript element specified by the
caption_element
(HTML DOM element)- The caption element generated by EasyCaptions
html5_supported
(boolean)- Indicates whether HTML5 video is supported in the user’s browser. Important note: This detection ONLY checks support for mime types specified in the markup. For example, if you only specify
<source src="myvideo.mp4" type="video/mp4" />
, the detection script will only check for video/mp4 support and will NOT check for any other mime types.
- Indicates whether HTML5 video is supported in the user’s browser. Important note: This detection ONLY checks support for mime types specified in the markup. For example, if you only specify
updateCaption(timecode)
(function)- A utility that allows you to display the caption for a specific timecode. This is useful if you need to manually control caption timing. Pass the specified
timecode
(number representing seconds) as the argument.
- A utility that allows you to display the caption for a specific timecode. This is useful if you need to manually control caption timing. Pass the specified
enableFallback(obj)
(function)- A utility that allows you to specify your own custom fallback mechanism (normally a Flash-based fallback, but other technologies such as Silverlight could be used as well). Accepts a single object argument, with the following properties:
elementID
(string or HTML DOM element)- The element containing your fallback video (such as the
<object>
that loads the Flash-based JW Media Player)
- The element containing your fallback video (such as the
captionHandler
(function)- The hook for your fallback’s caption handling.
transcriptHandler
(function)- The hook for your fallback’s transcript/onclick handling.
- A utility that allows you to specify your own custom fallback mechanism (normally a Flash-based fallback, but other technologies such as Silverlight could be used as well). Accepts a single object argument, with the following properties:
Code examples
Simplest example (no fallback):
<div id="transcript">
<p>
<span data-begin="0">My first phrase,</span>
<span data-begin="14">then a second.</span>
<span data-begin="16">A third comes shortly after.</span>
</p>
</div>
<video id="myVideoID" width="420" height="240" controls>
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<!-- fallback content here -->
</video>
Code language: HTML, XML (xml)
var easy = new EasyCaptions({
videoElementID: "myVideoID",
transcriptElementID: "transcript"
});
alert(easy.html5_supported); //returns true in modern browsers
Code language: JavaScript (javascript)
With fallback:
<div id="transcript">
<p>
<span data-begin="0">My first phrase,</span>
<span data-begin="14">then a second.</span>
<span data-begin="16">A third comes shortly after.</span>
</p>
</div>
<video id="myVideoID" width="420" height="240" controls>
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<object id="video-swf" name="video-swf" data="player.swf" type="application/x-shockwave-flash" width="420" height="240">
<param value="player.swf" name="movie"/>
<param value="controlbar=over&file=myvideo.f4v" name="flashvars"/>
<!-- fallback content here -->
</object>
</video>
Code language: HTML, XML (xml)
var easy = new EasyCaptions({
videoElementID: "myVideoID",
transcriptElementID: "transcript"
});
easy.addFallback({
elementID: "video-swf",
captionHandler: function (video, updateCaption){
//Nothing needed here; we're using
//JW Media Player's "playerReady" function
},
transcriptHandler: function (video, position){
video.sendEvent('SEEK', position);
}
});
//The following code is specific to JW Media Player.
//You could replace with something else if you
//prefer other Flash video players.
jw_timeupdateHandler = function (video){
easy.updateCaption(parseInt(video.position, 10));
};
Code language: PHP (php)
Demonstrations
- Unstyled barebones example (HTML5 video only)
- Captions and Interactive Transcript: HTML5 Video only
- Captions and Interactive Transcript: HTML5 Video with Flash Fallback
- Captions and Interactive Transcript: HTML5 Video with Flash Fallback (using SWFObject to dynamically embed the SWF when HTML5 video isn’t supported)
- Captions and Interactive Transcript: Flash Only, no HTML5 Video
- Captions Only (no Interactive Transcript): HTML5 Video Only
- Interactive Transcript Only (no Captions): HTML5 Video Only
These demos have been successfully tested in the following browsers:
- Firefox 3.0 (OSX 10.6.2, Windows XP)
- Firefox 3.5 (OSX 10.6.2)
- Firefox 3.6 (OSX 10.6.2, Windows 7)
- Safari 4.0 (OSX 10.6.2)
- Google Chrome 5.0 (OSX 10.6.2, Windows XP)
- Opera 10.1, Opera 10.5 (OSX 10.6.2)
- Internet Explorer 6 (Windows XP)
- Issue: SWFObject demo doesn’t correctly remove fallback content
- Internet Explorer 8 (Windows 7)
- Issue: SWFObject demo doesn’t correctly remove fallback content