Share
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.
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 que garantizará que Internet Explorer interprete y estilice correctamente los elementos HTML5.
Una última cosa, notará que también he vinculado a una hoja de estilo, agregaremos el CSS más adelante en el tutorial..
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..
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 ello. A continuación, deberá vincular esto a su HTML, así que agregue lo siguiente en su sección (recordando cambiar el camino según corresponda).
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..
Actualización requerida Aquí hay un mensaje que aparecerá si el video no es compatible. Una alternativa Flash puede ser usada aquí si te apetece.
En primer lugar, verás un contenedor principal para todo. Vamos a aplicar algunos estilos globales a eso. Luego está el div "# jquery_jplayer_1" al que se dirigirá el script 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 sea que esté dentro del 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 una clase de 'separador'. 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á 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 'manejador' aquí 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á demasiadas cosas sucediendo.. 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: 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 un montón de 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 instanciación 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: 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 hice un reinicio solo en caso de que su navegador decida agregar algunos márgenes y otras cosas.! 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 casillas de sombra (¡mientras recordaba 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: ¡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. A continuación, 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, recordé 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 No debería ver muchos cambios desde el último paso, excepto por el fondo degradado que acabamos de agregar: 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 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 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 agregaremos algunos anchos y alturas, ambos fijos. 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.. Finalmente, 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. Necesitaremos usar 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.. 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.. Nota que hemos utilizado ¡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 Y nuestro reproductor de video está completo.! Ve y prueba la función de pantalla completa, es increíble! 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..
Paso 4: Marcado de controles
reproducir pausar
Paso 5: Agregar un video
Paso 6: Video Base CSS
html, body, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, y, dirección, cite, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, forma, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video, entrada, área de texto, seleccione fondo: transparente; borde: 0; tamaño de fuente: 100%; margen: 0; contorno: 0; relleno: 0; vertical-align: baseline artículo, aparte , detalles, figcaption, figura, pie de página, encabezado, hgroup, menu, nav, sección display: block body line-height: 1 abbr [title], dfn [title] border-bottom: 1px punteado; cursor: help blockquote, q quotes: none blockquote: before, blockquote: after, q: before, q: after content: none del text-decoration: line-through hr background: transparent; border: 0; claro: ambos; color: transparente; altura: 1px; margen: 0; relleno: 0 marca fondo-color: # ffffb3; fuente-estilo: cursiva entrada, seleccione vertical-align: middle ins backgro und-color: rojo; color: blanco; texto-decoración: ninguno ol, ul estilo de lista: ninguno tabla borde-colapso: colapso; espacio entre bordes: 0 a texto-decoración: ninguno; cuerpo margen: 0; relleno: 0; fondo: url ("bg.jpg") repetir; .jp-video font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; posición: relativa; -webkit-box-shadow: 0px 0px 20px rgba (0,0,0, .3); -moz-box-shadow: 0px 0px 20px rgba (0,0,0, .3); cuadro de sombra: 0px 0px 20px rgba (0,0,0, .3); .jp-video-360p ancho: 570px; margen: 100px auto; .jp-video-full width: 480px; altura: 270px; Posición: ¡estática! importante; posición: relativa .jp-video-full .jp-jplayer arriba: 0; izquierda: 0; posición: fijo! importante; posición: relativa; / * Reglas para IE6 (pantalla completa) * / overflow: hidden; índice z: 1000; .jp-video-full .jp-gui posición: corregida! importante; posición: estática; / * Reglas para IE6 (pantalla completa) * / top: 0; izquierda: 0; ancho: 100%; altura: 100%; índice z: 1000; .jp-video-full .jp-interface position: absolute! important; posición: relativa; / * Reglas para IE6 (pantalla completa) * / bottom: 0; izquierda: 0; índice z: 1000; 
Paso 7: Diseño de controles básicos
margen: 0 auto; .jp-interface posición: relativa; ancho: 100%; altura: 35px; imagen de fondo: -webkit-linear-gradient (arriba, rgb (242, 242, 242), rgb (209, 209, 209)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (242, 242, 242), rgb (209, 209, 209)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (242, 242, 242), rgb (209, 209, 209)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (242, 242, 242), rgb (209, 209, 209)); imagen de fondo: gradiente lineal (arriba, rgb (242, 242, 242), rgb (209, 209, 209)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-box-shadow: inserción 0px 1px 0px # f7f7f7, inserción 0px -1px 0px # e2e2e2; -moz-box-shadow: inserción 0px 1px 0px # f7f7f7, inserción 0px -1px 0px # e2e2e2; box-shadow: inserción 0px 1px 0px # f7f7f7, inserción 0px -1px 0px # e2e2e2; div.jp-controls-holder borrar: ambos; ancho: 570px; margen: 0 auto; posición: relativa; desbordamiento: oculto;
Paso 8: Reproducir y pausar botones
esquema: ninguno; que solucionará un problema al hacer clic, evitando que algunos navegadores muestren un brillo azul horrible alrededor del botón. a.jp-play, a.jp-pause width: 40px; altura: 35px; flotador izquierdo; texto-sangría: -9999px; esquema: ninguno; a.jp-play background: url ("sprite.png") 0 0 no se repite; a.jp-pause background: url ("sprite.png") -40px 0 no se repite; pantalla: ninguna; .separator background-image: url ("separator.png"); repetición de fondo: no repetición; ancho: 2px; altura: 35px; flotador izquierdo; margen superior: 7px; margen derecho: 10px;
Paso 9: Barra de progreso
derecha: XXpx; para asegurarse de que se mueve junto con la barra de juego. .jp-progress background: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px; -webkit-box-shadow: recuadro 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-shadow: inserción 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); cuadro de sombra: recuadro 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); ancho: 280px; altura: 10px; flotador izquierdo; margen superior: 13px; .jp-seek-bar width: 0px; altura: 100%; cursor: puntero; .jp-seeking-bg background: # 575555; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px; .jp-play-bar background: url ("play-bar.png") dejó repetir-x; ancho: 0px; altura: 10px; posición: relativa; índice z: 9999; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px; .jp-play-bar span posición: absoluta; arriba: -3px; derecha: -12px; fondo: url ("handle.png") centro sin repetición; ancho: 16px; altura: 17px; 
Paso 10: Tiempo actual / Duración
.jp-current-time, .jp-duration font-size: 11px; Familia tipográfica: Arial; color: # 444444; margen superior: 12px; flotador izquierdo; .jp-current-time float: left; pantalla: en línea; .jp-duration float: left; pantalla: en línea; text-align: right; .jp-video .jp-current-time margin-left: 10px; .jp-video .jp-duration margin-right: 10px; .time-sep float: left; margen: 13px 3px 0 3px; tamaño de fuente: 11px; Familia tipográfica: Arial; color: # 444444;
Paso 11: Botones de volumen y barra
esquema: ninguno; 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 tramo de nuevo aplicaremos una imagen de fondo, usar posición: absoluta; y posicionarlo a la derecha para que se mueva correctamente. .jp-video a.jp-mute, .jp-video a.jp-unmute text-indent: -9999px; flotador izquierdo; altura: 35px; esquema: ninguno; .jp-mute float: left; fondo: url (… /images/sprite.png) -80px 0 no-repetir; margen superior: 1px; margen izquierdo: -10px; ancho: 35px; a.jp-unmute background: url (… /images/sprite.png) -115px 0 no se repite; margen superior: 1px; margen izquierdo: -13px; pantalla: ninguna; ancho: 38px; .jp-volume-bar float: left; margen superior: 13px; margen derecho: 10px; desbordamiento: oculto; ancho: 70px; altura: 10px; cursor: puntero; fondo: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px; -webkit-box-shadow: recuadro 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-shadow: inserción 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); cuadro de sombra: recuadro 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); .jp-volume-bar-value fondo: transparente; ancho: 0px; altura: 10px; posición: relativa; .jp-volume-bar-value span posición: absoluta; arriba: 0px; derecha: 0px; fondo: url (… /images/volume.png) centro sin repetición; ancho: 11px; altura: 10px;
Paso 12: Botón de pantalla completa
esquema: ninguno; de nuevo (lo que es cierto que podría aplicarse a todos los anclajes al comienzo de la hoja de estilo). .jp-full-screen background: url (… /images/sprite.png) -150px 0 no-repetir; flotador izquierdo; ancho: 40px; altura: 35px; texto-sangría: -9999px; margen izquierdo: -15px; esquema: ninguno; .jp-restore-screen background: url (… /images/sprite.png) -150px 0 no se repite; flotador izquierdo; ancho: 40px; altura: 35px; texto-sangría: -9999px; margen izquierdo: -15px; esquema: ninguno;
Conclusión
Accentsconagua