Cómo funciona el modo fluido
En video.js 5.0, hemos añadido soporte para diseños realmente fluidos con video.js. Se hace usando ratios intrínsecos, video.js hace el trabajo pesado por ti.
Cómo utilizar el modo fluido
Para hacer que un reproductor sea fluido en video.js, puede establecer el parámetro fluid opción:
let player = videojs('preview-player', {
fluid: true
})O puedes añadir una de las clases de fluido al jugador: .vjs-fluid, .vjs-4-3, .vjs-16-9:
<video id="preview-player" class="video-js vjs-fluid" controls data-setup={}>.vjs-4-3 mantiene una relación de aspecto 4:3 para el vídeo y .vjs-16-9 mantiene una de 16:9. .vjs-fluid es un poco más especial. Espera a que se carguen los metadatos del vídeo y, a continuación, utiliza la anchura y la altura del vídeo para calcular la relación de aspecto correcta que debe utilizarse para el vídeo.
Lista de reproducción
Esto funciona muy bien si sólo tienes el reproductor por sí mismo. Qué pasa si usted está tratando de una adjuntar una lista de reproducción al elemento de vídeo y mantenerlo a la misma altura-como lo hicimos en la página de ejemplo avanzado en el sitio web video.js?
Podríamos calcular cuánto debe ser el relleno superior en función de la anchura del selector de listas de reproducción o del elemento contenedor, pero entonces cada vez que cambie un vídeo tendríamos que recalcular la altura del selector de listas de reproducción. En su lugar, podemos confiar en video.js para hacer todo el trabajo.
Adjuntar el selector de listas de reproducción
Para este ejemplo, estamos utilizando el videojs-playlist-ui y videojs-playlist para la funcionalidad de la lista de reproducción. A continuación, envolvemos el reproductor en un contenedor y ponemos la etiqueta playlist-ui también.
<section class="main-preview-player">
<video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<ol class="vjs-playlist"></ol>
</section>Ahora podemos hacer que se alineen relativamente rápido con un poco de CSS:
.video-js {
width: 70%;
float: left;
}
.vjs-playlist {
width: 30%;
float: right;
}Cómo hacer que el selector de listas de reproducción sea fluido
Video.js calcula la relación de aspecto y luego añade una hoja de estilos a la página:
.preview-player-dimensions.vjs-fluid {
padding-top: 41.66666666666667%;
}Ese porcentaje da como resultado una relación de aspecto de 2,4 que coincide con la del clip de los océanos.
Así que para asegurarnos de que el selector de la lista de reproducción tiene la misma altura, podemos añadirle la clase player dimensions:
<ol class="vjs-playlist preview-player-dimensions vjs-fluid"></ol>Cómo hacer que se alinee
Una de las maneras más fáciles de hacer que estas dos cosas se alineen correctamente es usar flexbox. Esto hará que el reproductor y el selector de la lista de reproducción crezcan hasta ocupar todo el espacio necesario. Además, el selector de listas de reproducción se colapsará debajo del reproductor si el ancho de la página es demasiado pequeño.
Flexbox está disponible en muchas plataformas. Sin embargo, algunos navegadores estaban implementando flexbox a medida que su especificación evolucionaba. Probablemente es mejor ejecutar este css a través de algo como autoprefixer. Usar autoprefixer no hará que funcione en navegadores que no soportan flexbox pero aumentará significativamente el soporte de la plataforma.
En primer lugar, fijamos display a flex y añadir algunas propiedades para envolver y dimensionar:
.main-preview-player {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}flex-wrap permite que el selector de listas de reproducción pase a la línea siguiente si la anchura del contenedor es demasiado pequeña.
A continuación, queremos posicionar el reproductor y el selector de listas de reproducción en relación con el contenedor y establecer algunos tamaños mínimos y predeterminados:
.video-js,
.vjs-playlist {
position: relative;
min-width: 300px;
min-height: 150px;
height: 0;
}Por último, queremos aplicar la configuración flex al reproductor y al selector de listas de reproducción:
.video-js {
flex: 3 1 70%;
}
.vjs-playlist {
flex: 1 1 30%;
}Esto le dice al reproductor que crezca y ocupe el triple de espacio que el selector de la lista de reproducción y por defecto el 70% de la anchura. El selector de la lista de reproducción ocupa por defecto el 30% de la anchura y puede crecer y decrecer según sea necesario.
Ahora, si cargamos esto en un navegador, veremos un problema: la lista de reproducción no tiene la altura correcta.
Esto se debe a que el plugin playlist-ui establece su propio padding en el elemento que termina anulando el plugin preview-player-dimensions padding-top. Podemos solucionarlo forzando el padding-top que queramos. Sin embargo, aunque esto resuelve nuestro problema de altura, ¿dónde están nuestros objetos? Hay que desplazarse para conseguirlos.
Esto sucede porque nuestro padding-top está dentro del selector de la lista de reproducción; empujó todos los elementos hacia abajo requiriendo desplazamiento para llegar a ellos.
Solución
En última instancia, lo que tenemos que hacer es envolver el elemento de lista de reproducción en un contenedor que se flexiona de manera que el padding-top no empuja los elementos de la lista de reproducción hacia abajo.
<div class="playlist-container preview-player-dimensions vjs-fluid">
<ol class="vjs-playlist"></ol>
</div>También cambiamos el vjs-playlist referencias a playlist-container y posicionar absolutamente el selector de listas de reproducción dentro de su contenedor:
.playlist-container {
position: relative;
min-width: 300px;
min-height: 150px;
height: 0;
}
.playlist-container {
flex: 1 1 30%;
}
.vjs-playlist {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}HTML
<section class="main-preview-player">
<video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<div class="playlist-container preview-player-dimensions vjs-fluid">
<ol class="vjs-playlist"></ol>
</div>
</section>CSS
.main-preview-player {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.video-js,
.playlist-container {
position: relative;
min-width: 300px;
min-height: 150px;
height: 0;
}
.video-js {
flex: 3 1 70%;
}
.playlist-container {
flex: 1 1 30%;
}
.vjs-playlist {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
