GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Multimedia en HTML5
Multimedia en la web es sonido, música, videos, películas y animaciones.

¿Qué es Multimedia?
Multimedia viene en muchos formatos diferentes. Puede ser casi cualquier cosa que pueda
escuchar o ver.
Ejemplos: imágenes, música, sonido, videos, registros, películas, animaciones y más.
Las páginas web a menudo contienen elementos multimedia de diferentes tipos y formatos.

Soporte del navegador

Los primeros navegadores web solo admitían texto, limitado a una sola fuente en un solo color.
Más tarde llegaron los navegadores con soporte para colores, fuentes e imágenes, audio, video y
animación, han sido manejados de manera diferente por los principales navegadores. Se han
admitido diferentes formatos, y algunos formatos requieren programas extra de ayuda
(complementos) para funcionar.
HTML5 multimedia promete un futuro más fácil para multimedia.

Formatos multimedia
Los elementos multimedia (como audio o video) se almacenan en archivos multimedia.
La forma más común de descubrir el tipo de archivo es mirar la extensión del archivo.
Los archivos multimedia tienen formatos y diferentes extensiones como: .swf, .wav, .mp3, .mp4,
.mpg, .wmv y .avi.

Formatos de video comunes

MP4 es el nuevo y próximo formato de video de
Internet.

MP4 es recomendado por YouTube.

MP4 es compatible con los reproductores Flash.

MP4 es compatible con HTML5.

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Formato Extensión Descripción

MPEG .mpg MPEG. Es el primer formato popular de video en la web. Utilizado y soportado por todos
.mpeg los navegadores, pero no es soportado por HTML5.

AVI .avi AVI (Audio Video Interleave). Comúnmente usado por video cámaras y hardware de tv. Se
reproduce bien en ambiente Windows pero no en todos los navegadores.

WMV .wmv WMV (Windows Media Video). Comúnmente usado por video cámaras y hardware de tv.
Se reproduce bien en ambiente Windows pero no en todos los navegadores.

QuickTime .mov QuickTime. Comúnmente usado por video cámaras y hardware de tv. Se reproduce bien
en computadores Apple, pero no en todos los navegadores.

RealVideo .rm RealVideo. Hecho para permitir video streaming con bajo ancho de banda. Aún se utiliza
.ram para video online y tv por internet, pero no en todos los navegadores.

Flash .swf Flash. Se requiren components extras o plug in para reproducirlo en navegadores.
.flv

Ogg .ogg Org Foundation. Soportado por HTML5.

WebM .webm WebM. Desarrollado por Mozilla, Opera, Adobe, and Google. Soportado por HTML5.

MPEG-4 .mp4 MP4. Basado en QuickTime. Comúnmente usado en nuevas cámaras de video y hardware
or MP4 de tv. Soportado por todos los navegadores y HTML5. Recomendaddo por YouTube.

Formatos de audio
MP3 es el formato más nuevo para música grabada comprimida. El término MP3 se ha convertido
en sinónimo de música digital.
Si su sitio web es sobre música grabada, MP3 es la elección.

Formato Extensión Descripción

MIDI .mid MIDI (Musical Instrument Digital Interface). Es el principal formato para todos los
.midi dispositivos electrónicos, tales como sintetizadores y tarjetas de sonido de PC. Los
archivos midi no contienen sonido, pero pueden interpretar notas digitales
ejecutadas por los respectivos componentes, por ello se utilizan ampliamente en
secuenciadores e instrumentos musicales electrónicos. Se reproduce bien en PC
pero no en navegadores.

RealAudio .rm RealAudio. Hecho para permitir audio streaming con bajo ancho de banda. Se
.ram utiliza para audio online, pero no en navegadores..
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

WMA .wma WMA (Windows Media Audio). Utilizado comúnmente en reproductores

musicales. Se reproduce bien en ambiente Windows pero no en todos los
navegadores.

AAC .aac AAC (Advanced Audio Coding). Es el format por defecto para Apple e iTunes. Se
reproduce bien en computadores y dispositivos Apple, pero no en todos los
navegadores.

WAV .wav WAV. Se ejecuta bien en Windows, Macintosh y Linux. Es soportado por HTML5.

Ogg .ogg Es soportado por HTML5.

MP3 .mp3 El MP3 es actualmente parte del formato MPEG. MP3 el el formatomas popular
para reproductores de música. MP3 combina muy bien la compression con la alta
calidad de sonido. Es soportado por todoslos navegadores.

