DHager/transcribed_html5_video.html

## transcribed_html5_video.html
<html>
<head>
    <script type="text/javascript" src="jquery-1.11.0.js"></script>
    <style>
    #transcript{
        background-color:#F0F0F0;
        min-height:50px;
        padding:5px;
    }
    #transcript span.active {
        background-color:#FFFFAA;
    }
    #transcript span:hover {
        background-color:#FFBBBB;
        cursor:pointer;
    }
    </style>
</head>

<body>
    <h2>Sample Module - Part 1</h2>
    <div id="videoContainer">
        <video id="video" controls="controls" style="width:640px;height:360px;">
            <source src="presentation.mp4" type='video/mp4' />
            <track src="presentation.vtt" label="English subtitles" kind="subtitles" srclang="en" default></track>
        </video>
    </div>

    <h2>Interactive Transcript</h2>
    <div id="transcript">
    </div>

    <script type="text/javascript">


    /**
    Author: Darien Hager
    Made for Seattle Startup B2B Weekend
    */
    $(document).ready(function(){
        $("#transcript").width($("#video").width());

        $("#transcript").on('click', 'span', '', function(evt) {
            var target = $(evt.currentTarget);
            var time = target.data('time');
            selectTranscript(time);
            jumpToTime(time);
        });


        var selectTranscript = function(time){
            $("#transcript span").removeClass("active");
            if(time == null){
                return;
            }
            var block = $("#transcript span[data-time='"+time+"']");
            block.addClass("active");
        };
        var jumpToTime = function(time){
            var v = $("#video")[0];
            v.currentTime = time;
        };
        var appendTranscript = function(text, time){
            $("#transcript").append("<span data-time='" + time + "'>" + text + "</span> ");
        };

        var videoDom = $("video")[0];
        var originalHeight = $("#video").height();
        var track = videoDom.textTracks[0];
        track.mode = 'showing';

        videoDom.addEventListener("loadedmetadata", function() {
            $.each(track.cues, function(i, cue) {
                appendTranscript(cue.text, cue.startTime);
            });
        });
        track.addEventListener('cuechange', function(evt){
            var cues = evt.srcElement.activeCues;
            if(cues.length==0){
                return;
            }
            var time = cues[0].startTime;
            selectTranscript(time)
        });
        videoDom.addEventListener('ended',function(){
           selectTranscript(null);
        });
    });
    </script>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="jquery-1.11.0.js"></script>
	<style>
	#transcript{
	background-color:#F0F0F0;
	min-height:50px;
	padding:5px;
	}
	#transcript span.active {
	background-color:#FFFFAA;
	}
	#transcript span:hover {
	background-color:#FFBBBB;
	cursor:pointer;
	}
	</style>
	</head>

	<body>
	<h2>Sample Module - Part 1</h2>
	<div id="videoContainer">
	<video id="video" controls="controls" style="width:640px;height:360px;">
	<source src="presentation.mp4" type='video/mp4' />
	<track src="presentation.vtt" label="English subtitles" kind="subtitles" srclang="en" default></track>
	</video>
	</div>

	<h2>Interactive Transcript</h2>
	<div id="transcript">
	</div>

	<script type="text/javascript">


	/**
	Author: Darien Hager
	Made for Seattle Startup B2B Weekend
	*/
	$(document).ready(function(){
	$("#transcript").width($("#video").width());

	$("#transcript").on('click', 'span', '', function(evt) {
	var target = $(evt.currentTarget);
	var time = target.data('time');
	selectTranscript(time);
	jumpToTime(time);
	});


	var selectTranscript = function(time){
	$("#transcript span").removeClass("active");
	if(time == null){
	return;
	}
	var block = $("#transcript span[data-time='"+time+"']");
	block.addClass("active");
	};
	var jumpToTime = function(time){
	var v = $("#video")[0];
	v.currentTime = time;
	};
	var appendTranscript = function(text, time){
	$("#transcript").append("<span data-time='" + time + "'>" + text + "</span> ");
	};

	var videoDom = $("video")[0];
	var originalHeight = $("#video").height();
	var track = videoDom.textTracks[0];
	track.mode = 'showing';

	videoDom.addEventListener("loadedmetadata", function() {
	$.each(track.cues, function(i, cue) {
	appendTranscript(cue.text, cue.startTime);
	});
	});
	track.addEventListener('cuechange', function(evt){
	var cues = evt.srcElement.activeCues;
	if(cues.length==0){
	return;
	}
	var time = cues[0].startTime;
	selectTranscript(time)
	});
	videoDom.addEventListener('ended',function(){
	selectTranscript(null);
	});
	});
	</script>
	</body>
	</html>