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/yvalsare%based(Floats)invideo, notpixelvaluesx1:null,
       x2:null,
       y1:null,
       y2:null
   }
   commentStr:"This is my comment."//THISDATAYOUNEEDTOFILL
});

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();
});

functionChangeButtonText(){
  if(video.video.paused){
        video.video.play();
        video.listen('frame');
        $("#play-pause").html('Pause');
    }else{
        video.video.pause();
        video.stopListen();
        $("#play-pause").html('Play');
    }
  }

<scriptsrc="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="frame"><h3style="color:white;position:absolute;left:50%;top:10%; z-index:100;"id="currentFrame">Annotation board</h3></div><videoheight="180"width="100%"id="video"><sourcesrc="http://www.w3schools.com/html/mov_bbb.mp4"></source></video><buttonstyle="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; }