使用JavaScript，HTML5将注释，文本添加到视频中的特定帧 [英] Add annotation, text to particular frame in Video using javascript, HTML5

问题描述

有没有支持在视频帧上突出显示特定内容的库?善待视频编辑.我想在视频帧中放置任何矩形或圆形，并提供一些文本，以便下次播放视频时，它应该与所有突出显示的内容一起播放.

is there any library that supports highlighting particular content on video frame? kind off video editing. I want to put any rectangle or circle in video frame and provide some text, so that when we play video next time it should play with all highlighted content.

推荐答案

此答案基于以下示例: 在javascript/jquery中获取当前视频帧

This answer is based on this example : Get current frame of video in javascript / jquery

我通过回调当前帧方法的检查来创建带有对象的数组.

I made array with object with checking in callback current frame method.

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将注释，文本添加到视频中的特定帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！