How to do video annotations using javascript?

Question

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 put the annotation anywhere in the video. Thanks

Post your code so that we can suggest options. – Munim Munna May 25 '19 at 18:50 — Munim Munna, May 25 '19 at 18:50

Mehmet Kaplan · Answer 1 · 2019-05-28T07:04:21.413

6

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

edited May 28 '19 at 07:04

answered May 27 '19 at 13:17

Mehmet Kaplan

1,723
2
20
43

can we draw various shapes like rectangle, arrow and many more on video? – Ketan Akbari May 28 '19 at 05:34
Please check my update in the answer ( https://github.com/brightcove/videojs-overlay ). – Mehmet Kaplan May 28 '19 at 07:04
i want to create something like this: https://drive.google.com/file/d/1ameS7DbzZUflkRv5f-Uh7PPsVgmLCkSq/view?usp=sharing – Ketan Akbari May 28 '19 at 10:27
is it possible using this packages – Ketan Akbari May 28 '19 at 10:27

score 1 · Answer 2 · answered May 31 '19 at 03:38

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>

The same answer given here. https://stackoverflow.com/questions/49750014/add-annotation-text-to-particular-frame-in-video-using-javascript-html5. That's not requirement. requirement is need to draw on video. by the way thanks for answer. — Ketan Akbari, May 31 '19 at 05:01
need something like this: https://drive.google.com/file/d/1ameS7DbzZUflkRv5f-Uh7PPsVgmLCkSq/view — Ketan Akbari, May 31 '19 at 05:07

score -1 · Answer 3 · answered Dec 01 '15 at 10:14

-1

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

answered Dec 01 '15 at 10:14

krsoni

539
7
11

This way don't work, because when I put fullscreen disapear the annotations. I would annotations like youtube, apper inside the video in one determinated second and determinated position and after someone seconds, dissapear. – danivaro Dec 07 '15 at 10:07

How to do video annotations using javascript?

3 Answers3

Linked