2009-12-14 25 views
5

Ho giocato con il tag video HTML5 e sono perplesso sul modo migliore di degradare quando non riesci a supportare un codec?HTML5 Video e degrado?

per browser meno recenti (o IE) che non supportano il tag video a tutto questo molto è semplice:

<video width="320" height="240"> 
    <source src="vid.ogv" type='video/ogg'> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video> 

Cadranno attraverso e riceveranno la versione di Flash (o altro alternativo come un'immagine!)

Come quando il browser supporta il tag ma non il codec - ad esempio FireFox 3.5 per esempio - e non posso supportare OGG (probabilmente perché ho già vasti archivi di H.264):

<video width="320" height="240"> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video> 

Tutto ciò che ottengo in FireFox 3.5 è una scatola grigia con una x in essa. Questa non è esattamente una grande esperienza utente per gli utenti di FireFox! Posso solo pensare di usare JavaScript per verificare FF3.5 e cambiare il DOM !! questo è davvero il vecchio cattivo tutto da capo! ... o c'è qualche parte della specifica che mi manca come un tag 'novideo'?

+0

Per ripetere ciò che è stato detto in un commento in basso: Firefox eseguirà il fallback del video flash solo se viene specificata una sorgente ogg con un tipo MIME corretto. – BumbleB2na

risposta

4

Una parte importante del degrado aggraziato è la capacità di interrogazione ... Immergersi in HTML5 è un'ottima lettura ... in particolare, guarda lo video section. Codice rilevante qui:

function supports_h264_baseline_video() { 
    if (!supports_video()) { return false; } 
    var v = document.createElement("video"); 
    return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
} 

Nota: questo richiede il controllo DOM, ma per le funzionalità e non la firma del browser. E 'la cosa giusta da fare :-)

Una volta che sai se il browser in grado di supportare, è possibile mostrare il tag video o tirare su un lightbox o reindirizzare, come si vede in forma.

+0

Questo è meglio che controllare la firma del browser di sicuro, ma è ancora un po 'più javascript di quanto avrei sperato in un nuovo standard ... –

+0

D'accordo, è un peccato. Poiché HTML non ha un concetto di ramificazione, non vedo alcun modo per evitare javascript qui. Gli approcci non-script esistenti si basavano su livelli di compatibilità successivi, ma HTML5 Video non riesce a causa della divisione dei codec, che sarebbe crufty da utilizzare "nella" lingua. – r00fus

+1

Ricorda che questo non funziona per Android, che non supporta correttamente il metodo canPlayType. –

0

Video for Everybody 's test page indica che Firefox 3.5 può riprodurre solo OGG. Potresti voler aggiungere una versione flash se davvero non vuoi aggiungere OGG. VfE inoltre non usa JavaScript, quindi potrebbe valere la pena di esaminarlo.

+1

VfE richiede ancora una versione OGG perché Firefox non si imposta automaticamente sulla versione Flash o su qualsiasi altra cosa, se non si dispone di un OGG. –

1

Un ottimo modo per affrontare questo problema è utilizzare la libreria js di modernizzazione. È davvero facile da usare e veloce. Può controllare le funzionalità HTML5 nel browser dell'utente. Visita il sito qui: http://www.modernizr.com/

+0

Questa sarebbe sicuramente un'ottima soluzione, ma la mia domanda riguarda davvero l'uso del markup nei browser che supportano l'HTML 5 –