CaptionBox: Interactive Transcripts
CaptionBox helps visitors to your site engage with and share your video content.
Viewers can follow along with the transcript as the video plays and navigate to other portions of the video by clicking on the text. The sharing buttons allow visitors to quote snippets of text on Facebook and Twitter which link back to your site and start the video at the quoted moment.
Questions about invoicing, bulk purchases, or enterprise discounts? Email email@example.com.
Check out CaptionBox in action on these sites (you may have to scroll down the page):
Installing CaptionBox will require a developer.
Implementing CaptionBox is a three-step process:
- Install jQuery on your site, if you don't already use it.
- Placing each SpeakerText HTML transcript under its matching video
Alternative: If you have Wordpress, try our Wordpress plugin.
Media Player Compatibility
CaptionBox currently supports video and audio players from YouTube, Vimeo, Brightcove, Ooyala, SoundCloud, Wistia, and Blip.tv. It also works with the popular open-source video player JW Player.
Please see the Platform-Specific Notes for more information on each of these platforms.
When you download and unzip the CaptionBox package, you should see these files:
- captionbox.css - CSS styling
- img/ - folder of sprited images for styling
If your website doesn't use it already, install jQuery from http://jquery.com. Download the production version of jQuery, place it on your webserver, and load it in the <head> tag of your page.
For example, if you placed the jQuery file in your root directory:
Setting Up the Plugin
Download CaptionBox, and place the entire folder in a publicly-accessible directory on your website.
The following instructions assume that the CaptionBox folder can be accessed at the path
On each page that you wish to load CaptionBox, place these lines before the close of the <head> tag, but after jQuery that you installed in the first step:
<link href="/cbox/captionbox.css" media="screen" rel="stylesheet" type="text/css" />
If you have a site-wide template file, you may wish to place those two lines in your template so that the plugin loads across the entire site.
For each video that you wish to load a transcript under, you must place the HTML version of the transcript directly into
the page markup underneath the matching video. You can download or view the HTML transcript for each video from your SpeakerText
library. You must place the entire transcript, from
<div class=”STPlayer…” to
</div> into the
HTML markup on the page.
Smaller sites will most likely just copy and paste this transcript into the markup, but larger sites and those with a lot of video content may want to think about dynamically loading these transcripts into the page at the time it is generated. The transcript files have a consistent naming structure:
If you want to try out your CaptionBox install before you purchase any transcripts, you can use our sample video and transcript.
Platform ID: 1
Video ID: The value of the
v= query string parameter in the YouTube video URL.
Platform ID: 2
Video ID: The number at the end of the Vimeo video URL.
CaptionBox only supports Vimeo's "new" iframe embed code.
Platform ID: 3
Video ID: Can be found in your media library in the Brightcove Studio, or the value of
@videoPlayer param in the embed code.
the line referencing BrightcoveExperiences.js to read:
CaptionBox has only been tested on single-video players, not channel players.
Platform ID: 5
Video ID: The
embedCode query-string parameter in the Ooyala embed code.
You must use the “HTML Embed Code.” To this embed code, you must add the query-string parameter
Platform ID: 4
Video ID: The character string after
http://blip.tv/play/ in the standard embed code.
Platform ID: 6
Video ID: The character string after
http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F in the standard embed code.
Platform ID: 7
Video ID: To create a video ID for self-hosted videos, we take the SHA1 hash of the path and query
string for the video URL that you provide us (everything after the hostname). For example, if your video is located
http://example.net/videos/show.php?secret=abc123, we will hash the string
your video id will be
'cf37ab30182aac21683886dccbabc4e6f1ca5051'. For this reason, you must place the full path to the video in
your embed code.
If the URL of your embedded video is different than the URL that you used to import the video into your SpeakerText library (for example, if you
are embedding a streamed video and you used a progressive-download URL for SpeakerText), you must add an extra attribute to your JW Player embed so
that we can link the video with CaptionBox. Add the attribute
data-stid='$$$' to both the
object tag and
embed tag of your JW player embed code, where
$$$ is the id of the main
div tag of the HTML interactive transcript.
This attribute should look like
Your JW Player embed must include both the 'name' and 'id' attributes, which must have the same value. Of course, this id/name must be unique across the page.
Platform ID: 8
Video ID: The number string after
wistia_ in the id attribute of the standard embed code object tag.
CaptionBox will read initialization settings from a
|minHeight||Height in px||Minimum height the player can be collapsed to before it will snap closed.|
|defaultHeight||Height in px||The height that the player will open to by default.|
|initialState||"open" or "closed"||The player will load expanded or collapsed|
|embedStyle||"overlay" or "embed"||"overlay": player will cover other page content|
"embed": player will push down other page content