如何使用javascript进行视频注释

How to do video annotations using javascript?

本文关键字：视频 注释 何使用 javascript      更新时间：2023-09-26

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

我相信您可能正在寻找这个库：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

搜索了一整夜，找到了这个。查看此演示。如果这有帮助，请告诉我。

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>

只需在视频后放置一个<a></a>标签，并赋予其类似a{ position:relative; top: -50px; left: 20px; } 的正面样式即可

相关文章：