Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Something I whipped up for a Seattle Startup Weekend event, provides a "transcript" of a video based on its closed-captioning data, and allows you to use the text to seek in the video.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment