diff options
Diffstat (limited to '')
| -rw-r--r-- | local.css | 1 | ||||
| -rw-r--r-- | templates/page.tmpl | 44 |
2 files changed, 45 insertions, 0 deletions
@@ -83,3 +83,4 @@ summary h1 { display: inline-block } .speaker-details { margin: 0 } .vid .resources { margin-bottom: -1em; } + ol.chapters { list-style-type: none; padding: 0; } 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> |