diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/chapters.md | 3 | ||||
| -rw-r--r-- | templates/page.tmpl | 111 | ||||
| -rw-r--r-- | templates/vid.md | 6 |
3 files changed, 69 insertions, 51 deletions
diff --git a/templates/chapters.md b/templates/chapters.md new file mode 100644 index 00000000..ec06bf02 --- /dev/null +++ b/templates/chapters.md @@ -0,0 +1,3 @@ +<pre class="chapters" data-target="<TMPL_VAR vidid>"> +<TMPL_VAR data> +</pre> diff --git a/templates/page.tmpl b/templates/page.tmpl index 65d12e3b..11606228 100644 --- a/templates/page.tmpl +++ b/templates/page.tmpl @@ -76,6 +76,17 @@ }, 0); } + function handleSubtitleClick(event) { + var video = event.target.attributes['data-video'].value; + var start = event.target.attributes['data-start'].value + var videoElem = document.getElementById(video); + if (videoElem) { + videoElem.currentTime = parseSeconds(start); + videoElem.scrollIntoView(); + } + event.preventDefault(); + } + window.onload = function initScript() { mainVideo = document.getElementById("mainVideo"); qnaVideo = document.getElementById("qnaVideo"); @@ -88,16 +99,6 @@ video.currentTime = parseSeconds(this.innerText) }; } - handleSubtitleClick = function(event) { - video = event.target.attributes['data-video'].value; - start = event.target.attributes['data-start'].value - videoElem = document.getElementById(video); - if (videoElem) { - videoElem.currentTime = parseSeconds(start); - videoElem.scrollIntoView(); - } - } - let subtitles = document.getElementsByClassName('subtitle'); for (let i = 0; i < subtitles.length; i++) { subtitles[i].onclick = handleSubtitleClick; @@ -315,48 +316,62 @@ transcriptDiv.appendChild(transcriptLink) <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){ - if ((trackElement) && (textTrack = trackElement.track)){ - if (textTrack.kind === "chapters"){ - textTrack.mode = 'hidden'; - var video = trackElement.closest('video'); - var chapterList = trackElement.closest('.vid').querySelector('ol'); - chapterList.innerHTML = ''; - 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); + function displayChapters(elem) { + var i; + var chapter; + var list = document.createElement('ol'); + list.setAttribute('class', 'chapters'); + var link; + var target = elem.getAttribute('data-target'); + var video = document.getElementById(target); + var track; + if (video) { + track = video.addTextTrack('chapters'); + track.mode = 'hidden'; + } + var chapters = elem.textContent.split(/[ \t]*\n+[ \t]*/).forEach(function(line) { + var m = (line.match(/^(([0-9]+:)?[0-9]+:[0-9]+)[ \t]+(.*)/)); + if (m) { + var start = m[1]; + var text = m[3]; + chapter = document.createElement('li'); + link = document.createElement('a'); + link.setAttribute('href', '#'); + link.setAttribute('data-video', target); + link.setAttribute('data-start', start); + link.setAttribute('data-start-s', parseSeconds(start)); + link.appendChild(document.createTextNode(m[1] + ' ' + text)); + link.onclick = handleSubtitleClick; + chapter.appendChild(link); + list.appendChild(chapter); + if (track) { + var time = parseSeconds(start); + if (track.cues.length > 0) { + track.cues[track.cues.length - 1].endTime = time; + } + track.addCue(new VTTCue(time, time, text)); } - textTrack.addEventListener("cuechange", - function() { - if (!this.activeCues[0]) return; - var currentLocation = this.activeCues[0].startTime; - if (chapter = chapterList.querySelector('li[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); } + }) + if (track && track.cues.length > 0) { + video.addEventListener('durationchange', function() { + track.cues[track.cues.length - 1].endTime = video.duration; + }); + track.addEventListener('cuechange', function() { + if (!this.activeCues[0]) return; + if (list.querySelector('.current')) { + list.querySelector('.current').className = ''; + } + var chapter; + if (chapter = list.querySelector('a[data-start-s="' + this.activeCues[0].startTime + '"]')) { + chapter.parentNode.className = 'current'; + } + }); } + elem.parentNode.replaceChild(list, elem); } - - document.querySelectorAll('track[kind=chapters]').forEach(function(e) { displayChapters(e); e.addEventListener('load', function() { displayChapters(e); });}); + + document.querySelectorAll('pre.chapters').forEach(displayChapters); // @license-end </script> diff --git a/templates/vid.md b/templates/vid.md index b50349c4..2a48e3a0 100644 --- a/templates/vid.md +++ b/templates/vid.md @@ -1,6 +1,6 @@ <div class="vid" data-id="<TMPL_VAR vidid>"> -<video controls preload="metadata" id="<TMPL_VAR vidid>"> -<source src="<TMPL_VAR src>" type="<TMPL_VAR type>" /> +<video controls preload="metadata" id="<TMPL_VAR vidid>" poster="<TMPL_VAR poster>"> +<source src="<TMPL_VAR src>" type="<TMPL_VAR type>" /><TMPL_VAR captions> <TMPL_IF subtitles> <track label="English" kind="captions" srclang="en" src="<TMPL_VAR subtitles>" default /> </TMPL_IF> @@ -8,6 +8,6 @@ </video> <div class="resources"> <a href="<TMPL_VAR src>"><TMPL_IF download><TMPL_VAR download><TMPL_ELSE>Download video</TMPL_IF><TMPL_IF duration>, <TMPL_VAR duration></TMPL_IF><TMPL_IF size>, <TMPL_VAR size></TMPL_IF></a><br /> - <TMPL_IF subtitles><a href="<TMPL_VAR subtitles>">Download captions</a><br /></TMPL_IF> + <TMPL_IF subtitles><a href="<TMPL_VAR subtitles>">Download captions</a><br /></TMPL_IF><TMPL_VAR other_resources> </div> </div> |