Cómo crear un Reproductor de Vídeo con CSS, HTML5 y jQuery
Español | Css3,jQuery,Html5 | Free | Publicación:2013 | Online
Descripción:En este tutorial vamos a codificar un reproductor de vídeo de la interfaz de usuario impresionista de Vladimir Kudinov. Vamos a codificar con CSS3 para el estilo y los "MediaElement.js" para la funcionalidad. MediaElement.js es un audio de HTML5 y un reproductor de vídeo que también funciona para los navegadores más antiguos que utilizan Flash y Silverlight para imitar el MediaElement API HTML5.
Paso 1 - Descarga de MediaElement.js
En primer lugar tenemos que descargar el script "MediaElement.js" y extraerlo. Luego de la carpeta "build" necesitamos tres archivos:
- flashmediaelement.swf
- MediaElement-y-player.min.js
- silverlightmediaelement.xap
A continuación, copie todos estos tres archivos en el mismo directorio, voy a copiar a mi carpeta "js".
Paso 2 - Formato HTML
Ahora, tenemos que vincular a la biblioteca jQuery, podemos albergar de forma local o use el ofrecido por Google. Entonces tenemos que vincular a "MediaElement-y-player.min.js" archivo de comandos y el archivo CSS. Todos estos tres archivos deben estar dentro del <head>
Para crear el reproductor de vídeo sólo tenemos que añadir la nueva etiqueta de vídeo HTML5. A continuación, vamos a añadir algunos atributos a la etiqueta de vídeo: la anchura y la altura del video y el cartel. El cartel es la imagen que se puede añadir que se muestra en la parte superior del video hasta que el usuario pulse el botón de reproducción.
Ahora sólo tenemos que añadir el siguiente código para cargar los controles de vídeo y establecer algunos parámetros. Los ajustes que vamos a agregar son:
- alwaysShowControls: verdaderos para mostrar siempre los controles de vídeo y falsos para ocultar el cabo del ratón.
- videoVolume: para que el control deslizante de volumen sea horizontal.
- características: ['PLAYPAUSE', 'progreso', 'volumen', 'pantalla completa'] - aquí vamos a establecer qué controles queremos añadir en el video.
Paso 3 - Estilos básicos de vídeo
Vamos a empezar por agregar algunos estilos de restablecimiento de los elementos que vamos a utlilizar.
A continuación, vamos a añadir los estilos generales al contenedor de vídeo. Se necesitan Todas las propiedades CSS que estamos utilizando en este paso para crear el diseño de contenedores de vídeo. Esto no creará ningún estilo en el video, sino que sólo se colocará todos los elementos de vídeo en el lugar correcto.
Paso 4 - Controles Container
Vamos a empezar a añadir un botón de gran juego el centro del contenedor de vídeo.
A continuación, vamos a estilo y la posición del control contenedor de vídeo. Nos posicionamos en la parte inferior, le dan una altura 34px y añadir un color de fondo. Usaremos RGBA para hacer el fondo transparente, pero RGBA no es compatible con los navegadores más antiguos así que también daremos una reserva con RGB. A continuación, vamos a añadir algunos estilos generales botones y añada las imágenes sprites. Si usted no sabe lo sprites CSS son o cómo trabajar con el tema de echar un vistazo a este artículo.
Paso 5 - Botones de control de vídeo
En este paso vamos a situar los botones en el lugar correcto. Así que básicamente lo que vamos a hacer aquí es: la posición de cada botón en el envase controles, establecer el ancho y la altura de cada botón y la posición de la imagen de fondo con el fin de mostrar el botón de la derecha.
Paso 6 - Deslizador de volumen
Para el estilo del control de volumen que va a colocar, luego añadir la anchura y altura, y bordes redondeados.
Paso 7 - Barra de progreso
Los estilos de la barra de progreso son básicas. Tenemos que colocar en la parte superior del contenedor controles, agregar algunos colores de fondo para cada estado (todos y cargado de tiempo). Por el momento actual vamos a establecer el ancho a 0 y se actualizará automáticamente cuando se reproduce la película.
Paso 8 - Barra de progreso de la manija y hora actual Tooltip
En este paso vamos a añadir la manija barra de progreso y la punta de la herramienta que mostrará la hora actual en vuelo estacionario. Así que vamos a ajustar la posición, agregue las imágenes de fondo, ajustar los anchos y altos, y algunos estilos de tipografía.
Paso 9 - La Pendiente verde(o el color que gustes)
Para terminar nuestro tutorial sólo tenemos que añadir un gradiente CSS3 que se utilizará en la barra de progreso y el deslizador de volumen.
Conclusión
Hemos codificado con éxito este reproductor de vídeo. y espero que lo puedan implementar ya que no es muy complejo de hacerlo.
gracias por estos grandes aportes
ResponderEliminarDe lo mejor que se encuentra en la red, gracias por compartirnos tu conocimiento.
ResponderEliminar