5

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.

wap
  • 71
  • 1
  • 4
  • You can push a video element onto an HTML5 Canvas, then you can draw on top of the video, take a look at http://html5doctor.com/video-canvas-magic/ . For Regular captions, HTML5 Video Element supports captions see: https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video – Malcor Apr 10 '18 at 09:49
  • the sample u shared uses captions or effects through out the videos, i want it for particular frame. for example, suppose its a training video and i want to highlight some section by either drawing circle or rectangle for particular frame. – wap Apr 10 '18 at 10:08
  • 1
    you can track various HTML5 video events as the content plays and use the currentTime value to trigger different animations/graphics. It won't be frame accurate though. If you want that you're going to get into one of the various editing tools – Offbeatmammal Apr 10 '18 at 10:37
  • as @Offbeatmammal said. Those examples show you methods of how you can achieve what you want. They're not off the shelf working examples of what you want to achieve. Using the currentTime event, if the current time equals the time you want to draw something, then draw something. – Malcor Apr 10 '18 at 11:15
  • Post some example in code snippet and you will get fast answer. – Nikola Lukic Apr 10 '18 at 11:18

2 Answers2

0

You can use VideoJS with this Annotation Plugin. Here is live demo. I'm not sure if it supports shape.

Dong Nguyen
  • 1,239
  • 9
  • 17
0

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>
Nikola Lukic
  • 4,001
  • 6
  • 44
  • 75