Added subtitles/captions to video player

This commit is contained in:
David Ball 2024-04-15 05:37:52 -04:00
parent 98008527db
commit 9947355d32
2 changed files with 15 additions and 2 deletions

View File

@ -104,6 +104,11 @@ glob.globSync('Russell_County/Board_of_Supervisors/YouTube_Archive/**/*.info.jso
matchBase: true,
follow: true,
}).pop();
let subtitleURL = glob.globSync("*.en.vtt", {
cwd: path.join(__dirname, '..', 'public', directory),
matchBase: true,
follow: true,
}).pop();
const route = encodeURI(expressRoutePathFromFilePath(filePath));
let paths = filePath.substring(0, filePath.lastIndexOf(path.sep) > 0 ? filePath.lastIndexOf(path.sep) : filePath.length-1).split(path.sep);
paths = paths.map((name, idx, aPaths) => {
@ -117,7 +122,7 @@ glob.globSync('Russell_County/Board_of_Supervisors/YouTube_Archive/**/*.info.jso
console.log(`Setting route for ${route}`);
app.get(route, async (req, res) => {
let info = require(fullFilePath);
const renderData = { route, filePath, fullFilePath, req, paths, directory, videoURL, info };
const renderData = { route, filePath, fullFilePath, req, paths, directory, videoURL, subtitleURL, info };
res.render("video-player", { h: helpers, ...renderData });
});
});

View File

@ -34,7 +34,15 @@
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
<h1 class="title"><%= (typeof info.title !== 'undefined') ? info.title : "" %> </h1>
<video class="object-fit-fill ratio ratio-16x9" src="<%-videoURL%>" controls allowfullscreen></video>
<video class="object-fit-fill ratio ratio-16x9" controls allowfullscreen>
<source src="<%-videoURL%>">
<track
label="English"
kind="subtitles"
srclang="en"
src="<%-subtitleURL%>"
default />
</video>
</div>
</div>
<% } %>