Plugin VideoJS 4.0: come aggiungere correttamente elementi a controlBar?

Sto guardando la nuova API per i plugin videojs: https://github.com/videojs/video.js/blob/master/docs/plugins.md Plugin VideoJS 4.0: come aggiungere correttamente elementi a controlBar?

C'è un modo corretto per aggiungere elementi alla barra di controllo? Sto cercando di aggiungere "tweet", "mi piace" e altri pulsanti assortiti.

Ho tentato di eseguire questo tentativo senza successo fino ad ora.

Ho dato un'occhiata ai nuovi esempi di plugin. Nessuno di questi modifica la barra di controllo.

Grazie!

fonte

2013-05-14 Broonix

Sto ancora cercando un rispondi a questo Vedo che l'elenco dei plug-in si sta espandendo a: https://github.com/videojs/video.js/wiki/Plugins ma non ci sono ancora plug-in che aggiungono contenuto ai controlli. – Broonix

Vedere la risposta di ctangney sotto –

Mi sembra che in questo momento il codebase sia un po 'sconvolto, e forse ci sarà un modello di plug-in più coerente presentato a breve - ma nel frattempo - nel caso non abbiate scoperto come aggiungere elementi alla barra di controllo, presenterò un esempio banale.

Tutto ciò che ho intenzione di fare è aggiungere un componente all'oggetto core videojs e dire alla barra di controllo di includere quel componente come uno dei suoi figli.

Uno dei miei aspetti preferiti di video js è la libreria di icone presa in prestito da FontAwesome. Questo esempio utilizzerà il glifo icona-twitter da lì, ma sentiti libero di usare css/html personalizzati in base alle tue esigenze.

<!doctype html> 
<html> 
    <head> 
    <link href="http://vjs.zencdn.net/4.1.0/video-js.css" rel="stylesheet"> 
    <script src="http://vjs.zencdn.net/4.1.0/video.js"></script> 
    <!-- For the twitter icon. --> 
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 

    <style> 
     .vjs-control.vjs-tweet-button:before { 
     font-family: FontAwesome; 
     content: "\f081"; 
     } 
     </style> 
    </head> 
    <body> 
    <video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls> 
     <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4"> 
     <source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm"> 
    </video> 
    <script> 
     videojs.Tweet = videojs.Button.extend({ 
     /** @constructor */ 
     init: function(player, options){ 
      videojs.Button.call(this, player, options); 
      this.on('click', this.onClick); 
     } 
     }); 

     videojs.Tweet.prototype.onClick = function() { 
     alert("TWEET!"); 
     }; 

     // Note that we're not doing this in prototype.createEl() because 
     // it won't be called by Component.init (due to name obfuscation). 
     var createTweetButton = function() { 
     var props = { 
      className: 'vjs-tweet-button vjs-control', 
      innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>', 
      role: 'button', 
      'aria-live': 'polite', // let the screen reader user know that the text of the button may change 
      tabIndex: 0 
      }; 
     return videojs.Component.prototype.createEl(null, props); 
     }; 

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

     var vid = videojs("example_video_1", { 
     plugins : { tweet : {} } 
     }); 
    </script> 
    </body> 
</html>

Puoi giocare ovviamente con il tipo di componente si aggiunge, lo stile e la funzionalità di esso, ma che dovrebbe almeno mostrarvi come iniziare.

fonte

2013-06-26 09:32:26

Anche io stavo cercando questo e ho trovato questo: https://github.com/jDavidnet/video-js-plugins Non riesco a farlo funzionare ma se riesci, immagino che tu abbia praticamente quello di cui hai bisogno. Quando lo fai, per favore condividi con me?

fonte

2013-05-17 17:37:19

Questo è un plugin 3.x. – Broonix

Sembra che in questo momento la comunità di VideoJS manchi di plug-in applicabili per la recente versione 4.0 - poiché ho bisogno di un pulsante per cambiare tra le diverse qualità video in cui mi tufferò presto.

Per una rapida introduzione: Si può entrare in collegamento plugin per VideoJS 4.0 con questa documentazione: https://github.com/videojs/video.js/blob/master/docs/plugins.md

Come ho avuto bisogno di qualche ricerca per trovare quella pagina wiki, ho pensato di condividerlo.

fonte

2013-06-11 14:51:14 mbusch

Grazie, ho guardato il wiki. Purtroppo questo e gli esempi di plug-in non mostrano informazioni sull'aggiunta di elementi interattivi alla barra di controllo. – Broonix

Volevo solo aggiungere un po 'di aggiornamento a questa domanda. Ora puoi utilizzare addChild sulla maggior parte dei componenti in Video.js. Ho aggiornato il codice di ctangney qui sotto.

<script> 
    /** Tweet Button **/ 
    videojs.Tweet = videojs.Button.extend({ 
    /** @constructor */ 
    init: function(player, options){ 
     videojs.Button.call(this, player, options); 
     this.on('click', this.onClick); 
    } 
    }); 

    videojs.Tweet.prototype.createEl = function() { 
    var props = { 
     className: 'vjs-tweet-button vjs-control', 
     innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>', 
     role: 'button', 
     'aria-live': 'polite', // let the screen reader user know that the text of the button may change 
     tabIndex: 0 
    }; 

    return videojs.Button.prototype.createEl(null, props); 
    }; 

    videojs.Tweet.prototype.onClick = function() { 
    alert("TWEET!"); 
    }; 

    /** Video.js Plugin Code **/ 
    videojs.plugin('tweet', function(options) { 
    options = options || {}; 
    this.controlBar.addChild('tweet', options); 
    }); 

    /** Set Up Video.js Player **/ 
    var vid = videojs("example_video_1", { 
    plugins : { tweet : {} } 
    }); 
</script>

fonte

2014-07-03 16:01:08

Molto bello. Sono contento che AddChild sia ora parte dell'API. – Broonix

Basandosi sul codice di b.kelly è anche possibile estendere le funzionalità, eliminando i pulsanti non desiderati, ad esempio il codice qui sotto rimuoverà alcuni dei pulsanti più comuni

var vid = videojs("example_video_1", { 
    plugins : { tweet : {} }, 
    children: { 
     controlBar: { 
      children: { 
       volumeControl: false, 
       muteToggle: false, 
       playToggle: false, 
      } 
     } 
    } 
});

fonte

2016-10-11 14:28:56 TrueBlue

Plugin VideoJS 4.0: come aggiungere correttamente elementi a controlBar?

risposta

Problemi correlati