En marzo hablamos sobre cómo implementar controles de video con Mootools para HTML 5; hoy encontré vía Twitter, un tutorial (en inglés) que explica detalladamente cómo construir un reproductor de video personalizado en HTML5 con jQuery y CSS3.
El tutorial está muy bien explicado, pero es en inglés, puede parecer algo largo, pero en realidad las porciones más extensas de código son las que corresponden a los estilos (CSS).
Básicamente comprender este tutorial hay que entender los 5 pasos en los que está estructurado:
- Implementar los controles para el video.
- El marcado básico para los controles.
- Encapsular el código jQuery en un plugin.
- Personalizar la apariencia con CSS, en este caso CSS3.
- Theme.
1 – Video Controles
En este tutorial emplea jQuery y jQueryUI para los controles de búsqueda y volumen.
2 – HTML
<div class="ghinda-video-controls"> <a class="ghinda-video-play" title="Play/Pause"></a> <div class="ghinda-video-seek"></div> <div class="ghinda-video-timer">00:00</div> <div class="ghinda-volume-box"> <div class="ghinda-volume-slider"></div> <a class="ghinda-volume-button" title="Mute/Unmute"></a> </div> </div>
3 – Plugin jQuery
El código jQuery que se utiliza es empaquetado en un plugin.
4 – CSS
Este tutorial parece más extenso por el abundante código CSS que requiere.
5 – Theme
En el plugin se crean las opciones básica de visualización, estas opciones integran en child theme que puede ser cambiado.
Conclusión
Building a custom HTML5 video player with CSS3 and jQuery
Desde hace unos años bibliotecas como jQuery, nos demostraron que para crear una página web no es necesario utilizar tecnologías propietarias ni sacrificar la usabilidad. Ahora con HTML5 y CSS3 combinados con jQuery la interacción de la interfaz y el diseño elaborado y personalizado, alcanzan nuevos niveles nunca antes imaginados.
Visitar tutorial: dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery
