Etiqueta de vídeo HTML5 – Atributos y propiedades

Anterior
Avanzar

Cómo insertar vídeos en HTML5, en esta lección aprenderemos una fantástica forma de crear un reproductor de vídeo utilizando código HTML, es bastante sencillo y su uso es muy similar al elemento audio que ya aprendimos en la lección anterior.

Sin más preámbulo empecemos a aprender a crear nuestro primer código.

Etiqueta vídeo en HTML5

Utilizaremos la etiqueta <video> para insertar un reproductor de vídeo en nuestra página HTML, esta etiqueta por si solo no muestra resultados, debemos emplear los atributos para que pueda funcionar correctamente.

Entre la etiqueta de apertura y cierre colocaremos el texto que aparecerá en el navegador en caso el video no sea compatible o no se pueda reproducir. Veamos el ejemplo:

<video>
  Este es un elemento de video no soportado por tu navegador, prueba con otro...
</video>

Atributo src

El atributo src sirve para indicar cual es el archivo de vídeo que se debe reproducir, si el archivo se encuentra en la misma carpeta que el documento HTML, entonces su valor simplemente será el nombre del archivo con su respectivo formato de vídeo, por ejemplo:

<video src="mivideo.mp4"> Vídeo no es soportado... </video>

Si queremos reproducir desde una URL primero tenemos que asegurar que en dicha dirección URL esta ubicada el vídeo y en el valor de src colocamos esa URL. Por ejemplo:

<video src="https://www.diveos.con/uploads/video.mp4" controls> Video no es soportado... </video>

Los ejemplos presentados son ficticios, por ende no se reproducirá ningún video en esta página, pero en tu caso ubica correctamente tus archivos de video y haz que funcionen correctamente.

Te recomendamos leer:  Rectángulos en svg HTML5

Atributo controls

El atributo controls sirve para dotar de controles básicos a nuestro reproductor de vídeo, tales como: volumen, reproducir, pausar, la barra de progreso, etc. su valor por defecto es también controls, y para que funcione no hace falta escribir todo, basta con colocar el controls. Veamos el ejemplo:

<video width="400px" src="monito.mp4" controls> Vídeo no es soportado... </video>

Resultado:

Este es el resultado en Google Crhome, es posible que el resultado difiera según el navegador empleado.

Etiqueta <source>

La etiqueta <source> permite insertar más de un formato de vídeo dentro de la etiqueta <video>, es bastante útil, ya que esto nos permite tener más alternativas, veamos el ejemplo.

<video controls>

       <source src="mivideo.mp4"  type="video/mp4">

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

       <source src="mivideo.webm"  type="video/wav">
Este es un elemento de video no soportado por tu navegador, prueba con otro
</video>

Si el navegador del usuario no puede reproducir la primera alternativa entonces tratará de reproducir la siguiente y así hasta dar con el archivo compatible.

Atributo autoplay

Sirve para reproducir el vídeo automáticamente cuando este se haya cargado sin consultar con el usuario. Esta técnica puede resultar invasivo, imagínate, entras en una página web y de repente sin que te esperes empieza a reproducirse un vídeo que no te esperabas ¿te gustaría? No verdad, trata de usarlo siempre y cuando consideres necesario.

<video src="mivideo.mp4" controls autoplay> Vídeo no es soportado... </video>
<video src="mivideo.mp4" controls="controls" autoplay="autoplay"> Vídeo no es soportado... </video>

Los códigos producen resultados iguales, ya no es necesario colocar el valor.

El atributo autoplay ha sido abusivamente empleado para mostrar publicidad, por lo que es posible que ciertos navegadores hayan restringido su uso.

Te recomendamos leer:  Estructura de una pagina HTML5

Atributo loop

Este atributo hace que el vídeo se reproduzca indefinidamente cuando el vídeo finaliza, el usuario puede controlar, pero por defecto esto hará que el vídeo siempre vuelva a reproducirse.

<video src="mivideo.mp4" controls autoplay loop> Vídeo no es soportado... </video>
<video src="mivideo.mp4" controls="controls" autoplay="autoplay" loop="loop"> Vídeo no es soportado... </video>

Formatos de vídeo

No crear que puedes meter cualquier vídeo cuando utilizas HTML5, primero asegúrate que el formato que quieres utilizar es compatible con los navegadores web. MP4 es un formato extensamente empleado, pero también tenemos otros formatos.

No olvides colocar la extensión para que tu código funcione correctamente.

MP4, OGG, WEBM  son formatos de vídeo soportados.

Cómo insertar un video de YouTube en un archivo HTML

Insertar un archivo de YouTube en nuestro documento HTML5 es tan fácil como conseguir el código de inserción del video que queremos desde YouTube y pegar en nuestro documento; por ejemplo:

El código de inserción podemos obtener dando clic derecho sobre el video y elegir la opción: copiar código de inserción. otra forma de hacerlo es dando clic sobre la opción compartir ubicada debajo de cada video, aparecerá una ventana emergente, en ella seleccionamos la opción incorporar, aparecerá un fragmento de código y copiamos para luego pegar en nuestro documento html5. Debería verse algo así:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xwUUvc9eUhc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Finalmente tu documento HTML5 debería verse algo así:

<!DOCTYPE html>
<html>
<head>
  <title> MI TÍTULO</title>
</head>
   
 <body>
        
<iframe width="560" height="315" src="https://www.youtube.com/embed/xwUUvc9eUhc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>

</html>


Si deseas puedes cambiar los valores y propiedades para ajustar tamaño del reproductor de video.

Te recomendamos leer:  POLÍGONOS SVG EN HTML5

Es posible que algunos videos queden restringidos por parte de YouTube y no se puedan reproducir, entonces simplemente prueba con otro.

Lecciones de HTML5
Anterior
Avanzar
0 0 votar
Calificación
guest
7 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
José Canal
José Canal
2 meses atrás

¿Como insertar un video de Youtube?

José Canal
José Canal
Reply to  Alex
2 meses atrás

Lo que yo puse es algo así:

No se pudo reproducir su video

Y cuando voy al navegador(Firefox) me aparece un rectángulo con una “X” en medio y las palabras “Video format or MIME type is not supported.”

El resto del código sí que funciona.

¿¿Ayuda??

José Canal
José Canal
2 meses atrás

También quería decir que escribí el código exactamente igual que el había en la nueva sección “Cómo insertar un video de YouTube en un archivo HTML”(gracias por añadirlo), y que no me funcionó. Lo probé en Firefox, Internet Explorer y Microsoft Edge — en Firefox no apareció nada, y en los últimos dos me aparecía el rectángulo con las dimensiones correctas, pero que si pincho me dice el típico mensaje “Se ha producido un error. Vuelve más tarde.(etc. Etc.)”.

Ayuda.

Por cierto Alex muchas gracias por la ayuda. El curso y los comentarios son muy útiles.

Jerry
Jerry
1 mes atrás

Con la etiqueta iframe, YouTube proporciona dicha información cuando le das a compartir, seleccionas
ejemplo:

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5