如何使用video.js在视频中添加注释

bai*_*772 5 annotations html5-video video.js

是否可以使用Video.js在视频中添加注释?

下面是我的工作

<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>
Run Code Online (Sandbox Code Playgroud)

小智 -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>
Run Code Online (Sandbox Code Playgroud)

//复制并粘贴此代码,它肯定会起作用。

  • 您好,欢迎来到 stackoverflow,感谢您的回答。虽然这段代码可能会回答这个问题,但您是否可以考虑添加一些解释来说明您解决了什么问题以及如何解决它?这将帮助未来的读者更好地理解您的答案并从中学习。另外,在修改您的答案时,请考虑[编辑](https://stackoverflow.com/posts/60004153/edit)您的答案。 (2认同)