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.

Clickable Transcript Screenshot
Clickable Transcript Screenshot

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.

XML to HTML Caption Converter
XML to HTML Caption Converter

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);
	});
});



Posted

in

,

by

Tags: