video.jsbrightcove

brightcove player how to set options in custom component


I am trying to add custom button using components.
Try to displaying company logo on player. Defining option objects and calling into component but not getting value in component function.

 (function(window, videojs) {
    var options = {"logo": "<https://brightcovelogo.png>"};
     // inti player
    var player = videojs.getPlayer('brightcoveplayer');
    var ContentLogo= videojs.extend(Component, {
                constructor: function ContentLogo(player, options) {
                    Component.apply(this, arguments);
                    console.log(options);
                    if (options.logo) {
                        this.updateLogo(options.logo);
                    }
                },
createEl: function () {
            return videojs.dom.createEl('div', {
                className: 'vjs-video-logo'
            });
        },
       // Pass logo url function
        updateLogo:function (url) {
            if (typeof url!== 'string') {
                url = '';
            }

videojs.dom.emptyEl(this.el());
                videojs.dom.appendContent(this.el(), 
                videojs.dom.createEl('img'{
                    src: url
       })
          }
        })
videojs.registerComponent('ContentLogo', ContentLogo);
})(window, window.videojs);

Solution

  • options inside the constructer is the options object passed to the constructor when creating a new instance of your component. After registering the component, create it with

    player.addChild('ContentLogo', options);