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

Question

在我的网站上，我希望用户上传一个视频，并在其播放时间添加多个音符在不同的时间点。我在YouTube上看到了这个功能，用户可以跳到视频中的某个时间点。就像视频索引。

这是通过JavaScript或任何其他机制实现的吗？我试图在网上搜索“视频标记”，“标签视频”，“注释视频”，但没有找到有用的方向，从哪里开始。

感谢任何关于如何完成这项任务的指导或想法。

Answer 1

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

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

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

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

F 214中的时间点

下面的片段显示了使用按钮和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>

​