• Publicidad
  • Contacto
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
Sin resultados
Ver todos los resultados

Cómo construir un reproductor de video personalizado en HTML5 con jQuery y CSS3

Diego CambiasoporDiego Cambiaso
10/06/2011
enDesarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura2 minutos
Cómo-construir-un-reproductor-de-video-personalizado-en-HTML5-con-jQuery-y-CSS3
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

Cómo-construir-un-reproductor-de-video-personalizado-en-HTML5-con-jQuery-y-CSS3En 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:

  1. Implementar los controles para el video.
  2. El marcado básico para los controles.
  3. Encapsular el código jQuery en un plugin.
  4. Personalizar la apariencia con CSS, en este caso CSS3.
  5. Theme.

1 – Video Controles

En este tutorial emplea jQuery y jQueryUI para los controles de búsqueda y volumen.

Contenidorelaciondo

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022

Samsung e IBM lanzan el reto “Call for Code”para homenajear a los héroes de la vida

09/11/2021

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

Tags: CSScss3Curiosidaddesarrollo webHTML5JavascriptJavascriptjQueryjquery cssjquery htmlplugin jqueryRecursos
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

Contenido Relacionado

Noticias

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022
Recursos

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022
Transformación Digital

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022
Cargar más

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...