Audio y Video en Html5 – Ejemplo Practico

Audio y Video en Html5 – Ejemplo Practico

Audio y Video en Html5 – Ejemplo Practico
5 (100%) 1 voto

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

[note]
Compatibilidad de Navegadores de la etiqueta Audio:
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.

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

Audio y Video en Html5 Ejemplo Practico jonathanmelgoza

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

Audio y Video en Html5 – Ejemplo Practico
5 (100%) 1 voto

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *