使用javascript，HTML5向视频中的特定帧添加注释，文本[关闭]答案

【问题标题】：Add annotation, text to particular frame in Video using javascript, HTML5 [closed]使用javascript，HTML5向视频中的特定帧添加注释，文本[关闭]
【发布时间】：2018-09-19 20:37:59
【问题描述】：

是否有任何库支持突出显示视频帧上的特定内容？关闭视频编辑。我想在视频帧中放置任何矩形或圆形并提供一些文本，以便下次播放视频时它应该播放所有突出显示的内容。

【问题讨论】：

您可以将视频元素推送到 HTML5 画布上，然后您可以在视频上绘制，看看 html5doctor.com/video-canvas-magic 。对于常规字幕，HTML5 视频元素支持字幕见：developer.mozilla.org/en-US/Apps/Fundamentals/…
您分享的示例在整个视频中使用了字幕或效果，我希望它用于特定帧。例如，假设它是一个培训视频，我想通过为特定帧绘制圆形或矩形来突出显示某些部分。
您可以在内容播放时跟踪各种 HTML5 视频事件，并使用 currentTime 值触发不同的动画/图形。虽然它不会是帧准确的。如果您愿意，您将使用各种编辑工具之一
正如@Offbeatmammal 所说。这些示例向您展示了如何实现您想要的目标的方法。它们不是您想要实现的现成工作示例。使用 currentTime 事件，如果当前时间等于你想画东西的时间，那么就画东西。
在代码 sn-p 中发布一些示例，您将很快得到答案。

标签： javascript html video annotations

【解决方案1】：

此答案基于此示例： Get current frame of video in javascript / jquery

我用对象创建数组，并检查回调当前帧方法。

window['ann'] = [{'at':100,'msg':'cool'},{'at':230,'msg':'coolianno'}];

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%;top10%;" 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>

【讨论】：

【解决方案2】：

您可以将VideoJS 与此Annotation Plugin 一起使用。这是live demo。我不确定它是否支持形状。

【讨论】：

是的，但它提供了额外的滑块，我希望它在视频帧本身上