tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 20:00:15 +00:00
Code Issues Projects Releases Wiki Activity

Added subtitle support to JS player. (#168)

Browse Source
This commit is contained in:
Nathan DeTar 2022-02-10 17:53:09 -08:00 committed by GitHub
parent 3efa388b5a
commit 656a0c7327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
tubearchivist/static/script.js
View File

@ -294,6 +294,14 @@ function createPlayer(button) {
var videoThumbUrl = videoData.vid_thumb_url; var videoThumbUrl = videoData.vid_thumb_url;
var videoName = videoData.title; var videoName = videoData.title;
var subtitles = '';
var videoSubtitles = videoData.subtitles; // Array of subtitles
if (typeof(videoSubtitles) != 'undefined') {
for (var i = 0; i < videoSubtitles.length; i++) {
subtitles += `<track label="${videoSubtitles[i].name}" kind="subtitles" srclang="${videoSubtitles[i].lang}" src="${videoSubtitles[i].media_url}">`;
}
}
var playlist = ''; var playlist = '';
var videoPlaylists = videoData.playlist; // Array of playlists the video is in var videoPlaylists = videoData.playlist; // Array of playlists the video is in
if (typeof(videoPlaylists) != 'undefined') { if (typeof(videoPlaylists) != 'undefined') {
@ -344,7 +352,10 @@ function createPlayer(button) {
const markup = ` const markup = `
<div class="video-player" data-id="${videoId}"> <div class="video-player" data-id="${videoId}">
<video src="${videoUrl}#t=${videoProgress}" poster="${videoThumbUrl}" ontimeupdate="onVideoProgress('${videoId}')" controls autoplay type='video/mp4' width="100%" playsinline id="video-item"></video> <video poster="${videoThumbUrl}" ontimeupdate="onVideoProgress('${videoId}')" controls autoplay width="100%" playsinline id="video-item">
<source src="${videoUrl}#t=${videoProgress}" type="video/mp4">
${subtitles}
</video>
<div class="player-title boxed-content"> <div class="player-title boxed-content">
<img class="close-button" src="/static/img/icon-close.svg" alt="close-icon" data="${videoId}" onclick="removePlayer()" title="Close player"> <img class="close-button" src="/static/img/icon-close.svg" alt="close-icon" data="${videoId}" onclick="removePlayer()" title="Close player">
<img src="/static/img/icon-${playerState}.svg" alt="${playerState}-icon" id="${videoId}" onclick="is${watchedFunction}(this.id)" class="${playerState}-icon" title="Mark as ${watchedFunction}"> <img src="/static/img/icon-${playerState}.svg" alt="${playerState}-icon" id="${videoId}" onclick="is${watchedFunction}(this.id)" class="${playerState}-icon" title="Mark as ${watchedFunction}">