Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Interfaz de video de Skin Orman Clark usando jPlayer y CSS

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Quick Tip: Give Orman's Navigation the :target Treatment
Menu Notification Badges Using HTML5 Data-Attributes

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Codificar los diseños de píxeles premium de Orman Clark es muy divertido, ¡esta vez echaremos un vistazo a su interfaz de reproductor de video! Lo construiremos usando una impresionante biblioteca de videos HTML5 llamada jPlayer junto con algo de HTML y CSS.


Paso 1: HTML5 Marco Base

Comenzaremos lanzando juntos un documento HTML5 en blanco, mientras recordamos la fuente jQuery en la cabeza (estoy usando jQuery alojado por Google). También enlazaré con el código HTML más reciente, lo que garantizará que Internet Explorer interprete y diseñe los elementos HTML5 correctamente.

Una última cosa, notará que también he vinculado a una hoja de estilo, agregaremos el CSS más adelante en el tutorial.


Paso 2: Descarga jPlayer

A continuación, tendremos que descargar jPlayer "La biblioteca de audio / video jQuery HTML5". Dirígete a jplayer.org y descarga la versión actual.

jPlayer Files

Continúa y crea una carpeta llamada "javascript" o "js" (o lo que estés acostumbrado) en tu carpeta web y copia jquery.jplayer.min.js en ella. A continuación, deberá vincular esto a su HTML, así que agregue lo siguiente en su sección <head> (recuerde cambiar la ruta según corresponda).


Paso 3: Marcado del reproductor

Ahora agregaremos el marcado que necesitamos para crear el jugador. No se preocupe si parece abrumador, la mayoría de esto se toma de las demostraciones en el sitio jplayer.org y explicaré todo lo que es necesario más adelante.

En primer lugar, verás un contenedor principal para todo. Vamos a aplicar algunos estilos globales a eso. Luego está el div div "#jquery_jplayer_1" al que se dirigirá la secuencia de comandos de jPlayer y agregará el video (verás que se hace referencia a este ID en la función jQuery cuando lo agregamos).

Realmente solo necesitas preocuparte por lo que esté dentro de las etiquetas <div class="jp-gui">. Esta es la sección principal que contendrá los controles de video. Crearemos otro par de contenedores dentro de él que ayudarán a cambiar el tamaño dependiendo de si la pantalla completa está activada o desactivada.


Paso 4: Marcado de controles

Ahora por las cosas buenas..

Aquí hemos agregado nuestros controles, todos comentados para mayor claridad. Para comenzar, nuestro botón de reproducción seguido del botón de pausa. Ambos reciben nombres de clase adecuados para el estilo más adelante. A continuación, tenemos un intervalo con la clase 'separator'. Orman usó algunos pequeños e ingeniosos separadores en el diseño, ya que estos son separadores con un gradiente en ellos, usaremos una imagen para estos (aunque puede usar los gradientes de CSS3 si estás seguro).

A continuación, creamos la barra de progreso y hay algunos elementos que se utilizan para construir esto. Primero tenemos 'jp-progress' que es la base de la barra de progreso. A continuación tenemos 'jp-play-bar'. Esta es la barra roja fresca que se desplaza a lo largo del progreso del video. Tenga en cuenta que también usamos un tramo con una clase de 'mango' para crear el pequeño botón que se muestra en el diseño.

Ahora para la hora actual y la duración del video. Los crearemos una vez más usando divs, con las clases 'jp-current-time' y 'jp-duration'. Tenga en cuenta que también usamos otra clase de intervalo, esta vez para crear otro separador pero usando una barra diagonal hacia adelante para que no se usen imágenes aquí. Después de ese lote verás que tenemos otro separador, igual que anteriormente.

Los botones de volumen y la barra deben hacerse. Primero crearemos dos botones, 'jp-mute' y 'jp-unmute'. Solo se mostrará uno de estos a la vez, el otro se ocultará con jPlayer. La barra de volumen tiene los mismos principios que la barra de progreso, la misma estructura (aunque diferentes nombres de clase, obviamente).

Si ve el archivo en el navegador, aún no verá que ocurra demasiado.

jPlayer Markup

Paso 5: Agregar un video

Ahora la parte principal, vamos a añadir un video! Para una funcionalidad completa y compatibilidad con varios navegadores, necesitará que su video esté disponible en múltiples formatos. Los formatos multimedia HTML5 soportados por jPlayer son:

  • mp3
  • mp4 (AAC/H.264)
  • ogg (Vorbis/Theora)
  • webm (Vorbis/VP8)
  • wav

Varios navegadores soportan diferentes formatos de video; el formato relevante se seleccionará según el navegador siempre que esté disponible. Visite caniuse.com para obtener más información sobre quién, qué y dónde.

También necesitaremos un archivo .png que actúa como un póster cuando la película no se está reproduciendo.

Para el propósito de este tutorial, estoy usando un tráiler de película descargado desde http://trailers.apple.com. Luego lo convertí a los formatos correctos (hay muchos recursos en línea gratuitos para ayudarlo aquí, con Google)...

Entonces, una vez que los haya convertido y haya creado su póster .png, colóquelos en algún lugar apropiado en su proyecto. Después de eso tendremos que agregar un fragmento de creación de instancias para que jPlayer esté en funcionamiento.

Agregue lo siguiente al pie de su documento y recuerde cambiar las rutas del archivo para reflejar las suyas. Verás que estamos apuntando jPlayer al elemento "#jquery_jplayer_1".

Echa un vistazo a la documentación de jPlayer para más opciones y atributos. OK, deberías tener algo similar a esto:

Video Added

Paso 6: Video Base CSS

