summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
authorSacha Chua <sacha@sachachua.com>2021-12-12 01:24:30 -0500
committerSacha Chua <sacha@sachachua.com>2021-12-12 01:24:30 -0500
commite01eb580ac2040e34fc92a1da5f5156c0774ba8c (patch)
treeb427bae1f39f3de2fb0406f0c84177b90d8e7e8a /templates
parentfa0bcb1e1f11799dfd20ee6f8e02dc31dc5566f5 (diff)
downloademacsconf-wiki-e01eb580ac2040e34fc92a1da5f5156c0774ba8c.tar.xz
emacsconf-wiki-e01eb580ac2040e34fc92a1da5f5156c0774ba8c.zip
Use simpler markup for chapters
Diffstat (limited to 'templates')
-rw-r--r--templates/chapters.md3
-rw-r--r--templates/page.tmpl111
-rw-r--r--templates/vid.md6
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>