Entre las caracteristicas de html5 estan la de reproducir tanto Archivos de Audio como Archivos de Video. Actualmente la mayoria de los videos o audios incrustados en la web se realizan mediante plugins como Flash, pero HTML5 define estos nuevos elementos los cuales se convierten en una alternativa mas para el desarrollador web. Si bien se espera (se sigue esperando) que html5 remplace a flash en algun futuro, lo cierto es que aun falta para que HTML5 se consolide, poco a poco se ira fortaleciendo y sera tomado en cuenta mas y mas por los desarrolladores web en los grandes proyectos. En este Articulo te hablaremos un poco sobre lo facil y rapido que es incrustar un reproductor de Audio/Video en tu web. Comencemos…
Requerimientos
Reproduciendo Audio
Para mostrar un simple reproductor de Audio
El atributo controls agrega los controles de reproduccion.
La etiqueta Audio tambien tiene otros atributos como:
autoplay
loop
muted
preload
src
Internet Explorer 9+, Firefox, Opera, Chrome, y Safari.
Formatos soportados:
Mp3, WAV, OGG
[/note]
Reproduciendo Video
Para mostrar un Reproductor de Video en tu web.
¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:
WebEmpresa
El atributo controls agrega los controles de reproduccion.
Los atributos Width y Height controlan el tamaño de el reproductor
Compatibilidad de Navegadores de la etiqueta Video:
Internet Explorer 9+, Firefox, Opera, Chrome, y Safari.
Formatos soportados:
Mp4, WebM, OGG
Resultado
Ver Ejemplo Funcionando en lab.
(Recuerda que puedes ver el codigo fuente de la pagina para aclarar tus dudas mas rapidamente, Ctrl + U en la mayoria de los navegadores web)
Audio y Video en Html5 Ejemplo Practico