Antes de agregar algo de CSS para la interfaz de control, agregaremos un fondo, fuentes, etc. al cuerpo y también los estilos para la base del video. Continúe y cree una hoja de estilo, recuerde vincularlo en la sección de encabezado de su página web. También he puesto en marcha un reinicio solo en caso de que su navegador decida agregar algunos márgenes y todo eso.

Después de las reglas de reinicio he añadido un fondo con una imagen. A continuación, apunté a todo el reproductor (el video y los controles), le di una familia de fuentes y agregué algunas sombras de recuadro (¡mientras recuerdo usar los prefijos del navegador!) Luego le hemos dado estilos para cuando el jugador está en modo de pantalla completa.

Ahora debería tener algo similar a lo siguiente:

Video Base CSS

Paso 7: Diseño de controles básicos

¡Es hora de empezar a estilizar la sección de controles! Primero vamos a estilizar la parte gris base. Usaremos un ancho del fluido del 100%, esto se usa para que se extienda hasta el ancho completo en el modo de pantalla completa. También he añadido una altura fija de 35px. Luego usaremos un gradiente para el fondo, continué y creé esto usando GradientApp y luego lo limpié usando la API de Prefixr.

Finalmente, agregué un cuadro de sombra para crear las sombras insertadas, una vez más recordando usar los prefijos del navegador. A continuación, agregué algunos estilos para el soporte de controles (básicamente un contenedor), lo que nos permite centrar el panel de control en el modo de pantalla completa. Verás cómo funciona esto más adelante. He usado un ancho fijo de 570px y lo he centrado usando margin: 0 auto;

No debería ver muchos cambios desde el último paso, excepto por el fondo degradado que acabamos de agregar:

Controls Base Styling

Paso 8: Botones de Reproducir y pausar

A continuación, agregaremos los botones de reproducción y pausa, junto con el separador. Estaré usando un sprite para todos los botones, que puede capturar en los archivos de origen.

Primero he definido un ancho y alto para los botones de pausa y de reproducción, ambos tendrán las mismas dimensiones. A continuación, agregué una sangría de texto para empujar cualquier texto dentro de los enlaces de anclaje fuera de la pantalla, ya que no los necesitamos, usaremos la imagen del sprite. Finalmente usaremos outline:none; que solucionará un problema al hacer clic, evitando que algunos navegadores muestren un brillo azul horrible alrededor del botón.


Paso 9: Barra de progreso

Bueno, primero vamos a apuntar a la base de la barra de progreso. Le daremos un fondo sólido, agregaremos un radio de borde de 5px (con los prefijos), dos sombras de cuadro, una sombra paralela y una sombra insertada. A continuación añadiremos algunas anchuras y alturas, ambas fijas. Luego agregaremos un margen superior para centrarlo en toda la interfaz.

A continuación, agregaremos algunos estilos para la barra de búsqueda que muestra cuánto se ha cargado el video. Aplicaremos un ancho de 0px porque jPlayer manejará el ancho real dinámicamente, y una altura del 100%, por lo que heredará la altura de la barra de progreso, llenándolo todo. También le daremos un radio de borde de 5px y un fondo.

Por último, crearemos la barra de progreso que se mueve a medida que se reproduce el video. Usaré una imagen y la repetiré en el eje y. Una vez más, como anteriormente agregaremos un ancho de 0px y jPlayer se encargará del resto. A continuación, ¿recuerdas la etiqueta span que creamos? Esto será utilizado para el mango. Usaremos una imagen para esto también, y la posicionaremos absolutamente. Tendremos que usar right:XXpx; para asegurarse de que se mueve junto con la barra de juego.

Progress Bar

Paso 10: Tiempo actual / Duración

Tiempo para hacer el tiempo (risita) Sin embargo, en serio, vamos a ajustar el tiempo y la duración actual. Los apuntaremos a los dos primero para aplicar algunos estilos que compartirán. El resto son cosas básicas como márgenes.


Paso 11: Botones de volumen y barra

No estamos lejos de completarlo ahora, así que manejemos la sección de volumen. Necesitaremos dos botones, el silencio y el silencio. Aplicaremos un poco de estilo a ambos y luego el sprite a cada uno individualmente.

Tenga en cuenta que hemos utilizado outline:none; de nuevo para evitar ese estado activo problemático. Para crear la barra de volumen usaremos un proceso similar a la barra de progreso. Aplicaremos un ancho y una altura fijos, le daremos un fondo, algunas sombras de cuadro y un radio de borde de 5px. La barra de volumen en sí es transparente, por lo que no le aplicaremos un fondo. A continuación tenemos otro mando; usando un span nuevamente aplicaremos una imagen de fondo, use position:absolute; y colóquelo a la derecha para que se mueva correctamente.


Paso 12: Botón de pantalla completa

¡Estamos en el último paso ahora! Todo lo que nos queda es el botón de pantalla completa. Usando pasos similares a los de antes, aplicaremos el sprite nuevamente, usaremos la sangría de texto para ocultar el texto (también conocido como empujar-fuera-de-la-pantalla). Y recordando usar outline:none; de nuevo (lo que ciertamente podría aplicarse a todos los anclajes al comienzo de la hoja de estilo).

¡Y nuestro reproductor de video está completo!

Completed Normal Screen Size

¡Anímate y prueba la función de pantalla completa, es increíble!

Completed Full Screen Size

Conclusión

Al utilizar el complemento jPlayer y el encantador diseño de Orman, hemos codificado una interfaz de reproductor de video de píxeles perfectos. No lo olvides, jPlayer tiene muchos más trucos bajo la manga, así que asegúrate de revisar las demostraciones y la documentación. Espero que hayas disfrutado este tutorial, gracias por leerlo.

Completed Normal Screen Size
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.