Interactive Transcripts

from CaptionBox

Engage, Educate, Experience 

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.10
June 26,2014


Using Wordpress? Our plugin is super simple to use.


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 in action
Online video is transforming the way we learn, communicate, collaborate, and consume information everyday. Meet John, his company is leveraging videos for online learning. As the number of courses grows, finding and delivering relevant content to his users is becoming more difficult. On top of that, he is also concerned with accessibility regulations.

John knows that the best way to make his videos discoverable, and accessible is through transcription. Initially, John hired in-house employees to transcribe all their videos. The results were good. But managing a growing team became costly and distracting. So John tried a company that used automated speech to text recognition to reduce cost, but the quality was inadequate.

About 3 out of every 10 words were wrong, which they required manual editing. He then tried a company that leveraged crowd sourcing. But the transcribers were anonymous, and couldn't be properly trained to address his specific business requirement. There had to be a smarter  way to deliver accurate and fast transcription at scale.

But, how? Introducing SpeakerText, the most advanced and scalable solution  to make your video accessible, discoverable, and actionable. SpeakerText combines innovative technology with talented and well trained people to help organizations improve accessibility, and maximize ROI by making content more engaging and discoverable.

Inspired by the efficiency of Henry Ford's assembly line, SpeakerText is literally built as a factory in the cloud, with production lines custom built for different applications. Each video is sliced into a 10 second clips, which are intelligently dispatched to a curated and trained workforce of transcription professionals.

The clips are then compiled into one minute segments for quality review. And once the entire transcript is completed, it's reviewed again to assure high accuracy. This parallel processing provides an ultra-fast, accurate, and affordable transcription in captioning solutions.  Interactive transcripts bring your video to life.

Now, your video can be discovered by search engines. Every word is searchable, and people can jump from the specific segment and even share quotes from the video as a clip. Imagine the possibilities when you combine powerful technology in a managed workforce of thousands dedicated to improving your company's results.  

Contact the SpeakerText transcription specialists, today.

Documentation & Guides

Examples

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


Installation Instruction

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


Platform-Specific Notes

Platform ID: 1

Video ID: The value of the v= query string parameter in the YouTube video URL.

Demo: See YouTube in Action

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: 4

Video ID: The character string after http://blip.tv/play/ in the standard embed code.

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: 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

Embedding a Wistia video using an iFrame

<iframe src="http://fast.wistia.net/embed/iframe/{media_id}" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" id="wistia_{media_id}" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="360"></iframe>

<script src="http://fast.wistia.net/assets/external/E-v1.js" async></script>

Media ID: {media_id} is a placeholder to be replaced by actual value. Media ID is the alphanumeric string in the standard embed code located at the very end.

Demo: See Wistia in Action

Platform ID: 11

<script src="http://www.kaltura.com/p/#{partner_id}/sp/#{partner_id}#{100}/embedIframeJs/uiconf_id/26431521/partner_id/#{partner_id}?autoembed=true&entry_id=#{video_id}&playerId=kaltura_player&width=400&height=330"></script>

Video ID: Can be found in your Kaltura Management Console. This is the Media Entry ID for your video/audio file.

Partner ID: Also available in your Kaltura Management Console under Settings -> Integration Settings.

Demo: See Kaltura in Action


Customization

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

         
KeyValueDescription
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