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