En la sección anterior hemos estudiado los distintos formatos de los vídeos. Además, hemos visto algunos bancos de vídeos gratuitos y hemos convertido un vídeo en los distintos formatos habituales en la web: MP4, OGG y WebM.
En esta sección vamos a estudiar con detalle la inserción de vídeo en una página web, sin utilizar complementos ni reproductores externos. Para ello vamos a utilizar la etiqueta de HTML5 <video>.
El elemento <video> dispone de varios atributos que nos permiten establecer sus diferentes valores de comportamiento.
<video id="medio" width="700" height="350" controls> <source src="video.mp4"> <source src="video.ogg"> Tu navegador no soporta vídeo </video>
<video id="reproductor" width="700" height="350" preload="none" controls loop poster="portada.jpg"> <source src="video.mp4"> <source src="video.ogv"> Tu navegador no soporta vídeo </video>
Conviene especificar el contenido de un vídeo para que el navegador sepa identificar el tipo de formatos de nuestros archivos y sepa cómo manejarlos. En el siguiente ejemplo el navegador elegirá solamente un vídeo. Al especificar el atributo type (no obligatorio), permitimos que el navegador conozca el tipo MIME (del inglés Multi-Purpose Internet Mail Extensions) y los tipos de codecs que debe utilizar antes de descargar el vídeo. Si no indicamos dicho atributo, el navegador intentará averiguar, mediante prueba y error, cuál es el tipo adecuado.
<video> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> <source src="video.mp4" type="video/mp4"> <img src="imagen.png" alt="Video no soportado"> Tu navegador no soporta vídeo </video>
Selecciona 4 respuestas
Crea una nueva entrada en tu blog en la que debes incluir, mediante la etiqueta <video>, el vídeo trabajado en la sección anterior.