Last active
April 30, 2019 21:28
-
-
Save DHager/2e01f0b82e5d3f5a39e6 to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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