Controlli video personalizzati HTML 5

Question

Come molti sviluppatori web non vedo l'ora di effettuare lo streaming di video che utilizza il nuovo tag HTML 5 <video>. Il supporto del browser non è ancora sufficientemente ampio, quindi usare un Flash/SWF fallback è un must.

Questo mi ha fatto riflettere: in Flash è possibile personalizzare i controlli di riproduzione (pausa, riproduzione, interruzione, ricerca, volume, ecc.) In HTML 5 ?. Quali opzioni ci sono per personalizzare i glifi, le icone e i colori dei controlli video? Javascript è richiesto? Per esempio la pagina seguente rende diversi controlli a seconda del browser - testati utilizzando FF3.5, Chrome e Safari:

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

Sarebbe davvero impressionante per personalizzare e uniformare i controlli tutti i browser e anche corrispondere i controlli Flash usato dai browser più vecchi.

Answer 1

Nelle specifiche HTML5, c'è un controlsattribute per <video>.

Date anche un'occhiata a questo articolo: Video on the Web - Dive into HTML5. Spiega:

Per impostazione predefinita, l'elemento non espone alcun tipo di controllo giocatore. Puoi creare i tuoi controlli con semplici vecchi HTML, CSS e JavaScript. L'elemento ha metodi come play() e pause() e una proprietà di lettura/scrittura chiamata currentTime. Vi sono anche proprietà di lettura/scrittura del volume e disattivate. Quindi hai davvero tutto il necessario per costruire la tua interfaccia.

Se non si desidera creare la propria interfaccia, è possibile indicare al browser di visualizzare un set integrato di controlli. Per fare ciò, basta includere l'attributo controls nel tag.

Answer 2

La mia ipotesi è che l'aspetto dei controlli dipende dal browser (e quindi non è molto personalizzabile). Puoi vedere come appare la tua pagina di test in tutti i browser inviandoli a Litmus.

Answer 3

YouTube sta attualmente eseguendo una versione HTML5 beta. Puoi attivarlo visitando http://www.youtube.com/html5. Al momento non tutti i video vengono visualizzati in HTML5 dopo l'attivazione della versione beta. I video visualizzati in HTML5 ottengono una diversa animazione di caricamento in modo da poterli identificare (come questo http://www.youtube.com/watch?v=KT1wdjlbyFc).

Come si può vedere il loro lettore video ha lo stesso aspetto della versione flash.

Answer 4

Per chi è interessato a un video player HTML5 cross-browser, controlla cosa sta facendo Vimeo (http://vimeo.com). Visita qualsiasi video con un browser compatibile con HTML5 (funziona con almeno Safari, Chrome e IE9) e scegli "Passa a HTML5 Player".

Hanno implementato controlli HTML personalizzati che replicano completamente il loro aspetto grafico. I controlli sembrano identici tra i vari browser.

Miglior implementazione cross-browser che ho visto fino ad oggi. Usano anche un elemento <canvas> per animare il selettore di volume.