El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este momento los navegadores permiten mostrar formatos como el mp4, webm y ogv.
FireFox permite mostrar videos en formato ogv (formato de vídeo de código abierto Ogg/Theora). Luego para visualizar un video con este formato en FireFox tenemos:
<video width="640" height="360" src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv" controls> Este navegador no permite tag video </video>
Las propiedades más importantes de la marca video son:
- src: Dirección donde se almacena el video.
- controls: Se visualiza el panel de control del video: botón de inicio, barra de avance del video etc.
- autoplay: El video se inicia inmediatamente luego que la página se carga en el navegador.
- width: Ancho en píxeles del video.
- height: Alto en píxeles del video.
Como no hay un formato de video universalmente adoptado por todos los navegadores el elemento video nos permite agregarle distintas fuentes:
<video width="640" height="360" controls> <source src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"> <source src="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4"> </video>
Esto es similar al elemento AUDIO visto anteriormente.
La siguiente página muestra un video llamado "video1.mp4":
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<video width="640" height="360"
controls
src="http://www.tutorialesprogramacionya.com/videos/video1.mp4">
</video>
</body>
</html>
Nuevamente según el navegador nos muestra una interfaz visual distinta, pero nos permite reproducir el video.
En Chrome:
En Firefox:
En Microsoft Edge:
