How to create customs button in video js

Question

I want to create custom button in video js i have tried so many things and search alot when i am applying i found no result i think i have some mistake in my code.

i have setup my player on video js successfully.

This my code which i am trying to add custom button.

<script>
$(document).ready(function(){
   var player = videojs('video1');    
   var myButton = player.controlBar.addChild('button', {
            text: "Press me",
            // other options
          });

   myButton.addClass("html-classname");
});
</script>

and i also tried this code to add button in player from video js component documentation.

<script>
    $(document).ready(function(){
       var player = videojs('video1');    
       var button = player.addChild('button');
       button.el();
    });
</script>

This is my codeOpen fiddle please correct in it what's i am doing wrong.

What this button would do and would it be placed inside the player? — Patel, Jul 10 '15 at 07:52
I want to add this button in control bar and i want this button like when i hover it menu should open in this menu there are options which functionality i have successfully created like one is text field for moving caption forward and backward and caption on and off button — Sufyan, Jul 10 '15 at 08:02

Patel · Accepted Answer · 2015-07-10T12:45:10.180

6

The way you're creating a new button is working. The button is getting added to the control bar (which you can see in developer tools) but is not visible.

Here is more robust way of creating new buttons. You can do whatever you want in onclick function.

function newButtonToggle () {

    videojs.newButton = videojs.Button.extend({
       init: function(player, options){
        videojs.Button.call(this, player, options);
        this.on('click', this.onClick);
       }
    });

    videojs.newButton.prototype.onClick = function() {
        //Add click routine here..
    };

     //Creating New Button
    var createNewButton = function() {
        var props = {
            className: 'vjs-new-button vjs-control',
            innerHTML: '<div class="vjs-control-content">' + ('New') + '</div>',
            role: 'button',
            'aria-live': 'polite', 
            tabIndex: 0
            };
        return videojs.Component.prototype.createEl(null, props);
    };

    //Adding the newly created button to Control Bar

    videojs.plugin('newButton', function() {
        var options = { 'el' : createNewButton() };
        newButton = new videojs.newButton(this, options);
        this.controlBar.el().appendChild(newButton.el());
    });

    //Now setting up Player
    var vid = videojs("sampleVideo", {
        plugins : { newButton : {} }
    });           
}

newButtonToggle();

Here is the updated codepen

edited Jul 10 '15 at 12:45

answered Jul 10 '15 at 11:00

Patel

1,478
1
13
24

thank you soo much could you please help me how i create this button like this on click box show/hide like this screens i will be very thankfull to you http://prntscr.com/7r0hql http://prntscr.com/7r0ifu – Sufyan Jul 10 '15 at 12:55
You will need to add a div inside the parent container of your new button and then add all markup there. I imagine inside this div, you want all those options as well? You will have to register them as separate components just like we did in above solution. If you have problem getting that done, please ask a new question. :) – Patel Jul 10 '15 at 13:01
please help me top a box and add field in it i will be very thankfull – Sufyan Jul 10 '15 at 14:03
A useful extension would be how to capture the play button click event also or indeed remove it so that the controlBar could be more customised. – Oct 11 '16 at 11:57
This is a brutal way to do this, try an easier approach. I wrote my way of accomplishing this here https://nikushx.com/blog/2019/05/21/creating-custom-components-with-video-js/ – Nikush May 21 '19 at 00:17

Tasos · Answer 2 · 2015-07-10T09:37:19.430

1

An alternative would be to create a custom button and position it using some code

Demo

http://codepen.io/anon/pen/NqMwaG

Code

var elpos = $(".video-js").offset();
var x_pos = elpos.left + 150; // how far the button is to the left on control bar
var y_pos = elpos.top + 234; // height of video player minus some pixes
$(".custom").css({"left": x_pos+"px", "top": y_pos+"px"});

window.onresize = function() {
var elpos = $(".video-js").offset();
var x_pos = elpos.left + 150;
var y_pos = elpos.top + 242;
$(".custom").css({"left": x_pos+"px", "top": y_pos+"px"});
}

Css

.custom {
z-index:999999;
position:fixed;
top:0;
left:0;
display:inline-block;
}

For Fading out or in the button you can use click and mouse events. if you need to be mobile friendly you can add touch events but you will need a library like hammer.js to be added.

Code

$(document).on("click", ".vjs-play-control",function(){
setTimeout(function(){ $(".custom").fadeOut(); }, 2500);  
})

$( "#my_video_1, .vjs-control-bar vjs-fade-out" ).mouseover(function() {
$(".custom").fadeIn() 
})

$( "#my_video_1, .vjs-control-bar vjs-fade-out" ).mouseleave(function() {
setTimeout(function(){ $(".custom").fadeOut(); }, 2500); 
})

edited Jul 10 '15 at 09:37

answered Jul 10 '15 at 09:11

Tasos

5,321
1
15
26

can u please update button style like this please [ScreenShot](http://prntscr.com/7r0az5) i want this – Sufyan Jul 10 '15 at 09:36
i want when someone click icon button black box will appear like in youtube which i give u screenshot and on again click black box disappear – Sufyan Jul 10 '15 at 09:48
In that black box i will put options like text field and on/off button for captions i have created functionality – Sufyan Jul 10 '15 at 09:49
i will be very thankfull if you can apply this or understand what i need – Sufyan Jul 10 '15 at 09:50
like this bro when click http://prntscr.com/7r0hql popup will appear and when click again it will hide http://prntscr.com/7r0ifu – Sufyan Jul 10 '15 at 09:59

score 0 · Answer 3 · answered Jul 10 '15 at 12:56

Try this:

videojs.Btn = videojs.Button.extend({
    init: function (player, options) {
        videojs.Button.call(this, player, options);
        this.on('click', this.onClick);
    }
});

videojs.Btn.prototype.onClick = function () {
    alert("Click on my custom button!");
};

var createCustomButton = function () {
    var props = {
        className: 'vjs-custom-button vjs-control',
        innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text"><input type="button">my button</button></span></div>',
        role: 'button',
            'aria-live': 'polite',
        tabIndex: 0
    };
    return videojs.Component.prototype.createEl(null, props);
};

var myBtn;
videojs.plugin('myBtn', function () {
    var options = {
        'el': createCustomButton()
    };
    myBtn = new videojs.Btn(this, options);
    this.controlBar.el().appendChild(myBtn.el());
});

var vid = videojs("example_video_1", {
    plugins: {
        myBtn: {}
    }
});

DEMO

thank you soo much vijay could you please help me how i create this button like this on click box show/hide like this screens i will be very thankfull to you prntscr.com/7r0hql prntscr.com/7r0ifu — Sufyan, Jul 10 '15 at 12:59

How to create customs button in video js

3 Answers3

Linked