如何使用javascript进行视频注释？ [关闭]

Question

我的问题是如何像 youtube 一样进行视频注释，但在文件 html 中使用我自己的视频，使用 javascript。注释就像是链接，也只是文本。并且可以将注释放在视频中的任何位置。 谢谢

Answer 1

相信你可能正在寻找这个库：https://github.com/contently/videojs-annotation-comments

来自 github 页面的用法可能会提示您如何使用它：

plugin.fire('newAnnotation', {
   id: 1,
   range: { start: 20, end: null },
   shape: { // NOTE - x/y vals are % based (Floats) in video, not pixel values
       x1: null,
       x2: null,
       y1: null,
       y2: null
   }
   commentStr: "This is my comment." // THIS DATA YOU NEED TO FILL
});

此外，对于类似 YouTube 的注释，您可以使用 https://github.com/brightcove/videojs-overlay

Answer 2

搜索了一夜，找到了这个。检查这个演示。让我知道这是否有帮助。

window['ann'] = [{'at':100,'msg':'Wow!'},{'at':230,'msg':'<a href="https://www.stackoverflow.com" >What!</a>'}];

var currentFrame = $('#currentFrame');
var video = VideoFrame({
    id : 'video',
    frameRate: 29.97,
    callback : function(frame) {
    ann.forEach(function(ele){
    if (frame == ele['at']) {
      currentFrame.html(ele['msg']);
    }   
    });   
    }
});

$('#play-pause').click(function(){
    ChangeButtonText();
});

function ChangeButtonText(){
  if(video.video.paused){
        video.video.play();
        video.listen('frame');
        $("#play-pause").html('Pause');
    }else{
        video.video.pause();
        video.stopListen();
        $("#play-pause").html('Play');
    }
  }

<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="frame">  
  <h3 style="color:white;position:absolute;left:50%;top:10%; z-index:100;" id="currentFrame">Annotation board</h3>
  </div>

<video height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

 
  <button style="color:red;position:absolute;left:3%;top10%;" id="play-pause">Play</button>

Answer 3

应该是简单的在视频后面加上<a></a>标签，并赋予它像a{ position:relative; top: -50px; left: 20px; }这样的位置样式