summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
Diffstat (limited to 'templates')
-rw-r--r--templates/page.tmpl44
1 files changed, 44 insertions, 0 deletions
diff --git a/templates/page.tmpl b/templates/page.tmpl
index d6cd9e3e..f93afdfc 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -309,5 +309,49 @@ transcriptDiv.appendChild(transcriptLink)
}
// @license-end
</script>
+<script>
+ // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0
+ // Copyright (c) 2021 Sacha Chua
+ // Based on http://thenewcode.com/977/Create-Interactive-HTML5-Video-with-WebVTT-Chapters
+ function displayChapters(trackElement){
+ console.log(trackElement);
+ if ((trackElement) && (textTrack = trackElement.track)){
+ if (textTrack.kind === "chapters"){
+ textTrack.mode = 'hidden';
+ var video = trackElement.closest('video');
+ var chapterList = trackElement.closest('.video-card').querySelector('ol');
+ for (var i = 0; i < textTrack.cues.length; ++i) {
+ cue = textTrack.cues[i],
+ chapterName = cue.text,
+ start = cue.startTime,
+ chapter = document.createElement("li");
+ chapter.setAttribute('data-start', start);
+ date = new Date(0);
+ date.setSeconds(cue.startTime);
+ var chapterDescription = document.createTextNode(date.toISOString().substr(14, 5) + ' ' + cue.text);
+ chapter.appendChild(chapterDescription);
+ //locationList.insertBefore(newLocale);
+ chapter.addEventListener("click",
+ function() {
+ video.currentTime = this.getAttribute('data-start');
+ },false);
+ chapterList.append(chapter);
+ }
+ textTrack.addEventListener("cuechange",
+ function() {
+ var currentLocation = this.activeCues[0].startTime;
+ if (chapter = chapterList.querySelector('data-start=[' + currentLocation + ']')) {
+ var locations = [].slice.call(chapterList.querySelectorAll("li"));
+ for (var i = 0; i < locations.length; ++i) {
+ locations[i].classList.remove("current");
+ }
+ chapter.classList.add("current");
+ }
+ },false);
+ }
+ }
+ }
+ // @license-end
+</script>
</body>
</html>