Log In to SpeakerText

CaptionBox: Interactive Transcripts

Let's talk about the Internet.

The Internet started off as a web of text documents, but as it matured and technology advanced, people started using it to share pictures, and music, and videos.

But search engines like Google can still only see and understand text.

If you're someone who is serious about putting video on the Web, this is a big problem for you.

SpeakerText is a new service for video publishers that turns video into text and puts your videos on Google's radar.

SpeakerText detects all the videos on your site and loads an interactive transcript plugin––called the SpeakerBar––beneath each video that's been transcribed.

The SpeakerBar shows you the full video text and automatically highlights each sentence as the video plays.

You can use the SpeakerBar to scroll through the full transcript and click on the text to skip backwards and forwards through the video.

You can even use the SpeakerBar to search for quotes within the video itself.

The SpeakerBar makes it easy for people to share specific moments from inside the videos on your website.

If you copy a quote from the SpeakerBar and paste it into a rich text editor like a blog post or an email, the quote becomes a link--called a QuoteLink––that takes people back to your website and starts playing the video at the time cue where the quote appeared.

People can also use the SpeakerBar to share the quotes they like and link back to them on social networking sites like Facebook and Twitter.

SpeakerText is easy to install and works with popular publishing platforms like Wordpress, and video sharing sites like YouTube, Blip.tv and Brightcove.

To learn more, visit SpeakerText.com

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.

Download

Version 1.2.9
October 25, 2011

Requires jQuery v1.3+

Using Wordpress? Our plugin is super simple.

Your use of CaptionBox is governed by the SpeakerText Terms of Service. The license terms in the Terms of Service include important limitations on your use of the software. Please review them carefully. By downloading, accessing, or using the software, you agree to abide by the license terms in the Terms of Service.

* CaptionBox is a legacy product that SpeakerText is only able to support for enterprise clients who transcribe over 10hrs per month. Questions about invoicing, bulk purchases, or enterprise discounts? Email sales@speakertext.com.

Examples

Check out CaptionBox in action on these sites (you may have to scroll down the page):

Installation Instructions

Installing CaptionBox will require a developer.

Implementing CaptionBox is a three-step process:

  1. Install jQuery on your site, if you don't already use it.
  2. Loading the CaptionBox JavaScript and CSS files in the page header
  3. 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.

What's Included?

When you download and unzip the CaptionBox package, you should see these files:

  • jquery.captionbox.js - main plugin javascript code
  • sha1.js - javascript implementation of SHA1 hashing function (for JW player)
  • swfobject.js - javascript code for working with Flash embeds
  • froogaloop.min.js - javascript library for interfacing with the Vimeo player
  • soundcloud.player.api.js - javascript library for interfacing with the SoundCloud player
  • captionbox.css - CSS styling
  • img/ - folder of sprited images for styling

Installation

Installing jQuery

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:

<script src='/jquery-1.5.2.min.js' type='text/javascript'></script>

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 /cbox/.

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" />
<script src="/cbox/jquery.captionbox.js" type="text/javascript"></script>

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.

Loading Transcripts

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:

PlatformID-VideoID.html

PlatformID: Unique Identifier for each platform. See the Platform-Specific Notes.
VideoID: Unique Identifier for each video. See the Platform-Specific Notes.

Sample Video

If you want to try out your CaptionBox install before you purchase any transcripts, you can use our sample video and transcript.

Platform-Specific Notes

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 the @videoPlayer param in the embed code.

Each video player that you want to use with CaptionBox must have the Javascript API enabled. From the Publishing tab of your Brightcove Console, bring up the settings dialog for a player. Choose "Enable ActionScript/Javascript APIs" under the Global tab.

You must use the Javascript embed code, also known as the “Website” publishing code. We recommend that you replace the line referencing BrightcoveExperiences.js to read:
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences_all.js"></script>

This will load the Brightcove Player Javascript API. If you do not do this, CaptionBox will try to load the necessary files.

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 callback=st_ooyala_callback to the javascript query. For example:

<script src="http://player.ooyala.com/player.js?width=640&height=360&embedCode=pnNm9aTH&callback=st_ooyala_callback"></script>...

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 at http://example.net/videos/show.php?secret=abc123, we will hash the string '/videos/show.php?secret=abc123' and 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 data-stid="STtranscriptEmbed_7_abcdefghijklmnop123456789".

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.

Customization

CaptionBox will read initialization settings from a STglobalSettings javascript hash. The keys and values that you can use are:

Key Value Description
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