使用javascript和HTML5向视频的特定帧添加注释和文本

Question

有没有支持在视频帧中突出显示特定内容的库？ 类似于视频编辑功能。 我想在视频帧中放置任何矩形或圆形，并提供一些文本，以便下次播放视频时可以播放所有突出显示的内容。

- wap

---

你可以将一个视频元素推送到HTML5画布上，然后在视频上面进行绘制。请参考http://html5doctor.com/video-canvas-magic/。对于常规字幕，HTML5视频元素支持字幕，请参阅：https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video。 - Malcor

你分享的示例视频在整个视频中使用了字幕或特效，但我想要针对特定帧进行操作。例如，假设这是一个培训视频，我想通过绘制圆形或矩形来突出显示某些部分的特定帧。 - wap

您可以在HTML5视频播放时跟踪各种事件，并使用currentTime值触发不同的动画/图形。但这不会非常精确。如果您想要更精确的控制，您需要使用各种编辑工具。 - Offbeatmammal

正如@Offbeatmammal所说，这些示例向您展示了如何实现您想要的内容的方法。它们不是您想要实现的即插即用的工作示例。使用currentTime事件，如果当前时间等于您想要绘制某些内容的时间，则绘制该内容。 - Malcor

发布一些代码片段示例，您将获得快速答案。 - Nikola Lukic

Answer 1

你可以使用VideoJS和这个Annotation Plugin。这里是实时演示。我不确定它是否支持形状。

- Dong Nguyen

---

是的，但它提供了额外的滑块，我想要它在视频帧本身上。 - wap

Answer 2

这个答案基于以下示例： 在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>

- Nikola Lukic