Come creare un pulsante doganale nel video js

Question

Voglio creare un pulsante personalizzato nel video js ho provato così tante cose e ricerca molto quando sto applicando non ho trovato alcun risultato penso di avere qualche errore nel mio codice.

ho impostato correttamente il mio lettore su video js.

Questo è il mio codice che sto cercando di aggiungere un pulsante personalizzato.

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

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

e ho anche provato questo codice pulsante per aggiungere nel giocatore di video js component documentation.

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

Questo è il mio codeOpen fiddle Correggi in esso ciò che è sto facendo male.

Answer 1

Il modo in cui si sta creando un nuovo tasto sta funzionando. Il pulsante viene aggiunto alla barra di controllo (che puoi vedere negli strumenti di sviluppo) ma non è visibile.

Ecco un modo più efficace per creare nuovi pulsanti. Puoi fare tutto ciò che vuoi nella funzione 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(); 

Ecco la versione aggiornata di codepen

Answer 2

Un'alternativa sarebbe quella di creare un pulsante personalizzato e la posizione utilizzando un codice

Demo

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

Codice

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

Per Dissolvenza in chiusura o nel pulsante è possibile utilizzare eventi click e mouse. se devi essere ottimizzato per i dispositivi mobili, puoi aggiungere eventi touch, ma dovrai aggiungere una libreria come hammer.js.

Codice

$(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

Prova questa:

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