如何在不同时间点向视频添加多个notes/tags？

Question

在我的网站上，我希望用户上传视频并在播放期间的不同时间点添加多个注释。我在 YouTube 上看到过这个功能，用户可以跳转到视频中的某个时间点。喜欢视频索引。

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

感谢任何有关如何完成此任务的指导或想法。

Answer 1

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

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

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

向您的视频控件添加 'Pause and Note Button'
暂停视频，获取当前时间并允许用户在点击按钮时输入注释
存储笔记和时间
为其他人播放视频时包括注释列表，当用户选择一个时直接搜索到视频中的时间点

下面的代码片段显示了使用按钮和当前时间跳转到视频中的不同位置属性:

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>

如何在不同时间点向视频添加多个notes/tags？

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

video

html5-video

video-processing

video-capture

tagging