2009-12-14 5 views
5

J'ai joué avec le tag vidéo HTML5 et je suis perplexe quant à la meilleure façon de se dégrader lorsque vous ne pouvez pas supporter un codec?HTML5 Vidéo et dégradation?

Pour les anciens navigateurs (ou IE) qui ne prennent pas en charge la balise vidéo à tout cela est simple tout à fait:

<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> 

Ils tomberont à travers et recevront la version Flash (ou toute autre alternative, comme Que se passe-t-il lorsque le navigateur supporte la balise mais pas le codec - comme FireFox 3.5 par exemple - et que je ne peux pas supporter OGG (possiblement parce que j'ai déjà de vastes archives de H.264):

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

Tout ce que j'obtiens dans FireFox 3.5 est une boîte grise avec un x dedans. Ce n'est pas vraiment une super expérience utilisateur pour les utilisateurs de FireFox! Je ne peux penser à utiliser JavaScript pour vérifier FF3.5 et changer le DOM !! est-ce vraiment le mauvais vieux encore une fois! ... ou y a-t-il une partie de la spécification que je rate comme une balise "novideo"?

+0

Pour réitérer ce qui a été dit dans un commentaire en bas: Firefox ne se repliera sur la vidéo flash que si une source ogg avec un type MIME correct est spécifiée. – BumbleB2na

Répondre

4

Une partie importante de la dégradation gracieuse est les capacités d'interrogation ... Plongez dans HTML5 est une excellente lecture ... spécifiquement, regardez le video section. Code pertinent ici:

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"'); 
} 

Remarque: cela nécessite la vérification DOM, mais pour les capacités et non la signature du navigateur. Une fois que vous savez si le navigateur peut prendre en charge, vous pouvez afficher votre balise vidéo ou tirer vers le haut une visionneuse ou rediriger comme bon vous semble.

+0

C'est mieux que de vérifier la signature du navigateur, mais c'est encore un peu plus javascript que ce que j'aurais espéré d'un nouveau standard ... –

+0

D'accord, c'est dommage. Puisque HTML n'a pas de concept de branchement, je ne vois aucun moyen d'éviter javascript ici. Les approches non-script existantes reposaient sur des couches de compatibilité successives, mais la vidéo HTML5 échoue à cause de la division du codec, ce qui serait difficile à cuire "dans" la langue. – r00fus

+1

Sachez que cela ne fonctionne pas pour Android, qui ne supporte pas correctement la méthode canPlayType. –

0

Video for Everybodytest page indique que Firefox 3.5 ne peut lire que OGG. Vous voudrez peut-être ajouter une version flash si vous ne voulez vraiment pas ajouter OGG. VfE n'utilise pas non plus JavaScript, il vaut donc peut-être la peine de le regarder.

+1

VfE nécessite toujours une version OGG car Firefox ne sera pas utilisé par défaut pour la version Flash, ou autre chose d'ailleurs, si vous n'avez pas d'OGG pour cela. –

1

Un très bon moyen de s'attaquer à ce problème est d'utiliser modernizer js library.Its vraiment facile à utiliser et rapide.Il peut vérifier les capacités HTML5 dans le navigateur de l'utilisateur. Visitez le site ici: http://www.modernizr.com/

+0

Ce serait certainement une excellente solution, mais ma question est vraiment à propos de l'utilisation du balisage dans les navigateurs qui prennent en charge HTML 5 –