How To Do Video Annotations Using Javascript?

My question is how to do video annotations like youtube, but in the file html with my own video, using javascript. The annotations wolud like be links and also text only. And can p

Solution 1:

I believe you may be looking for this library: https://github.com/contently/videojs-annotation-comments

From the github page the usage which may give you hint how to use it:

plugin.fire('newAnnotation', {
   id: 1,
   range: { start: 20, end: null },
   shape: { // NOTE - x/y vals are % based (Floats) in video, not pixel values
       x1: null,
       x2: null,
       y1: null,
       y2: null
   }
   commentStr: "This is my comment." // THIS DATA YOU NEED TO FILL
});

Additionally, for YouTube like annotations you can use https://github.com/brightcove/videojs-overlay

Solution 2:

Searched all night and found this one. Check this demo. Let me know if this is helpful.

window['ann'] = [{'at':100,'msg':'Wow!'},{'at':230,'msg':'<a href="https://www.stackoverflow.com" >What!</a>'}];

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%;top:10%; z-index:100;" 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>

Solution 3:

It should be simply to put a <a></a> tag after video and give it positio style like a{ position:relative; top: -50px; left: 20px; }