Insertar un vídeo

Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML <video>. Su estructura es muy similar a la que empleábamos con las imágenes, aunque en este caso sí lleva etiqueta de cierre.

<video src="video/fireworks_reducido.webm"></video>

La ruta del vídeo debe ser la que corresponda (en nuestro ejemplo, está colocado dentro de una carpeta llamada video). Al probar la película en el navegador, obtendremos un resultado similar al de la figura:

Icono de iDevice

Nota

Si no se muestran los controles o el vídeo no se reproduce, haga clic con el botón derecho sobre él para mostrar un menú con las opciones necesarias para corregirlo.


Con todo esto podríamos definir lo que harían estos ejemplos:

<video src="video/fireworks_reducido.webm" width="300" height="208" autoplay controls></video>

Se carga el vídeo y se reproduce inmediatamente, mostrando los controles.

<video src="video/fireworks_reducido.webm" width="300" height="208" preload controls></video>

Se muestran los controles, el vídeo se precarga, pero no se reproduce hasta que el usuario pulsa el botón de reproducción.

<video src="video/fireworks_reducido.webm" width="300" height="208" preload="none" controls></video>

Igual que el anterior, pero no se precarga hasta que el usuario hace clic.

Icono de iDevice de pregunta Pregunta de Elección Múltiple
¿Qué etiqueta HTML debemos utilizar si queremos insertar un vídeo?
<video src=/>"nobredelarchivo.extension">.
<video src="nombredelarchivo.extension"></video>
<video ="nombredelarchivo.extension"></video>

Pregunta Verdadero-Falso
La siguiente afirmación, ¿es verdadera o falsa?
Hay una forma de evitar la dificultad de que algún navegador no pueda leer ciertos formatos de vídeo, escribiendo el siguiente código:

<video>
<source src="nombre.mp4" type="video/mp4" />
<source src="nombre.ogg" type="video/ogg" />
<source src="nombre.webm" type="video/webm" />
</video> 
Verdadero Falso

Obra colocada bajo licencia Creative Commons Attribution Share Alike 3.0 License