Multimedia en HTML by NESTicle 8Bit

Semana 3

HTML
Etiqueta <Video>

Multimedia en HTML by NESTicle 8Bit

Semana 3

Esta va a ser la parte de HTML5 que vamos a dar en este taller, no vamos a profundizar mucho en este tema solo a ver una de las funcionalidades ms importantes del lenguaje como la etiqueta <video> que es para agregar videos en una pgina web.

Veamos como se usa la etiqueta video La etiqueta <video> es la etiqueta que mas fama se hizo ya que el video en Internet implica muchas innovaciones desde que Flash Player nos propuso usar video con calidad HD y el codec H.264, ejemplos como YouTube nos dejaron ver el poder del video en Internet. La manera ms importante de implementarla es de esta manera: <video src="video.mp4" width="640" height="360" controls autoplay preload></video> Expliquemos los atributos de la etiqueta:
o o o o o o

SRC: Nos enlaza el archivo de video que queremos reproducir. WIDTH: Nos define el ancho del video en pixeles. HEIGHT: Nos define la altura del video en pixeles. CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botn play-pause, seek y volumen. AUTOPLAY: Nos permite reproducir el archivo de video desde que se carga la pgina. PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproduccin en el buffer para que no se trabe por reproducir mas de lo que carga.

Implementacin de formatos de video Tenemos muchos formatos de video que debemos implementar ya que cada motor de renderizado de los navegadores tiene soporte para un codec de video diferente.
<video width="640" height="360" controls autoplay preload> <source src="video.mp4" type="video/mp4"/> <source src="video.ogv" type="video/ogg"/> </video>

Como ven, la diferencia es poca, ahora solo quitamos el atributo SRC y agriamos los SOURCE de los diferentes archivos de video. Es bastante fcil de usar esta etiqueta y podemos jugar mucho con los estilos de CSS para darle estilo, y si practicamos mucho podemos empezar a crear un reproductor mas personalizado.

Multimedia en HTML by NESTicle 8Bit

Semana 3

HTML
Etiqueta <Audio>

Multimedia en HTML by NESTicle 8Bit

Semana 3

Una de las principales cosas que llama la atencin cuando hablamos de HTML5, son las famosas etiquetas <audio> y <video>. Estas etiquetas tienen su gran fama por que nos permiten consumir multimedia sin necesidad de instalar plugins adicionales al navegador o en nuestra computadora. Ahora el navegador hara el trabajo solo, no dependera de nadie, por ejemplo, el famoso Flash Player quien dicen muchos que esta temblando de miedo por que probablemente pueda desaparecer o no.

La etiqueta <audio> es la ms sencilla de las dos, por que solo implica un reproductor de audio. Para implementarla es muy sencillo: <audio width="300" height="32" src="micancion.mp3" controls="controls" autoplay="autoplay" preload=""></audio> Expliquemos los atributos de la etiqueta:
o o o o

SRC: Nos enlaza el archivo de audio que queremos reproducir. CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botn play-pause, seek y volumen. AUTOPLAY: Nos permite reproducir el archivo de audio desde que se carga la pgina. PRELOAD: Nos carga un poco el archivo de audio antes de iniciar la reproduccin en el buffer para que no se trabe por reproducir ms de lo que carga.

Implementacin de formatos de audio Tenemos muchos navegadores con diferente compatibilidad, pero lo que mas nos interesa son los Motores de Renderizado, estos se encargan de renderizar el cdigo de nuestra pagina web e implementar ahora el contenido multimedia. <audio controls="controls" autoplay="autoplay" preload="">
<source src="cancion.ogg" type="audio/ogg" /> <source src="cancion.mp3" type=" audio/mp3" />

</audio> Ejemplo visualizado en Chrome