MP4 .mp4 MP4 es un formato de video, pero puede también ser usado para audio. MP4
video esta considerado en la actualidad el formato de video de la internet. Esto
condición lo hace ser soportado por todos los navegadores.

Reproducción de videos en HTML

Antes de HTML5, un video solo podía reproducirse en un navegador con un complemento (como
flash). El elemento <video> HTML5 especifica una forma estándar de insertar un video en una
página web

El elemento HTML <video>

Para mostrar un video en HTML, use el elemento <video>.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>HTML5 Videos</h1>
<video width="320" height="240" controls>
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogg" type="video/ogg">
Tu navegador no soporta la etiqueta videos.
</video>
</body>
</html>

Código 154.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Cómo funciona
El atributo controls agrega controles de video, como reproducir, pausa y volumen. Es una buena
idea incluir siempre atributos width y height. Si el alto y el ancho no están configurados, la
página puede parpadear mientras se carga el video.
El elemento <source> le permite especificar archivos de video alternativos de los cuales el
navegador puede elegir. El navegador usará el primer formato reconocido. El texto entre las
etiquetas <video> y </video> sólo se mostrará en los navegadores que no soportan el elemento
<video>.

HTML <video> autoplay

Para comenzar a reproducir un video automáticamente usamos el atributo autoplay. Algunos
navegadores presentan problemas de reproducción.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>HTML5 Video Autoplay</h1>
<video width="320" height="240" autoplay>
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogg" type="video/ogg">
Tu navegador no soporta la etiqueta videos.
</video>
</body>
</html>

Código 155.html

Video HTML - Métodos, propiedades y eventos

HTML5 define métodos DOM, propiedades y eventos para el <video> elemento. Esto le permite
cargar, reproducir y pausar videos, así como establecer la duración y el volumen.
También hay eventos DOM que pueden avisarle cuando un video comienza a reproducirse, está en
pausa, etc.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>Incorporar JavaScript en Video y HTML5</h1>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogg" type="video/ogg">
Tu navegador no soporta la etiqueta videos.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");

function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function makeBig() {
myVideo.width = 560;
}

function makeSmall() {
myVideo.width = 320;
}

function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>

Código 155.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Audio en la Web
Antes de HTML5, los archivos de audio solo podían reproducirse en un navegador con un
complemento (como flash).
El elemento <audio> HTML5 especifica una forma estándar de incrustar audio en una página web.

El elemento <audio> HTML

Para reproducir un archivo de audio en HTML, usa el elemento <audio>.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>HTML5 Audio</h1>
<video controls>
<source src="audio/back.mp3" type="audio/mpeg">
</video>
</body>
</html>

Código 156.html

Cómo funciona
El atributo controls agrega controles de audio, como reproducción, pausa y volumen.
El elemento <source> permite especificar archivos de audio alternativos que el navegador puede
elegir. El navegador usará el primer formato reconocido. El texto entre el <audio> y </audio>
etiquetas sólo se mostrará en los navegadores que no soportan el <audio> elemento.

Audio HTML - Métodos, propiedades y eventos

HTML5 define métodos DOM, propiedades y eventos para el <audio> elemento. Esto le permite
cargar, reproducir y pausar audios, así como establecer la duración y el volumen.
También hay eventos DOM que pueden avisarle cuando un audio comienza a reproducirse, está
en pausa, etc.
Para obtener una referencia completa de DOM, vaya a nuestra Referencia de DOM de audio /
video HTML5 .
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Videos HTML5 de YouTube

La forma más fácil de reproducir videos en HTML es usar YouTube.

Luchando con formatos de video?

Anteriormente en este tutorial, ha visto que podría tener que convertir sus videos a diferentes
formatos para que se reproduzcan en todos los navegadores. Convertir videos a diferentes
formatos puede ser difícil y tomar mucho tiempo.
Una solución más fácil es dejar que YouTube reproduzca los videos en su página web.

ID de video de YouTube
YouTube mostrará una identificación (como tgbNymZ7vqY) cuando guarde (o reproduzca) un
video. Puede usar esta identificación y hacer referencia a su video en el código HTML.

Reproducción de un video de YouTube en HTML

Para reproducir su video en una página web, haga lo siguiente:
 Sube el video a YouTube.
 Tome nota de la identificación del video.
 Defina un elemento <iframe> en su página web.
 Deje que el atributo src apunte a la URL del video.
 Use los atributos de ancho y alto para especificar la dimensión del jugador.
 Agregue cualquier otro parámetro a la URL (ver a continuación).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>HTML5 Youtube</h1>
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe></body>
</html>

Código 157.html