Question

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

Answer 1

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

Answer 2

这个答案基于这个例子： 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>

使用javascript，HTML5在Video中为特定帧添加注释，文本

2 个答案: