Question

是否可以使用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>

Answer 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>

///复制并粘贴此代码肯定可以正常工作。

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

1 个答案: