Transcript Widget Embed

This functionality allows Vidcaster videos that are embedded in non-Vidcaster sites to also include an interactive transcription widget on the same page. Here is a self-explanatory example that can be placed in any HTML file. Comments are in-lined for clarity:

<!-- BEGIN: Necessary imports -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>		<!-- This is necessary only if jQuery isn't already loaded -->
<script src="http://arigato.vidcaster.com/media/js/theme-scripts/transcription.js"></script>		<!-- Note that "arigato.vidcaster.com" is the same domain name as the domain in the src attribute of the Vidcaster iframe -->
<link rel="stylesheet" type="text/css" href="http://arigato.vidcaster.com/media/css/transcription.css"></head>		<!-- Note that "arigato.vidcaster.com" is the same domain name as the domain in the src attribute of the Vidcaster iframe -->
<!-- END: Necessary imports -->
 
<!-- Vidcaster Player Iframe -->
<iframe id="video-player" title="tv.vidcaster.com" width="640" height="360" src="http://arigato.vidcaster.com/player/g7AR/language_en/autoplay/" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

<!-- BEGIN: Transcript Section -->
<section class="transcript">
<div id="transcript">
	<div id="transcript-wrap" class="">
		<div id="transcript-expand-button"><a href="#">Expand/collapse<span></span></a></div>
		<div id="transcript-text">
			<p>		<!-- Note the numerical IDs; they are used to represent where the transcript text is to occur in milliseconds -->
				<span id="0" class="">Dogs and cats, </span>
				<span id="6000" class="">living together, </span>
				<span id="10200">mass hysteria </span>
			</p>
		</div>
	</div>
</div>
</section>
<!-- END: Transcript Section -->