videos - reproductor de video en html

Botón de reproducción centrado en VideoJS

Question

Pensé que compartiría un código que podría ser útil para alguien. Esta es una función que centra el botón de reproducción dentro del reproductor de video-js, funciona para mí. Solo necesita llamarlo en el evento de pausa y cuando el reproductor se inicializa y no se reproduce automáticamente.

¡Disfrutar!

function CenterPlayBT() {
var playBT = $(".vjs-big-play-button");
playBT.css({
left:( (playBT.parent().outerWidth()-playBT.outerWidth())/2 )+"px",
top:( (playBT.parent().outerHeight()-playBT.outerHeight())/2 )+"px"
});
}

Answer 1

Camino fácil:

http://designer.videojs.com - en la parte inferior de menos, solo agregue:

.vjs-default-skin .vjs-big-play-button {
margin-left: -@big-play-width/2;
margin-top: -@big-play-height/2;
left: 50%;
top: 50%;
}

Answer 2

Cree el lugar de video-js-custom.css después de:

<link href="http://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
<link href="link-to-custom-css/video-js-custom.css" rel="stylesheet">

Agregar de video-js-custom.css:

.video-js .vjs-big-play-button {
left: 40% !important;
top: 40% !important;
width: 20%;
height: 20%;
}
.video-js .vjs-play-control:before {
top:20% !important;
content: ''/f101'';
font-size: 48px;
}

Answer 3

Agregue un CSS personalizado a su código

.vjs-big-play-button {
margin-top: 20%;
margin-left: 40%;
width: 70px !important;
height: 70px !important;
}

Ajuste el ancho y la altura en consecuencia.

Answer 4

Puedes intentar jugar en videojs.com o como dijo @misterben arriba: "simplemente agrega la clase vjs-big-play-centered al elemento de video"

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360"... ></video>

Área de juegos: https://codepen.io/heff/pen/EarCt

Para la versión SCSS, puede usar

$center-big-play-button: true;

Answer 5

Utilizo "limelight player" que usa video.js para entregar una solución HTML5 pero tengo problemas para centrar el ícono de botón de reproducción en dispositivos con iOS. La cuestión y el soporte informados no pudieron venir con la solución. Ellos sí confirmaron el problema. Pensé en compartir mi solución que podría ayudar a alguien. La solución fue simple: ¡disminuye el tamaño de la fuente! Además del "tamaño de fuente", hay una propiedad heredada de "altura de línea" que también puede necesitar ajustes. Estas dos propiedades aumentan el contenedor primario y se produce una desalineación si el contenedor primario no está configurado para ser relativo o si el contenedor del reproductor de video está configurado para responder (ancho: 100%; altura: 100%)

Entonces, la solución de CSS que me ayudó fue:

.video-js .vjs-limelight-big-play{
font-size:100px!important /*or less */
}

O incluso mejor, cambiar de PX a EM, lo que ayudará en los dispositivos móviles (iOS también experimentó un problema con el centrado de un botón de reproducción)

.video-js .vjs-limelight-big-play{
font-size:10em!important /*or less depending on your design*/
}