Hasta la fecha dependíamos de una tecnología de terceros para poder compartir material audiovisual: Flash de la compañía Adobe. Es evidente que es una barrera de entrada que un usuario no pueda visualizar en primera instancia todo este contenido hasta que instale en su navegador el plugin flash correspondiente.
De modo que ahora tenemos dos elementos multimedia de HTML5. Con estas nuevas etiquetas la carga de material multimedia es muy sencilla:
- video
- audio
Los elementos multimedia nativos de HTML5 son compatibles con AAC, MP3 y Ogg Vorbis para audio y Ogg Theora, WBEM y MPEG-4 para el vídeo.
Elemento multimedia de HTML5 para Video
Las propiedades que se utilizan para video son:
- type : tipo de archivo o fuente
- autoplay : reproduce automáticamente
- controls : muestra los controles de reproducción
- height : define la altura del reproductor (en píxeles)
- loop : ejecuta la reproducción en bucle, cuando finaliza vuelve a empezar
- mute : especifica que la salida de audio del video debería ser silenciado
- poster : permite poner la url de una imágen antes de que se reproduzca el video
- pre-load : manda a cargar el video antes de reproducirlo, de este modo al oprimir reproducir, no hay que esperar a que se cargue. Sus valores pueden ser none, metadata y auto
- src : URL del archivo a reproducir
- width : define el ancho del reproductor (en píxeles)
Ejemplo de carga de video
|
1 2 3 4 5 |
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> |
Elemento multimedia de HTML5 para Audio
Las propiedades que se utilizan para audio son:
- type : tipo de archivo o fuente
- autoplay : reproduce automáticamente
- controls : muestra los controles de reproducción
- loop : ejecuta la reproducción en bucle, cuando finaliza vuelve a empezar
- pre-load : manda a cargar el audio antes de reproducirlo, de este modo al oprimir reproducir, no hay que esperar a que se cargue. Sus valores pueden ser none, metadata y auto
- src : URL del archivo a reproducir
Ejemplo de carga de audio
|
1 2 3 4 5 |
<audio controls="controls"> <source src="sound.ogg" type="audio/ogg" /> <source src="sound.mp3" type="audio/mp3" /> Tu navegador no soporta reproducción de audio sin necesidad de un plugin </audio> |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
