JSFiddle - React, Tailwind, and code Playground
CSS
.subtitleContainer {
background: #fff;
}
.js-subtitles-highlight {
background: #FF0;
}
JavaScript
//Creating elements
var transcriptContainer = document.createElement('div'),
subtitleContainer = document.createElement('div'),
selectLanguageContainer = document.createElement('div'),
selectLanguage = document.createElement('select'),
defaultOption = document.createElement('option'),
englishOption = document.createElement('option'),
spanishOption = document.createElement('option'),
videoContainer = document.createElement('div'),
video = document.createElement('video'),
source = document.createElement('source'),
englishTrack = document.createElement('track'),
spanishTrack = document.createElement('track')
//Logic
function currentVideoTime(subtitleStartTimes) {
video.addEventListener('timeupdate', function() {
return highlightSubtitles(subtitleStartTimes)
})
}
function highlightSubtitles(subtitleStartTimes) {
var transcriptHTMLParagraphs = subtitleContainer.querySelectorAll('p');
var currentSubtitleTime = Math.max.apply(Math, subtitleStartTimes.filter(function(startTime) {
return startTime <= video.currentTime
}));
if (currentSubtitleTime !== -1) {
var currentSubtitles = transcriptHTMLParagraphs[subtitleStartTimes.indexOf(currentSubtitleTime)];
var previousSubtitle = document.getElementsByClassName('js-subtitles-highlight')[0];
if (previousSubtitle) {
previousSubtitle.className = previousSubtitle.className.replace('js-subtitles-highlight', '');
}
if (currentSubtitles) {
currentSubtitles.className += ' js-subtitles-highlight';
}
}
}
function listenForTrackLoad(video) {
video.addEventListener('load', function(e) {
// activeCues returns null when the track isn't loaded
if (!e.target.track.activeCues) {
// If cues aren't loaded, set mode to hidden, wait, and try again.
// But don't hide an active track. In that case, just wait and try again.
if (e.target.track.mode !== 'showing') {
e.target.track.mode = 'hidden';
}
...