Tutor HTML 5: como poner un video en una web
Hasta ahora si querías poner un video en tu págian web lo normal era tirar de extensiones externas como Flash (incluso Java). Con la última versión de HTML esto ya no es necesario. El lenguaje de las pa´goinas web ya incluye la posibilidad de colocar video sin necesidad de extensiones externas y de manera muy fácil. No obstante sigue existiendo la pega de la diversidad de formatos, pero esto está también resuelto.
La cosa es tan fácil como usar la nueva etiqueta <video>, que define un contenedor dentro del cual definimos el origen del video que queremos mostrar y su formato. Mira este ejemplo de código:
<video width="320" height="240" src="movie.mp4" controls>
Así de sencillo, ya tendrías un video colocado en tu web. Admite más atributos: para autoejecutarse, ejecutarse en bucle, mostrar controles... Si el navegador no puede entiende la etiqueta video mostrará la frase escrita. Los atributos que soporta esta etiqueta son
autoplay Para que el video se ejecute automáticamente
controls Muestra controles de ejecución, pausa, sonido.
widht pixels alto (height) y ancho (width) del video
loop Reproducción en bucle.
muted Reproducir el video sin sonido
poster URL Dirección de la imagen a mostrar mientras el video está descargando o en parada
none Le video se carga cuando la página se carga
Solo carga metadatos el cargar la página
El video NO se carga con la página (lo hace al final)
src URL Dirección del video que se va a reproducir.
Con el video se pueden cargar los llamados metadata, que no es más que información que acompaña al video como por ejemplo: título, autor, album... depende de cada caso
Si el explorador no reconoce la etiqueta video usado se mostrará lo que aparezca entre las etiquetas <video>, puede ser un simple texto de aviso o un enlace por ejemplo para descargar el video o enviarlo a una página de explicaciones o...
No obstante aún existen más elementos que pueden usarse con los videos en la página web, por ejemplo para indicar el formato o formatos... Lo vemos en la siguiente página.