2009-12-14 14 views
5

He estado jugando con la etiqueta de video HTML5 y estoy desconcertado sobre la mejor manera de degradar cuando no se puede admitir un códec?Vídeo HTML5 y degradación?

Para los navegadores antiguos (o IE) que no soportan la etiqueta de vídeo en todo esto es bastante sencillo:

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

Caerán a través y recibirán la versión de Flash (u otro alternativo, como una imagen!)

Qué tal si el navegador admite la etiqueta pero no el códec, como FireFox 3.5 por ejemplo, y no puedo admitir OGG (posiblemente porque ya tengo grandes archivos 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> 

Todo lo que obtengo en FireFox 3.5 es un cuadro gris con una x en él. ¡Esto no es exactamente una gran experiencia de usuario para los usuarios de Firefox! ¡Solo puedo pensar en usar JavaScript para buscar FF3.5 y cambiar el DOM! ¿Es esto realmente el viejo mal otra vez? ... o hay alguna parte de la especificación que me estoy perdiendo como una etiqueta 'no video'?

+0

Para reiterar lo que se dijo en un comentario en la parte inferior: Firefox solo recurrirá al video flash si se especifica una fuente ogg con un tipo MIME correcto. – BumbleB2na

Respuesta

4

Una parte importante de la degradación elegante son las capacidades de consulta ... Sumérgete en HTML5 es una gran lectura ... específicamente, mira el video section. código relevante aquí:

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: esto requiere la comprobación de DOM, pero para las capacidades y no firma navegador. Es el correcto hacerlo :-)

Una vez que sepa si el navegador puede admitir, puede mostrar su etiqueta de video o desplegar un lightbox o redireccionar como mejor le parezca.

+0

Eso es mejor que verificar la firma del navegador con certeza, pero sigue siendo un poco más de javascript de lo que esperaba de un nuevo estándar ... –

+0

De acuerdo, es desafortunado. Como HTML no tiene un concepto de ramificación, no veo forma de evitar el javascript aquí. Los enfoques existentes que no son guiones dependían de capas de compatibilidad sucesiva, pero HTML5 Video falla debido a la división del códec, que sería difícil de "introducir" en el idioma. – r00fus

+1

Tenga en cuenta que esto no funciona para Android, que no es compatible con el método canPlayType correctamente. –

0

Video for Everybodytest page indica que Firefox 3.5 solo puede reproducir OGG. Es posible que desee agregar una versión flash si realmente no desea agregar OGG. VfE tampoco usa JavaScript, por lo que podría valer la pena investigarlo.

+1

VfE todavía requiere una versión OGG porque Firefox no cambiará a la versión Flash, o cualquier otra cosa, si no tiene un OGG para eso. –

1

Una buena manera de abordar este problema es utilizar la biblioteca modernizer js. Es realmente fácil de usar y rápida. Puede verificar las capacidades de HTML5 en el navegador del usuario. Visite el sitio aquí: http://www.modernizr.com/

+0

Eso sin duda sería una gran solución, pero mi pregunta es realmente sobre el uso de marcado en los navegadores compatibles con HTML 5 –

Cuestiones relacionadas