5

is it possible to add annotation in my video using Video.js?

Below is my work out

<link href="http://vjs.zencdn.net/4.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.4/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
 data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
 <source src="my_video.webm" type='video/webm'>
</video>
baig772
  • 3,404
  • 11
  • 48
  • 93
  • What do you mean by annotations exactly? Would captions work? – heff Feb 26 '14 at 19:27
  • Do you mean markers? There is a plugin from video JS [https://github.com/spchuang/videojs-markers](https://github.com/spchuang/videojs-markers) – xmux Mar 10 '14 at 15:35
  • Check it out here : https://stackoverflow.com/a/56326875/6515775. If this doesn't suit your needs, can you please describe/show us an concrete example of what you want to achieve ? This will help in understanding what you mean by annotations. – mr.mams May 31 '19 at 08:46

1 Answers1

-1
<script>

  var Plugin = videojs.getPlugin('plugin');
  var ExamplePlugin = videojs.extend(Plugin, {

    constructor: function(player, options) {
      Plugin.call(this, player, options);
        player.on('timeupdate', function(){

  var Component = videojs.getComponent('Component');
        var TitleBar = videojs.extend(Component, {
          constructor: function(player, options) {
            Component.apply(this, arguments);
            if (options.text) 
            {
              this.updateTextContent(options.text);
            }
          },
          createEl: function() {
            return videojs.createEl('div', {
              className: 'vjs-title-bar'
            });
          },
          updateTextContent: function(text) {

            if (typeof text !== 'string') {
              text = 'hello world';
            }
            videojs.emptyEl(this.el());
            videojs.appendContent(this.el(), text);
          }
        });
        videojs.registerComponent('TitleBar', TitleBar);
        var player = videojs('my-video');
        player.addChild('TitleBar', {text: 'hellow people!'});


          });
      }
    });

  videojs.registerPlugin('examplePlugin', ExamplePlugin);
  videojs('#my-video', {}, function(){
  this.examplePlugin();
  });
  </script 

</html>

//copy and paste this code it will surely work.

faizan
  • 1
  • ">" i missed this. – faizan Jan 31 '20 at 12:43
  • 2
    Hi and welcome to stackoverflow, and thank you for answering. While this code might answer the question, can you consider adding some explanation for what the problem was you solved, and how you solved it? This will help future readers to understand your answer better and learn from it. Also, when making amendments to your answer, considering [editing](https://stackoverflow.com/posts/60004153/edit) your answer instead. – Plutian Jan 31 '20 at 13:02