Para que todos podamos rememorar por un momento, he aquí un ejemplo de cómo incrustar vídeos en un sitio web de la forma clásica:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Por supuesto, una sintaxis así es de todo menos bonita.
Pero incluso si usted ignora el punto de vista estético: La sintaxis en esta forma es simplemente demasiado propenso a errores y demasiado complejo. Es mucho más fácil integrar vídeos en HTML5. Para ello se utiliza el elemento de vídeo.
He aquí un ejemplo de cómo se puede integrar este elemento de vídeo:
<video src="video.ogv" width="300" height="200"> Lamentablemente, su navegador no es compatible con HTML5 </video>.
Esta es la variante más sencilla de este formulario. Sin embargo, tres atributos son decisivos para esta forma sintáctica. El vídeo a incrustar se especifica mediante src. Asegúrese de introducir aquí la ruta correcta. Los dos atributos width y height determinan la anchura y la altura del vídeo. Si no se especifica ninguno de los dos valores, el vídeo se mostrará en su tamaño original. Si sólo introduces uno de los dos valores, el otro lo calcula automáticamente el navegador. El atributo autoplay indica al navegador que inicie el vídeo automáticamente en cuanto se haya cargado la página. Este atributo no debería configurarse normalmente, ya que la reproducción automática no suele ser deseada por los usuarios. Esto se aplica sobre todo a los usuarios que utilizan dispositivos móviles con poco ancho de banda.
Otro atributo interesante son los controles. Si se utiliza, el navegador mostrará elementos de control nativos para la reproducción y el volumen.
<video src="video.ogv" width="300" height="200" controls> Lamentablemente, tu navegador no es compatible con HTML5 </video>
Aquí está el resultado en el navegador:
El vídeo no sólo se puede pausar y reiniciar mediante la barra que aparece, sino que también contiene el control de volumen.
Se puede utilizar el atributo poster para especificar una imagen que se mostrará hasta que se inicie el vídeo. Para ello se utiliza el atributo poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Lamentablemente, tu navegador no es compatible con HTML5 </video>.
De nuevo, asegúrese de introducir la ruta correcta para que la imagen pueda verse realmente.
Se recomienda precaución al utilizar el atributo autoplay. Este atributo especifica que el vídeo debe reproducirse automáticamente en cuanto esté disponible.
<video src="video.ogv" width="300" height="200" autoplay> Lamentablemente, tu navegador no es compatible con HTML5 </video>.
El atributo preload puede ser interesante en términos de tráfico. Esto se debe a que este atributo controla el comportamiento de precarga. El atributo puede tener los siguientes valores:
- auto - El navegador puede precargar todo el archivo.
- none - No es necesario precargar el archivo.
- metadata - El archivo puede ser precargado.
Si falta el atributo preload, se aplica la configuración por defecto del navegador.
Los vídeos y los códecs
Cualquiera que se ocupe de incrustar y reproducir vídeos en sitios web se encontrará tarde o temprano con el problema de los distintos códecs. Gracias a estos códecs, los vídeos pueden comprimirse y descomprimirse eficazmente. El problema es que los fabricantes de navegadores aún no se han puesto de acuerdo sobre un formato común de códecs. Para HTML5 (y, en última instancia, también para usted), esto significa que no hay códecs estandarizados para vídeos y archivos de audio.
En el caso de los vídeos, los formatos Ogg y MP4 se han consolidado. Por tanto, siempre estará en el lado seguro si ofrece el vídeo en estos dos formatos. Para ello, asigne dos elementos fuente al elemento de vídeo.
<video width="400" height="300" controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> </video>
Aquí no se especifica la fuente de vídeo dentro del elemento vídeo. En su lugar, sólo se proporciona información general sobre la visualización. El elemento source determina el vídeo que se mostrará. El vídeo correspondiente se asigna al atributo src. A continuación se indica el tipo de vídeo y el formato en el que está disponible el vídeo.
Si se especifican varios elementos fuente, el navegador siempre reproduce el primer vídeo que "encaja". A continuación se describe en qué consiste este "encaje".
Pero, ¿qué navegador soporta realmente qué formato? La siguiente tabla ofrece la respuesta a esta pregunta.
| Navegador | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | A partir de la versión 9 | |
| Mozilla Firefox | Sí | |
| Google Chrome | Sí | Sí |
| Opera | Sí | |
| Safari | Sí | |
| iPhone | Sí | |
| Android | Sí |
La tabla deja claro el dilema: la interpretación de los formatos se distribuye casi a partes iguales entre los distintos navegadores. Por lo tanto, está casi obligado a especificar vídeos en ambos formatos.
El atributo media, que sólo puede asignarse al elemento fuente, puede utilizarse para especificar explícitamente el tipo de medio para el que es adecuado el vídeo. Para especificar vídeos específicamente para determinados dispositivos finales, el atributo media debe asignarse al elemento src. Este atributo se utiliza para especificar el tipo de medio deseado.
Una posible aplicación para el elemento source podría ser la siguiente
<video width="400" height="300"> <!-- Sólo para dispositivos móviles --> <source src="video_mobil.ogg" media="handheld" /> <!-Todos los demás dispositivos --> <source src="video_normal.ogg" media="all" /> </video>
El atributo media se utiliza aquí para comprobar si se trata de un dispositivo móvil. En este caso, el vídeo se reproduce en un tamaño más pequeño. Si se trata de otro dispositivo, se utiliza el valor all.
Integrar vídeos de forma segura
Es bien sabido que HTML5 aún no es compatible con todos los navegadores. Por supuesto, esto también se aplica al elemento de vídeo. Una solución consiste en combinar diferentes técnicas de incrustación. Se trata de combinar los conocidos elementos object e embed con vídeo. Esto podría tener el siguiente aspecto
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640 "height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Los vídeos incrustados de esta forma podrán reproducirse en la mayoría de los navegadores. Los navegadores que reconozcan el elemento de vídeo accederán a él. Otros navegadores, sin embargo, utilizan la información del objeto o del elemento embed.
