How to add multiple notes/tags to a video at different time points?

Question

On my website, I want users to upload a video and add multiple notes during its playtime at different time points. I have seen this feature on YouTube where users can jump into a certain time point in the video. Like a video index.

Is this achievable through JavaScript or any other mechanism? I try to search online with the term "video tagging", "labeling videos", "annotating videos" but couldn't find useful direction on where to start.

Appreciate any guidance or thought on how to achieve this task.

Answer 1

You can use the currentTime property of HTML5MediaElement to seek to a particular time in a video:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

You can also use it to get the current time so you could do something like:

• Add a 'Pause and Note Button' to your video controls
• Pause video, get current time and allow user enter a note when the button is hit
• Store the note and the time
• When playing back the video for others include a list of notes and when user selects one seek directly to the time point in the video

The below snippet show jumping to different places in a video using buttons and the currentTime property:

var vid1 = document.getElementById("MyVid1");
var btn1 = document.getElementById("MyBtn1");
var btn2 = document.getElementById("MyBtn2");

vid1.onloadeddata = function() {
    vid1.pause()
    vid1.currentTime = 110;
    vid1.play()
};

btn1.addEventListener("click", function() {
     vid1.pause()
     vid1.currentTime = 210;
     vid1.play()
});

btn2.addEventListener("click", function() {
     vid1.pause()
     vid1.currentTime = 110;
     vid1.play()
});

<video id="MyVid1" width="320" height="176" controls autoplay loop muted playsinline>
  <source   src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

<button id="MyBtn1" type="button">Jump to 210</button>

<button id="MyBtn2" type="button">Jump to 110</button>