JW Media Player Clickable Transcript

Context:

This code controls the media player (http://www.jwplayer.com/) via javascript API.  The inspiration/idea came from Philip Hutchinson’s Easy Captions code (http://pipwerks.com/2010/06/07/for-your-reading-pleasure-easycaptions/) which provides an incredibly elegant solution to captions/transcripts embedded as html (instead of being dynamically loaded).

This code basically serves as a remote control to find a specific spot of a video or audio file when you click on different parts of the transcript.  The code is used as an external trigger for the media player using <span> tags to scrub the playback to a specific timecode.  When the <span> tags are used to match up a text transcript to a audio/video presentation, it becomes a simple but powerful and effective tool that gives the user control over how they can consume the media.

This provides a better experience for all users, but it especially helps screen readers parse content to make it more useful for visually impaired users.

HTML code sample:

		<div class="clickAudioTranscript" data-playerid="video3">
			<p>
				<span data-begin="0">Niederman v. Brodsky, 261 A.2d 84 (Pa. 1970) </span><br />
				<span data-begin="8">In this case, the parties are Niederman and Brodsky. </span><br />
				<span data-begin="12">Is this case a state case or a federal case? </span><span data-begin="16">You have two signs that it is a state case. </span><span data-begin="20">One is that within the parentheses you see PA, which stands for Pennsylvania,</span><span data-begin="24"> so that tells you that it is a state case. </span><span data-begin="28">But even if you do not know all the states and their abbreviations,</span><span data-begin="32"> you have another sign that it is a state case. </span><span data-begin="36">In the place for the name of the reporter, you see A.2d. </span><span data-begin="40">If it were a federal case, you would see the letter F, standing for federal. </span><span data-begin="46">It might be F. Supp., which is the Federal Supplement, </span><span data-begin="50">containing federal district court cases, </span><span data-begin="53">or it might be F. 2d, which means the second series of the federal reporter, containing cases from the federal courts of appeals, </span><span data-begin="62">or other versions of federal reporters containing the letter F.</span><span data-begin="67"> But instead of F you see A.</span><span data-begin="69"> This means that it is the Atlantic reporter. </span><span data-begin="73">You will see other letters for other geographic references, but without even reading the case you know that it is a case in a state court. </span><br />
				<span data-begin="81">So here we have the case of Niederman v. Brodsky,</span><span data-begin="85"> reported in volume 261 of Atlantic 2d, </span><span data-begin="88">the second series of the Atlantic reporter, beginning at page 84. </span><span data-begin="93">The case was decided by the Pennsylvania Supreme Court in 1970.</span></p>
		</div>
		<div class="clickAudioPlayer" id="video3"> 
		</div>
		<script type="text/javascript">
			jwplayer('video3').setup({
				'id': 'video3',
				'flashplayer': 'https://courses.worldcampus.psu.edu/public/multimedia/videoPlayer/player.swf',
				'width': '640',
				'height': '24',
				'controlbar': 'bottom',
				'streamer':'rtmp://wc-fms.outreach.psu.edu/wc/',
				'file': 'COURSES/LLMLW/LLMLW903/LLMLW903Example1Niederman.mp3'
			})
		</script><!--VIDEO EMBED CODE ENDS HERE-->

Javascript code sample:

$(document).ready(function() {

	$('.playAudio').click(function() {
		var jwPlayerID = $(this).attr('data-playerID');
		jwplayer(jwPlayerID).seek('0');
	});
	$('.clickAudioTranscript span').bind('click', function() {
		var jwPlayerID = $(this).parents('.clickAudioTranscript').attr('data-playerID');
		jwplayer(jwPlayerID).seek($(this).attr('data-begin'));
		return false;
	});
	$('.clickAudioTranscript span').bind('mouseenter', function() {
		$(this).css('background','yellow');
	});
	$('.clickAudioTranscript span').bind('mouseleave', function() {
		$(this).css('background','none');
	});
});

Translator

The clickable transcript code is useful, but does not adhere to captioning standards such as timecoded XML.  The following tool is a simple converter that takes timecoded XML as input and outputs html with embedded <span> tags with the needed attributes for use with my clickable transcript code above.

Javascript code sample:

$(document).ready(function() {
	$('#translateButton').click(function() {
		var inputText = $($('#captionInput').val());
		var outputText = "";
		inputText.find('p').each(function(index) {
			var beginSec = parseInt($(this).attr('begin').split(':')[0]*360)
				+ parseInt($(this).attr('begin').split(':')[1]*60)
				+ parseInt($(this).attr('begin').split(':')[2]);
			var endSec = parseInt($(this).attr('end').split(':')[0]*360)
				+ parseInt($(this).attr('end').split(':')[1]*60)
				+ parseInt($(this).attr('end').split(':')[2]);
			outputText +=''
				+ $(this).text() + '\n';
		});
		$('#transcriptOutput').html(outputText);
	});
});