HTML5: Plyr es un reproductor de video receptivo y accesible

<div class="player">
  <video poster="film.jpg"controls>
    <source src="https://www.noupe.com/design/film.mp4"type="video/mp4">
    …
  </video>
</div>

Plyr agrega botones clásicos para reproducción y pausa, así como control de volumen. También muestra un botón para cambiar al modo de pantalla completa y otro para mostrar subtítulos. También se incluye de manera predeterminada una barra de progreso que le permite avanzar y retroceder tanto en audio como en video. Además, se muestran el tiempo de reproducción actual y la duración total.

Los iconos SVG se pueden cambiar

Aparte de eso, hay muchas opciones para modificar la apariencia y el comportamiento de la interfaz de usuario a través de JavaScript. De esta manera, puede elegir qué botones y qué información se debe mostrar. El nombre de los botones también se puede definir mediante un objeto de lenguaje.

plyr.setup({
  controls: ["play", "volume"],
  i18n: {play: "Get it going", volume: "Let's get loud"}
})

En el ejemplo, solo los botones de reproducción y volumen se muestran a través de „plyr.setup()“. La designación se realiza a través de „i18n“. Las etiquetas se muestran con información sobre herramientas. La apariencia del jugador se puede ajustar usando una hoja de estilo. Además de un archivo de hoja de estilo clásico, también hay una variante SASS y LESS. Puede reemplazar el archivo SVG y usar sus propios iconos en su lugar.

Controles accesibles y presentación receptiva

Todos los elementos del reproductor están etiquetados semánticamente con HTML5. El control de volumen se proporciona como un elemento „“ con un atributo „range“. La barra de progreso se realiza mediante un elemento „“. El lector de pantalla y WebVTT también son compatibles. Este último permite la visualización de subtítulos para hacer que los archivos de video sean accesibles para personas con discapacidad auditiva.

Soporte de WebVTT para visualización de subtítulos

Cuando se usa HTML5 y SVG, el soporte de diseños receptivos es bastante esencial. Plyr también hace un trabajo ejemplar con eso. Los videos siempre se muestran de modo que su ancho máximo sea el ancho de la pestaña del navegador o la pantalla. La interfaz de usuario también se puede alinear en varias líneas si es necesario.

Videos de YouTube que se ejecutan en su propio reproductor

Especialmente los videos a menudo se alojan a través de YouTube y se integran en su sitio web. Gracias a Plyr, también puedes usar tu propio diseño para estos videos. El marco le permite equipar videos externos de YouTube con la interfaz de usuario de Plyr. Simplemente necesita integrar un elemento „

<div data-video-id="L1h9xxCU20g"data-type="youtube"></div>

document.querySelectorAll(".player")[0].plyr.pause();