如何在不同的时间点向视频添加多个注释/标签？

问题描述

在我的网站上，我希望用户上载视频并在播放期间的不同时间点添加多个注释。我在YouTube上看到了此功能，用户可以在其中进入视频中的特定时间点。就像视频索引一样。

这是否可以通过JavaScript或任何其他机制实现？我尝试使用“视频标记”，“标记视频”，“注释视频”一词进行在线搜索，但找不到从何处开始的有用方向。

赞赏有关如何完成此任务的任何指导或思想。

解决方法

您可以使用HTML5MediaElement的currentTime属性来查找视频中的特定时间：

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

您还可以使用它来获取当前时间，这样您就可以执行以下操作：

• 在视频控件中添加“暂停和注释按钮”
• 暂停视频，获取当前时间，并允许用户在按下按钮时输入注释
• 存储笔记和时间
• 在播放其他视频时，请包括一列便笺，并且当用户直接选择一个搜索到视频中的时间点时

下面的代码片段显示了使用按钮和currentTime属性跳转到视频中的不同位置的情况：

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>