How to fetch the subtitle text at a specific timestamp in HTML5 video player?

Question

So Ive this html5 video player code which plays video and loads subtitle. It also attempts to show the subtitle at an exact timestamp, so that the text at that timestamp could be read into a variable and submitted to a database. THE JSFIDDLE

But I want to display the subtitle text dynamically so that as soon as I press submit, the subtitle at that particular timestamp gets available to be saved in a database, in a frame somewhat like this:-

<p>Subtitle_tstamp: <span id="s_tstamp"></span></p>
<input name="s_tstamp" id="hidden-tstamp" type="hidden">
<p class="submit">
<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
<p>

I can see "hidden-tstamp: ", but subtitle isnt displaying in front of it. I want it to be displayed under the video in front of "hidden-tstamp: " like in this tutorial . And when I click submit, the subtitle text at that time should get passed/saved into a variable for further processing.

Answer 1

The <track> element has thecuechange event. This event fires every time whenever a subtitle has been changed. That means when a text shows and when a text disappears.

Select your <track> and <input> element, listen for the cuechange event and based on the current text that is showing update the value of your input .

In the event handler check if there are any activeCues . These are stored in an array. So if the array is empty no text is showing, if it is not select the first key and select the text property of it. That is the current subtitle. Set the <input> ' value to the text property.

All of the data of about the track is stored in the event.target.track property of the cuechange event.

// Select the track and the input element.
const video = document.getElementById('my_video_1');
const track = video.querySelector('track');
const stamp = document.getElementById('hidden-tstamp');

// Listen for the cuechange event.
// Check if there are active cues and use them as value.
track.addEventListener('cuechange', event => {
  const currentCues = event.target.track.activeCues;
  if (currentCues.length) {
    stamp.value = currentCues[0].text;
  } else {
    stamp.value = '';
  }
});