Controles personalizados de video HTML 5

Question

Al igual que muchos desarrolladores web, estoy esperando transmitir videos que utilicen la nueva etiqueta HTML 5 <video>. La compatibilidad con el navegador definitivamente aún no es lo suficientemente amplia, por lo que es obligatorio utilizar Flash/SWF fallback.

Esto me hizo pensar: en Flash, es posible personalizar al máximo los controles de reproducción (pausa, reproducir, detener, buscar, volumen, etc.) en HTML 5 ?. ¿Qué opciones hay para personalizar los glifos, iconos y colores de los controles de video? ¿Se requiere Javascript? Por ejemplo, la siguiente página hace diferentes controles en función del navegador - probado usando FF3.5, Chrome y Safari:

http://henriksjokvist.net/examples/html5-video/

Sería realmente impresionante para personalizar y estandarizar los controles en todos los navegadores e incluso coincidir con los controles de Flash utilizado por navegadores más antiguos.

Answer 1

En la especificación de HTML5, hay un controlsattribute para <video>.

También vea este artículo: Video on the Web - Dive into HTML5. Explica:

De forma predeterminada, el elemento no expondrá ningún tipo de controles del reproductor. Puede crear sus propios controles con HTML, CSS y JavaScript antiguos. El elemento tiene métodos como play() y pause() y una propiedad de lectura/escritura llamada currentTime. También hay volumen de lectura/escritura y propiedades silenciadas. Entonces realmente tienes todo lo que necesitas para construir tu propia interfaz.

Si no desea construir su propia interfaz, puede indicarle al navegador que muestre un conjunto de controles integrados. Para hacer esto, solo incluya el atributo de controles en su etiqueta.

Answer 2

Supongo que la apariencia de los controles depende del navegador (y por lo tanto no es muy personalizable). Puede ver cómo se ve la página de prueba en todos los navegadores enviándola al Litmus.

Answer 3

YouTube actualmente ejecuta una versión beta HTML5. Puede activarlo visitando http://www.youtube.com/html5. Actualmente, no todos los videos se muestran en HTML5 después de activar la versión beta. Los videos que se muestran en HTML5 obtienen una animación de carga diferente para que pueda identificarlos (como este, http://www.youtube.com/watch?v=KT1wdjlbyFc).

Como puede ver, su reproductor de video tiene el mismo aspecto que la versión flash.

Answer 4

Para aquellos interesados ​​en un gran reproductor de videos HTML5 con múltiples navegadores, compruebe lo que Vimeo (http://vimeo.com) está haciendo. Visite cualquier video con un navegador compatible con HTML5 (funciona al menos con Safari, Chrome e IE9) y elija "Cambiar a reproductor HTML5".

Han implementado controles HTML personalizados que reproducen por completo su aspecto de reproductor Flash. Los controles son idénticos en todos los navegadores.

Mejor implementación cross-browser que he visto hasta la fecha. Incluso usan un elemento <canvas> para animar el selector de volumen.