Come posizionare il pulsante di avvio nel mezzo del clip

Question

Ho trovato la pagina di progettazione su http://www.videojs.com/ lì è possibile modificare la posizione del pulsante di avvio per essere nel mezzo delle clip.

Ma non sono in grado di posizionare o utilizzare questi fogli di stile sul lettore video.js. Qualcuno potrebbe spiegare come usarlo nel lettore. E. G. per estendere il css esistente con un file aggiuntivo? o come cambiare il css esistente per posizionare il pulsante non nella parte superiore sinistra ma nel mezzo?

Grazie. Katasun

Answer 1

Usando la versione 4.1.0:

Nel video js.css, in .vjs-default-skin .vjs-big-play-button (linea 484+) sostituire:

top: 2em; 
left: 2em; 
margin: 0; 

con:

top: 50%; 
left: 50%; 
margin-left: -6em; 
margin-top: -4em; 

-6em e -4em perché la larghezza è 12em e l'altezza è 8em

Appena avuto lo stesso problema e ha dovuto risolvere il problema way :) Funziona con le ultime novità di chrome, firefox, safari e opera, non ho testato su IE, sono su OSX

Answer 2

Ho modificato una versione di videojs in cui è possibile posizionare il pulsante di riproduzione ovunque. Ciò significa anche essere in grado di toccare la miniatura in ogni caso sui dispositivi IOS (non deve essere al centro) e verrà eseguito il video. http://www.andy-howard.com/recreate-bbc-iplayer/index.html

Answer 3

È possibile aggiungere "vjs-big-play-centered" alla classe video.

<video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="700" height="450" poster="http://www.videojs.com/img/poster.jpg"><source src="" type="video/mp4"></video>