How to create custom button in js video

Question

I want to create a custom button in js video. I tried so many things and searched a lot when I apply. I did not find the result, I think I have an error in my code.

I have successfully installed the player on js video.

This is my code that I am trying to add a 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 a button to the player from the js video documentation.

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

This is my codeOpen script , please correct what I am doing wrong in it.

Answer 1

A new button works. The button is added to the control panel (which you can see in the developer tools), but is not displayed.

Here is a more reliable way to create new buttons. You can do whatever you want in onclick .

 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

Answer 2

An alternative would be to create a custom button and place 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; } 

You can use the click and mouse events to fade out or click a button. if you need to be mobile, you can add touch events, but you will need a library, for example hammer.js.

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

Answer 3

Try the following:

 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