6/11/2019 Insertar un vídeo | Elementos multimedia

HTML 5 en la educación
Volver al índice
Insertar un vídeo

Elementos multimedia 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
Recurso TIC: Multimedia
empleábamos con las imágenes, aunque en este caso sí lleva etiqueta de cierre.
Licencias de uso

Imágenes. Conceptos básicos <video src="video/fireworks_reducido.webm"></video>

Insertar una imagen

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

Insertar un vídeo externo

Audio

Resumen

Actividades y ejemplos

Aplicación al aula

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.

www.ite.educacion.es/formacion/materiales/182/cd/cinco/insertar_un_vdeo.html 1/5
6/11/2019 Insertar un vídeo | Elementos multimedia

Así podemos probar diferentes formatos para ver cuál es el que se reproduce en nuestros navegadores habituales.
Esa misma página no se reproducirá correctamente en Internet Explorer, pero sí lo hará en Google Chrome. De
hecho, Google Chrome sería capaz de reproducir cuatro de los formatos que hemos generado, como se muestra en
la figura:

La etiqueta video ofrece una solución alternativa, para evitar estos inconvenientes de formatos, que consiste en
ofrecer el vídeo en varios formatos, para que sea el propio navegador el que muestre el más adecuado.

La etiqueta se escribiría de la siguiente manera:

<video>
<source src="video/fireworks_reducido.mp4" type="video/mp4" />
<source src="video/fireworks_reducido.ogg" type="video/ogg" />
<source src="video/fireworks_reducido.webm" type="video/webm" />
</video>

Este ejemplo concreto se reproduciría perfectamente en la mayor parte de los navegadores actuales.

Dimensiones del vídeo

Como sucedía con las imágenes, en un vídeo podemos indicar su anchura y altura mediante los valores width y
height. De hecho es recomendable hacerlo, para que el navegador sepa de antemano el espacio que debe destinar
al vídeo. Por tanto, este ejemplo es más adecuado que el anterior:

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

www.ite.educacion.es/formacion/materiales/182/cd/cinco/insertar_un_vdeo.html 2/5
6/11/2019 Insertar un vídeo | Elementos multimedia

Los valores que emplearemos serán los que utilizamos al crear el vídeo.

Más parámetros
Hay otros parámetros que resultan útiles para la reproducción del vídeo:
controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. Basta con insertar
ese término, sin más valores.

autoplay: al indicar este valor, el vídeo se reproducirá en cuanto esté listo.

preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página. Por el contrario, indicando
preload="none", no se cargará hasta que el usuario haga clic en el vídeo para su reproducción. Esta segunda
opción es muy útil, si el vídeo no es el recurso fundamental de la página y vamos a tener personas que no estén
interesadas en verlo, ya que nos ahorrará mucho ancho de banda.

loop: indicándolo conseguiremos que el vídeo se reproduzca cíclicamente. Si no indicamos nada, al terminar su
reproducción se detendrá.

muted: el vídeo no tendrá sonido al comenzar.

Nota

Como se puede observar, la mayoría de estos parámetros no requieren

indicar su estado. Son valores booleanos, que están activos o inactivos. Si
se indica el parámetro, está activo y si no, no lo están.

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.

Insertar vídeo con un editor web

Para insertar un vídeo con BlueGriffon, seleccionaremos la opción Insertar>Elemento HTML 5>Video. Aparecerá el
cuadro de diálogo de la figura, donde podremos especificar el archivo que vamos a insertar y algunos valores
adicionales:

www.ite.educacion.es/formacion/materiales/182/cd/cinco/insertar_un_vdeo.html 3/5
6/11/2019 Insertar un vídeo | Elementos multimedia

Se pueden cambiar los valores habituales e incluso establecer el fotograma, que se utilizará como imagen fija,
cuando el vídeo no se haya reproducido aún.

Según la versión, es probable que el vídeo no se muestre, aunque esté ahí. Para visualizarlo debemos reproducir la
página en nuestro navegador.

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" />
www.ite.educacion.es/formacion/materiales/182/cd/cinco/insertar_un_vdeo.html 4/5
6/11/2019 Insertar un vídeo | Elementos multimedia

<source src="nombre.ogg" type="video/ogg" />

<source src="nombre.webm" type="video/webm" />
</video>

Verdadero Falso

« Anterior | Siguiente »

Ministerio de Educación, Cultura y Deporte | Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado
Esta obra está bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 3.0 España (CC BY-SA 3.0)

www.ite.educacion.es/formacion/materiales/182/cd/cinco/insertar_un_vdeo.html 5/5