HTML5 Multimedia Develop and Design (Traducido)

Traducido del inglés al español - www.onlinedoctranslator.
com
HTML5
Multimedia
DESARROLLARYDISEÑO
Ian Devlin
HTML5 Multimedia: Desarrollo y Diseño
Ian Devlin
Prensa de hueso de melocotón
1249 Octava Calle

Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Encuéntrenos en la Web en: www.peachpit.com

Para informar errores, envíe una nota a: errata@peachpit.com
Peachpit Press es una división de Pearson Education.
Copyright © 2012 por Ian Devlin
Editor:Rebeca Gulick
Editor de desarrollo y copia:Anne-Marie Walker Revisor
técnico:chris molinos Coordinador de produccion:
Myrna Vladić Compositor:david van ness Corrector de
pruebas:patricia pane Indexador:Valerie Haynes-Perry
Diseño de portada:Aren Howell Straiger Producción de
portada:Jaime Brenner Diseño de interiores:Mimi Heft
Aviso de Derechos
Reservados todos los derechos. Ninguna parte de este libro puede ser reproducida o transmitida de ninguna forma por ningún
medio, ya sea electrónico, mecánico, fotocopiado, grabación o cualquier otro, sin el permiso previo por escrito del editor. Para
obtener información sobre cómo obtener permiso para reimpresiones y extractos, comuníquese con permisos@peachpit.com.
Aviso de responsabilidad
La información de este libro se distribuye "tal cual", sin garantía. Si bien se han tomado todas las precauciones en la
preparación del libro, ni el autor ni Peachpit Press serán responsables ante ninguna persona o entidad con respecto a
cualquier pérdida o daño causado o presuntamente causado directa o indirectamente por las instrucciones contenidas
en este libro o por los productos de software y hardware informáticos descritos en él.
Marcas registradas
Muchas de las designaciones utilizadas por los fabricantes y vendedores para distinguir sus productos se reclaman como marcas
comerciales. Cuando esas designaciones aparecen en este libro, y Peachpit tenía conocimiento de un reclamo de marca registrada,
las designaciones aparecen según lo solicitado por el propietario de la marca registrada. Todos los demás nombres de productos y
servicios identificados a lo largo de este libro se utilizan únicamente de forma editorial y en beneficio de dichas empresas sin
intención de infringir la marca registrada. Ningún uso de este tipo, o el uso de cualquier nombre comercial, pretende transmitir
respaldo u otra afiliación con este libro.
ISBN-13: 978-0-321-79393-5
ISBN-10: 0-321-79393-5
987654321
Impreso y encuadernado en los Estados Unidos de América

Dedicado a la memoria de Paul Fallon
Tá daoine a shiúlann inár saolta agus shiúlann amach astu go luath

Tá daoine a fhanann ar feadh tamaill Agus
fágann dijo rianta a gcos ar ár gcroíthe Agus
casann ár n-anamacha port nua go deo deo

EXPRESIONES DE GRATITUD
Escribir un libro es un proceso difícil y que lleva mucho tiempo, y del que no sabía
nada antes de embarcarme en este proyecto. Varias personas me han ayudado en
el proceso de escritura del libro y otras me han ayudado en el proceso de HTML5,
lo sepan o no. Todos merecen mi agradecimiento.
A Rebecca Gulick por darme la oportunidad de escribir este libro y por
explicarme claramente los pasos a seguir.
A Anne Marie Walker por asegurar que mis palabras sean claras y comprensibles. A
Chris Mills por sus habilidades de edición y revisión técnica, y por brindarme
muchas buenas sugerencias y modificaciones a lo largo del texto.
A Rich Clark por darme la oportunidad de ser curador de HTML5 Gallery
(www.html5gallery.com), lo que no solo aumentó mi interés y conocimiento sobre
HTML5, sino que también me llevó a escribir este libro.
A Remy Sharp por llamar mi atención por primera vez sobre HTML5 en un artículo
en.red revista en octubre de 2009.
A usted, lector, por decidir adquirir este libro con la intención de
aprender. Espero que lo encuentres ameno y educativo.
IVMULTIMEDIA HTML5
CONTENIDO
Introducción. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xi
CAPÍTULO 1 UNA INTRODUCCIÓN A HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 ¿Qué es

HTML5?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 La progresión
de HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 ¿Cuándo puedes usar
HTML5?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 Principales elementos
estructurales de HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 DOCTYPE y juego
de caracteres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 <encabezado> y
<pie de página>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 <hgrupo>
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 <artículo> y
<sección>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 <navegación>

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 <aparte>
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 <figura> y
<figcaption>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 <guion>

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21 Terminando
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
CAPITULO 2 ELEMENTOS MULTIMEDIA HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 Historia de la
Web Multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 Reproductores
multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
elementos HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
¡Bienvenido, Multimedia Nativa!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 El
elemento de sonido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 El

elemento de vídeo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35 El
elemento fuente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 El
elemento de pista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
CONTENIDOV
CAPÍTULO 3 USO DE SONIDO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 Códecs de
audio y formatos de archivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 Ogg Vorbis
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 MP3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 WAV
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48 ACA
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48 MP4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48 Soporte de
navegador para formatos de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Codificación
de su archivo de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50 respaldo

del navegador heredado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51
Ejemplos de uso del elemento de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52

Reproducir un archivo de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Reproducir un archivo de audio con diferentes fuentes. . . . . . . . . . . . . . . . . . . . . . . . .54
Reproducción de un archivo de audio con diferentes fuentes y respaldo heredado. .55
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
CAPÍTULO 4 USO DE VÍDEO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Códecs de video y
formatos de archivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62 Teora Ogg
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62MP4 (H.264)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 WebM
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 Soporte de
navegador para formatos de video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64 Codificación de
sus archivos de video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .sesenta y cinco Uso

de los elementos de video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 Reproducir un
archivo de video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

Reproducir un archivo de video con diferentes fuentes . . . . . . . . . . . . . . . . . . . . . . . . . . .69
Reproducción de un archivo de video con diferentes fuentes y respaldo heredado . . . .72
Dirigirse a dispositivos con diferentes archivos de video usando tipos de medios y

Consultas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
Android y vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
VI MULTIMEDIA HTML5
CAPÍTULO 5 API DE JAVASCRIPT Y CONTROLES PERSONALIZADOS . . . . . . . . . . . . . . . . . . .84
¿Qué es JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86

Explorando los atributos de la API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
Aprovechar los eventos de la API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
Uso de los métodos API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96
Creación de un reproductor de video simple con controles personalizados. . . . . . . . . . . . . .98
Adición de botones de reproducción/pausa y parada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99
Adición de botones de volumen y silencio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104 Adición de
una barra de progreso. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Adición de botones de avance rápido y rebobinado. . . . . . . . . . . . . . . . . . . . . . . . . .110

Agregar una barra de búsqueda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
112 navegadores no HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115
CAPÍTULO 6 ESTILIZAR ELEMENTOS DE MEDIOS CON CSS . . . . . . . . . . . . . . . . . . . . . . .116

Estilo CSS simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Whizzyness avanzado con CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 Opacidad
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 Gradiente
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 esquinas
redondeadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126 Sombra

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126 Tamaño de
su contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128 Reglas CSS3

específicas de WebKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135 Reflejar
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135 Máscara
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137
CONTENIDOVII
CAPÍTULO 7 TRANSICIONES, TRANSFORMACIONES Y ANIMACIÓN. . . . . . . . . . . .138
Uso de transiciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140
Uso de transiciones con audio y video. . . . . . . . . . . . . . . . . . . . . . . . . . . .143
Estilo con transiciones CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144 transiciones
de desvanecimiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 Explorando
transformaciones 2D. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Escalar un video
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Girar un video
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150 Sesgar un video
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Traducir un video
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Jugando con transformaciones
3D. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154 Trabajar con animaciones
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158 @fotogramas clave

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158 Portada de video
animado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161 giro animado

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167
Ampliación de la portada de vídeo animado a 3D . . . . . . . . . . . . . . . . . . . . . . . . . .169
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
CAPÍTULO 8 MULTIMEDIA Y ACCESIBILIDAD . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Medios y posibles problemas de accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . .174
Una breve mirada a SRT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175
Introducción a WebVTT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 ¿Qué
puede hacer WebVTT? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 Formato

de archivo WebVTT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177 El
elemento de pista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
Uso de WebVTT y Track Element ahora. . . . . . . . . . . . . . . . . . . . . . .188

Ejemplo de jugador. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189
Controles multimedia y accesibilidad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192
Terminando. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195
viiiMULTIMEDIA HTML5
CAPÍTULO 9 USO DE VÍDEO CON CANVAS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 El
elemento lienzo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198 La API
2D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200
Tomar una captura de pantalla de un video HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . .202
Hacer una copia de un video en reproducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206
Reproducción de la copia de video en escala de grises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
CAPÍTULO 10 USO DE VÍDEO CON SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214 Una breve

introducción a SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216 Compatibilidad con
navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217 El elemento
svg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217 Texto SVG
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218 círculo SVG
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 SVG Elipse
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 Uso de SVG con
video HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 Agregar una máscara de

texto a un video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 Adición de una
máscara de elipse a un vídeo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Animación de
una máscara de vídeo SVG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228 Mover una
máscara de video SVG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230
Aplicación de filtros SVG a video HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Terminando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237
CONTENIDOIX
CAPÍTULO 11 CARACTERÍSTICAS FUTURAS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238 API
de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240 API de
datos de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240 API de
audio web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245 API
getUserMedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247 API de
conexión de pares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 API de
transmisión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250 El
objeto MediaStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250 API de
WebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252 La interfaz
WebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252 Uso de WebSockets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .254 Terminando
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259
Índice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .260
XMULTIMEDIA HTML5
INTRODUCCIÓN
Como desarrollador web o diseñador web, o aquellos de ustedes que solo mantienen su propio sitio
web, saben que la web cambia constantemente y que las herramientas y los métodos que se utilizan
para crear sitios web están en constante desarrollo. Como las dunas de arena en el Sahara, se
mueven constantemente, pero afortunadamente, por lo general en dirección hacia adelante.

El cambio en las tecnologías web actualmente ha llegado a HTML5, la última versión
del lenguaje utilizado para definir y construir páginas web. Con él viene un método más
fácil de agregar multimedia a sus páginas web.
El objetivo de este libro es brindarle una introducción para agregar audio
y video a su sitio web, y darle una idea de qué más puede hacer con
multimedia HTML5.
A lo largo del libro, encontrará detalles detallados de los diversos elementos multimedia
de HTML5, así como ejemplos de códigos completos sobre cómo puede usarlos para agregar
audio y video a su sitio web. También aprenderá sobre la API de JavaScript que lo acompaña
que le permite crear sus propios controles de medios.
Además, encontrará explicaciones y ejemplos de cómo puede aplicar estilo a los
elementos multimedia de HTML5 con CSS, incluidas algunas de las nuevas características que
ofrece CSS3. También aprenderá sobre multimedia y accesibilidad, y cómo puede agregar
subtítulos al video de su sitio web.
PARA QUIEN ES ESTE LIBRO
Este libro está dirigido a aquellos que comienzan con HTML5 y agregan audio y video
HTML5 a sus sitios web, y aquellos que ya están familiarizados con HTML5 multimedia
pero desean aprender más.
Se asume algún conocimiento básico de HTML y CSS, y los últimos capítulos requieren al
menos un conocimiento rudimentario de JavaScript. Dicho esto, todos los ejemplos en el sitio
web que acompaña al libro en www.html5multimedia.com están completos.
INTRODUCCIÓNXI
CAPTURAS DE PANTALLA Y VERSIONES DEL NAVEGADOR
Mientras escribía este libro, algunos proveedores de navegadores lanzaron versiones más
nuevas de sus productos. Firefox ahora está en la versión 7, Chrome está en la versión 14 y
Safari se ha movido a 5.1. Las capturas de pantalla del libro suelen indicar de qué navegador y
versión se tomó en el momento en que se escribió el capítulo. Esto, por supuesto, significa
que algunas de las capturas de pantalla son de versiones anteriores del navegador. Pero
tenga la seguridad de que todavía funcionan igual de bien en las últimas versiones, y si no lo
hacen, está claramente marcado.
EL SITIO WEB DE ESTE LIBRO
Todo el código utilizado en los ejemplos de este libro se encuentra en el sitio web adjunto en
www.html5multimedia.com. Puede descargar los archivos en su totalidad o navegar a los
distintos archivos a través del sitio web y verlos funcionando en línea.
CONTACTO
Si desea ponerse en contacto conmigo, puede hacerlo en info@html5multimedia.com.
ANTES DE QUE EMPIECES
En los capítulos posteriores de este libro, parte de lo que leerá es experimental debido a las
especificaciones que aún estaban en desarrollo en el momento de escribir este artículo y el
soporte deficiente o inexistente en los navegadores. Esto, por supuesto, puede haber
cambiado para cuando tenga este libro en sus manos. El sitio web del libro indicará soporte
mejorado cuando corresponda.
¡Es tiempo de empezar! Comencemos por echar un vistazo rápido a HTML5, qué es y
de dónde viene.
XIIMULTIMEDIA HTML5
Esta página se dejó en blanco intencionalmente
1
UNINTRODUCCIÓN
AHTML5
HTML5 es una revisión importante del
lenguaje en el que se muestra prácticamente
todo el contenido de Internet.
HTML5 cambia la forma de pensar sobre el lenguaje de marcado HTML.
Además de introducir nuevos elementos de marcado en la especificación,
también se incluye una gran cantidad de API de JavaScript para brindar a los
desarrolladores una forma más profunda y consistente de acceder a la
funcionalidad nativa en todos los navegadores. Los diseñadores y aquellos que
"no son demasiado técnicos" también se beneficiarán. Ahora podrán realizar
tareas complejas y agregar fácilmente multimedia a un documento web que en
el pasado habría requerido más conocimientos técnicos.
Este capítulo le proporciona una breve introducción a HTML5 y cómo
surgió. También echará un vistazo rápido a algunos de los principales
elementos estructurales de HTML5.
¡Salgamos y aprendamos!
3
QUÉESHTML5?
HTML5 es la última y mejor versión del lenguaje central de la World Wide Web y es uno de los
desarrollos más emocionantes que le han ocurrido a la web y a la comunidad web en mucho
tiempo. HTML (HyperText Markup Language) es el lenguaje que ha estado en el corazón de
todos los documentos web desde su concepción a principios de la década de 1990.
El predecesor de HTML5 es HTML 4.01, y una de las principales diferencias entre HTML
4.01 y HTML5 es la adición de muchas API de JavaScript (interfaces de programación de
aplicaciones) a la especificación. Por supuesto, una de estas especificaciones está directamente
relacionada con el tema de este libro: la API que permite interacciones con elementos
multimedia dentro del navegador. Además de estas nuevas API, HTML5 también altera el
significado de algunos elementos HTML existentes, elimina otros y, lo que es más importante,
agrega otros nuevos, algunos de los cuales le permiten brindar un significado más semántico
a su contenido.
Vale la pena señalar que la mayoría de estos nuevos elementos en realidad no agregan ninguna
funcionalidad nueva que no haya visto antes.
Pero antes de sumergirse en el funcionamiento de HTML5, primero veamos de dónde

vino HTML5 y cómo evolucionó.
ELPROGRESIÓNDEHTML5
Es de conocimiento bastante común que Tim Berners-Lee es el padre de HTML y lo que todo
el mundo reconoce como la web hoy en día.
No hay necesidad de entrar en una historia larga y detallada del crecimiento de
HTML desde la versión inicial en 1990 hasta la versión en la que la mayoría de ustedes
habrán crecido, HTML 4.01. Pero vale la pena ver cómo HTML5 llegó a buen término y
luego evolucionó.
En 1998, los miembros del World Wide Web Consortium (W3C; www.w3.org)
decidieron que no valdría la pena extender la especificación HTML más allá de HTML
4.01. Decidieron que el futuro de la web estaba en XML (lenguaje de marcado extensible)
debido a su sintaxis más estricta, que también facilitaba mucho el procesamiento de
documentos web XML.
Dejando descansar HTML 4.01, comenzaron a trabajar en una nueva especificación para
XHTML 1.0, que básicamente era una reformulación de HTML 4.01 como un vocabulario XML
que contenía varias reglas de sintaxis estrictas. En lo personal, yo era bastante fan de esto,
porque me gustaba la uniformidad de todo, pero no a todos les convencía. Entonces, dos
4CAPÍTULO 1UNA INTRODUCCIÓN A HTML5

Se crearon sabores de XHTML: XHTML Transitional para ayudar a convertir a los no
creyentes y XHTML Strict, que era para los verdaderos creyentes y lo que (el W3C
esperaba) los no creyentes eventualmente se esforzarían por seguir.
La situación se mantuvo así durante varios años, y los no creyentes volvían a HTML
4.01 o se quedaban satisfechos con XHTML Transitional. A medida que el sueño del W3C
de un mundo XHTML más estricto comenzó a disiparse, sus miembros siguieron
adelante y comenzaron a trabajar en la especificación de XHTML 2.0.
Esta parecía una decisión un poco extraña, porque XHTML no era tan ampliamente
compatible como esperaba el W3C. Internet Explorer (IE), uno de los navegadores más
extendidos en ese momento (todavía lo es, pero menos), ni siquiera era compatible con
XHTML. De hecho, declarar un documento web como XHTML solo haría que IE intentara
descargar la página y ni siquiera la renderizara. Además, seguir adelante con una nueva
especificación en XHTML 2.0 no reflejaba lo que los desarrolladores web en el mundo real
estaban haciendo en ese momento. Además, no era compatible con versiones anteriores, lo
que, como verá más adelante, es otra de las fortalezas de HTML5.
HTML5YCOMPATIBILIDAD AL REVÉS
¡Uno de los primeros documentos HTML jamás escritos, "Enlaces y

anclas" (www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html) es
HTML5 casi válido!
En febrero de 2004, un grupo separado, que incluía personas de Opera, Mozilla y, más
tarde, Apple, llamado WHATWG (Grupo de tecnología de aplicaciones de hipertexto web;
www.whatwg.org) publicó un borrador de una nueva especificación, Web Forms 2.0, que
destinado a ampliar los formularios HTML. Esta especificación no tenía relación con el W3C y,
de hecho, la especificación establece:
“Este documento actualmente no tiene ningún estatus oficial dentro del W3C. Eso
es el resultado de una colaboración informal entre las partes interesadas durante la cena, en varias
listas de correo, en IRC y en correos electrónicos privados”.
La situación continuó de esta manera con el W3C persiguiendo XHTML 2.0 y el

WHATWG tomando su propio camino, que incluía comenzar a trabajar en otra
especificación, Web Applications 1.0. Resulta que Web Applications 1.0 fue el precursor
de lo que ahora se conoce como HTML5.
¿QUÉ ES HTML5?5
La situación cambió para mejor en 2006 cuando el W3C cambió de opinión con
respecto a XHTML y decidió no continuar con él. En 2007, se instituyó el Quinto
Grupo de Trabajo de HTML del W3C, y el W3C también anunció que permitiría que
la constitución del Grupo de Trabajo de XHTML 2 expirara a fines de 2009. Usando
la especificación de Aplicaciones Web de WHATWG como base, tanto el W3C y el
WHATWG comenzó a desarrollar una nueva especificación HTML, aunque algo
extraño, no fue un proceso colaborativo.
Como resultado, en realidad hay dos versiones diferentes de la especificación, aunque el
editor de ambas es Ian Hickson de Google. Afortunadamente, no hay muchas diferencias entre
los dos; la principal diferencia es cómo se mantienen. La especificación WHATWG es un
"estándar de vida mantenido continuamente"; se mantiene en una escala granular sección por
sección. La especificación W3C, por otro lado, sigue el estilo más tradicional de los
lanzamientos por etapas. En cuanto al contenido, son prácticamente iguales, aunque una de
las principales diferencias (al momento de escribir este artículo) es que la versión WHATWG
incluye el formato de archivo WebVTT y algunas características de la API de seguimiento de
texto (que se analizan en el Capítulo 8) que el La versión W3C no lo hace.
Actualmente, las versiones W3C y WHATWG de la especificación HTML5 se encuentran en
una etapa llamada "Última llamada", lo que significa que las comunidades internas y externas
del W3C están invitadas a confirmar la solidez técnica de la especificación.
HTML5ESPECIFICACIONES
Hay dos versiones diferentes de la especificación HTML5 disponibles en este momento, pero hay algunas otras versiones
que también vale la pena echarle un vistazo:
- Especificación W3C HTML5.La última versión publicada se encuentra en www.w3.org/TR/html5. Esta versión es la que más
se acerca a ser definitiva.
- Especificación HTML5 de WHATWG.El estándar de vida más reciente se encuentra en www.whatwg.org/specs/web-apps/

current-work/multipage. En general, las adiciones más recientes se agregan primero a esta especificación, antes de
finalmente llegar a la especificación W3C.
- Especificación HTML5 de WHATWG: edición para desarrolladores web.La edición para desarrolladores web se encuentra en
http://developers.whatwg.org. Esta es una versión agradable y fácil de ver de la especificación WHATWG que generalmente se
mantiene sincronizada con el nivel de vida, pero puede estar desactualizada.

¿CUÁNDO SE PUEDE UTILIZAR HTML5?
En realidad, ahora puedes usar HTML5. Muchos sitios web existentes están escritos en
HTML5, que probablemente ya conozca. Aunque la fecha objetivo actual para que la
especificación HTML5 alcance el estado de recomendación es 2014, esto no significa que
no pueda usarla.
En el momento de escribir este artículo, todas las últimas versiones de los principales navegadores
admiten algunas, si no la mayoría, de las características de HTML5. Incluso IE9 finalmente es compatible con
el marcado y la funcionalidad de HTML5. Esto debería ayudar a eliminar cualquier duda que pueda tener con
respecto a la compatibilidad del navegador.
No debe preocuparse de que la especificación HTML5 no alcance el estado de

recomendación hasta dentro de algunos años. Para poner esto en perspectiva, la
especificación para CSS2.1 solo alcanzó el estado de recomendación el 7 de junio de 2011. Y
CSS3 está de moda en este momento.
Con esto en mente, avancemos y echemos un vistazo a algunos de los nuevos elementos
estructurales de HTML5.
¿QUÉ ES HTML5?7
PRINCIPAL HTML5
ELEMENTOS ESTRUCTURALES
Cualquier uso de los elementos multimedia HTML5 y las API que se analizan en este libro
requerirá, naturalmente, la escritura de marcado HTML. Por supuesto, podría usar el
marcado HTML 4.01 (aunque necesita usar HTML5DOCTIPO mencionado en esta
sección), pero debido a que este libro trata sobre multimedia HTML5, tiene sentido que
utilice el marcado HTML5. Todos los ejemplos a lo largo de este libro y en el sitio web
usan marcado HTML5.
Comencemos por echar un vistazo rápido a los principales elementos estructurales que pueden
formar un documento HTML5.
DOCTYPE Y CHARSET
Al igual que con cualquier documento HTML, debe comenzar un documento HTML5 con un
DOCTIPO. A DOCTIPO le dice al navegador qué versión de HTML usa la página en
cuestión, y el navegador, a su vez, usa esto para determinar cómo mostrar la
página. Lo bueno de HTML5DOCTIPO es su sencillez.
Con HTML 4.01, podría escribir esto:
<!DOCTYPE HTML PÚBLICO “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
Pero en HTML5, escribirías esto:
<!DOCTYPEhtml>
Sí. Eso es. Nada mas.

este nuevo DOCTIPO es la cadena válida más corta que hará que el navegador muestre el
documento en el modo estándar, que usted desea, en lugar del modo peculiar, que
definitivamente no desea (consulte la barra lateral "Modo estándar frente a modo peculiar"
para obtener más detalles) .
8 CAPÍTULO 1UNA INTRODUCCIÓN A HTML5

ESTÁNDARES MODO VS. peculiaridades MODO
Los navegadores modernos pueden usar dos modos diferentes para interpretar el CSS de un
documento web: el modo estándar y el modo peculiar.
Modo estándar hace que el navegador muestre el CSS de acuerdo con la

especificación, lo cual es correcto y de la forma en que lo desearía.
En modo capricho por otro lado, hace que el navegador muestre el CSS de acuerdo con reglas
antiguas que no especifican. Este modo existe para la compatibilidad con versiones anteriores
porque los navegadores más antiguos no representaban CSS de acuerdo con las especificaciones.
En estos días, el modo estándar es el que desea usar, porque en la mayoría de los
casos, el navegador más antiguo que admitirá será IE6, que no necesita el modo
peculiar para funcionar correctamente (aunque probablemente requerirá algún CSS
específico de IE6, pero es probable que ¡Ya lo sabes!).
Curiosamente, o molesto, las versiones 6 a 8 de IE representan un documento web como

lo haría IE5.5 cuando presentan una página en modo peculiar. ¡Y definitivamente no
quieres esto porque la página renderizada resultante es impredecible!
También es útil y una buena idea proporcionar la codificación de caracteres del

documento, que suele ser UTF-8. Especificar esto en su marcado también se ha
simplificado mucho en HTML5.
En HTML 4.01, el conjunto de caracteres se establecería a través de esta línea:
<meta http-equiv=”Content-Type” content=”text/html; juego de caracteres=UTF-8”>
En HTML5, usarías:
<juego de caracteres meta=”utf-8”>
Al igual que con el DOCTIPO, esta cadena de codificación de caracteres contiene el

número mínimo de caracteres necesarios para que el navegador web los interprete. De
hecho, podría acortarlo dos caracteres eliminando las comillas, pero mi elección
personal es incluirlas aquí. Además, no cerré el elemento, lo cual tampoco es necesario,
pero podría hacerlo si quisiera. HTML5 no es tan estricto.
PROPINA:La especificación de un conjunto de caracteres también evita un
problema de vulnerabilidad de secuencias de comandos entre sitios en IE7.
PRINCIPALES ELEMENTOS ESTRUCTURALES HTML59

NOMBRAREL NUEVOELEMENTOS HTML5
Algunos de los nuevos elementos que se utilizado para elementos HTML. Puede leer este análisis en
incluyeron en la especificación HTML5 no se http://code.google.com/webstats/2005-12/classes.html. Los 10
eligieron al azar. principales nombres de clase CSS y sus elementos HTML5
correspondientes se enumeran enTabla 1.1.
En 2004, el editor de la especificación HTML5, Ian Hickson de
Google, llevó a cabo un experimento de extracción de datos Aunque la Tabla 1.1 no cubre todos los nuevos
usando el índice de Google en más de 1000 millones de páginas elementos de HTML5 que se agregaron, sí muestra
web para tener una mejor idea de lo que realmente estaba hecha que hubo algo de reflexión detrás de la denominación
la web con respecto al contenido del documento web. . Publicó una de los nuevos elementos de HTML5 y el contenido
serie de análisis, uno de los cuales identifica los nombres de clases semántico que representan.
de CSS más populares.
TABLA 1.1Los 10 nombres de clases HTML más populares y sus elementos HTML5 correspondientes
RANGO NOMBRE ELEMENTO HTML5
1 pie de página <pie de página>
2 menú <menú>
3 título <encabezado>
4 pequeña <pequeño>
5 texto <artículo>, <sección>, <aparte>
6 contenido <artículo>, <sección>, <aparte>
7 encabezamiento <encabezado>
8 navegación <navegación>
9 derechos de autor n/A
10 botón n/A

<ENCABEZADO> Y <PIE DE PÁGINA>
Casi todos los documentos HTML tienen un encabezado y un pie de página. La especificación HTML5
reconoce esto e incluye dos elementos específicos que puede usar para identificar semánticamente
un encabezado y un pie de página. Sin embargo, estos elementos no están restringidos a uno por
documento y se pueden usar para especificar las áreas de encabezado y pie de página de un
documento en particular.seccióno artículode un documento

Elencabezamiento elemento por lo general contiene al menos uno helemento:
<encabezado>
<h1>El elemento de encabezado</h1>
<span class=”subtitle”>Una guía rápida</span>

</encabezado>
Elpie de página El elemento es igual de simple de usar y no requiere explicación:
<pie de página>
<pequeño>Copyright © 2011</pequeño>
</pie de página>
Elencabezamiento elemento no tiene que aparecer en la parte superior del documento web, al
igual que el pie de página elemento no tiene que ser colocado en la parte inferior. De hecho, puedes
colocar cualquiera de los dos donde quieras. Dicho esto, a menudo tiene sentido hacerlo, solo para
que la fuente del documento sea más fácil de leer.

<GRUPOH>
Si un encabezado contiene un número dehelementos agrupados, pueden estar contenidos

dentro de unhgrupoelemento como este:
<encabezado>
<hgrupo>
<h1>El elemento de encabezado</h1>
<h2>Una guía rápida</h2>
</hgrupo>
<a href=”home.html”>Inicio</a>
</encabezado>
Tenga en cuenta que elhgrupoelemento puedesoloContienehelementos y nada más.
HGROUP¡CONTROVERSIA!
ElhgrupoEl elemento es un poco controvertido en el momento de escribir este artículo,

porque ha sido eliminado y reinsertado en la especificación HTML5 en los últimos meses. Se
están haciendo esfuerzos para eliminarlo nuevamente y posiblemente reemplazarlo con
algo más semántico. Entonces, cuando lea esto, es posible que se haya omitido de la
especificación, por lo que vale la pena verificarlo dos veces.

<ARTÍCULO> Y <SECCIÓN>
Cuando está diseñando una página web con HTML, a menudo usa eldivisiónelemento para
indicar secciones específicas de su documento. Esto generalmente funciona bien y es todo lo
que se necesita. Pero, ¿qué pasaría si quisiera darle a su sección un significado semántico
particular para que sea más que "solo undiv”?
Aquí es donde elartículoysecciónentran elementos, y a menudo hay un poco de
confusión sobre cuál usar y cuándo. La confusión surge porque te ves obligado a
pensar un poco más sobre lo que estás escribiendo y la forma en que lo presentas.
Si simplemente desea contener información solo con fines de estilo, eldivisión
elemento es el que se va a utilizar. La razón es que el contenido dentro deldivisiónno tiene ningún
significado semántico específico, por ejemplo, cuando se usa como un elemento de "envoltura" para
ayudar a colocar algunas columnas en el centro de una página:
<div class=”envoltura”>
<div class=”columnOne”>Esta es la columna uno</div>
<div class=”columnTwo”>Esta es la columna dos</div>
</div>
Si decide que el contenido realmente tiene un significado semántico, debe observar

detenidamente cuál es ese significado. La especificación W3C HTML5 en realidad define
unsecciónelemento como representante
“una sección genérica de un documento o solicitud. Una sección, en este contexto,

es una agrupación temática de contenido, generalmente con un encabezado”.
Entonces, si el contenido que desea contener encaja perfectamente bajo un encabezado, un
secciónEl elemento es probablemente el camino a seguir. Pero antes de tomar la decisión final
sobre el uso de unsecciónelemento, echemos un vistazo rápido a laartículoelemento, que es un

tipo específico desecciónelemento. Una vez más, la especificación W3C le anima a utilizar el
artículoelemento
“cuando tendría sentido sindicar los contenidos del elemento”.
Pero, ¿qué significa esto, exactamente?

Bueno, como ejemplo, piense en el diseño de un artículo de periódico. Un artículo de periódico puede
contener varias secciones, cada una de las cuales tiene su propio encabezado. Pero en general,

las secciones se relacionan entre sí y encajan, porque hablan de la misma historia. Si
este es el caso en su contenido, elartículoelemento es el que se va a utilizar.
Pero tenga en cuenta que elartículoEl elemento no se relaciona con la idea de un artículo de
periódico, solo con la forma en que se presenta. Unartículotambién puede representar una prenda de
vestir en su guardarropa, porque es un término genérico que se refiere a una sola unidad de
contenido que es independiente y se puede sindicar. Pero también puede relacionarse con otros
artículos que se encuentran al lado.
Por supuesto, la analogía del artículo periodístico también muestra que puedes anidarsección
elementos dentroartículoelementos y viceversa. Pero como con eldivisiónelemento, ¡no haga que el
contenido sea demasiado confuso o tenga demasiado anidamiento!

Poniendo elartículoysecciónelementos juntos, su contenido podría
verse así:
<artículo>
<encabezado>
<h1>Multimedios HTML5</h1>
<span class=”subtitle”>¡El camino a seguir!</span>

</encabezado>
<sección>
<encabezado>
<h2>Vídeo</h2>
</encabezado>
<p>Esta sección habla de video...</p>

</sección>
<sección>
<encabezado>
<h2>Sonido</h2>
</encabezado>
<p>Esta sección habla de audio...</p>

</sección>
<pie de página>

<small>Escrito por Ian Devlin 2011</small>
</pie de página>
</artículo>
Usando el ejemplo anterior, puede ver cómo la idea de usar elartículo

ysecciónelementos dentro de su contenido se pueden poner en práctica. El ejemplo
tiene dos secciones, una contiene información sobre video y la otra contiene
información sobre audio. Están claramente separados unos de otros y, por lo tanto,
deben estar contenidos en espacios separados.secciónelementos.
En general, sin embargo, están relacionados y se unen bajo el encabezado
Multimedia HTML5. Así que colectivamente deberían ir juntos bajo el mismo
encabezado, ya sea en unseccióno artículo. En este caso, parece tener sentido que el
contenido pueda ser sindicado (p. ej., contenido como un elemento en una fuente RSS),
por lo que el artículoelemento parece más adecuado.
Alternativamente, como se mencionó anteriormente, puede tener una serie de secciónelementos
contenidos dentro de un artículo, por ejemplo, en una página de resumen de noticias que contiene
enlaces a artículos separados:
<sección>
<encabezado>
<h1>Noticias HTML5</h1>
</encabezado>
<artículo>
<encabezado>
<h2>Multimedios HTML5</h2>
</encabezado>
<p>En este artículo aprenderá todo sobre HTML5 pags

multimedios.</p>
<a href=”html5-multimedia.html”>Leer más...</a>
</artículo>
<artículo>
<encabezado>

<h2>HTML5 y estructura semántica</h2>
</encabezado>
<p>Este artículo trata sobre HTML5 y estructura pags

semántica.</p>
<a href=”html5-structural-semantics.html”>Leer más...</a>
</artículo>
<pie de página>
<a href=”noticias-list.html”>Ver todo</a>

</pie de página>
</sección>
Como también ilustran los ejemplos, elartículoysecciónLos elementos también pueden contener
encabezamiento ypie de página elementos si tienen sentido semántico, como lo hacen aquí.
HELEMENTOS ENHTML5
Un tema candente de discusión en este momento en el mundo de HTML5 es el dehelementos en elencabezamiento

elemento y si es múltipleh1elementos deben utilizarse en un solo documento.
Como habrás notado en los ejemplos de la sección “<artículo> y <sección>”, unh1elemento ha sido utilizado en la principal
encabezado (ya sea en generalartículoo sección)yh2elementos en el subencabezado de sección/artículoelementos. Esto se hizo con
fines de compatibilidad con versiones anteriores debido a la compatibilidad deficiente del navegador (excepto Firefox 5 y Chrome
12) para lo que se conoce como elAlgoritmo de esquematización HTML5.
El algoritmo de esquematización de HTML5 se define como parte de la especificación de HTML5 y se utiliza para determinar la
estructura de un documento de HTML5 utilizando sus encabezados, títulos, etc. para trazar el documento. Puede leer acerca de
los esquemas de documentos HTML5 en http://html5doctor.com/document-outlines.
Por el momento es recomendable ceñirse al uso de los diferenteshelementos para mantener la compatibilidad con navegadores
más antiguos. Naturalmente, la compatibilidad con el algoritmo mejorará con más lanzamientos de navegadores, pero como con
todo, la decisión final es suya.
dieciséisCAPÍTULO 1UNA INTRODUCCIÓN A HTML5

<NAV>
ElnavegaciónEl elemento se utiliza para contener la navegación principal en todo su sitio. Por lo tanto,
cualquier enlace a páginas separadas, como Acerca de, Noticias y su blog, puede incluirse aquí.
También puede contener enlaces externos a su sitio, es decir, que alejan al

usuario de su sitio, por ejemplo, enlaces a cuentas de Twitter o Facebook, siempre
que constituyan la navegación principal de su sitio.
El marcado es fácil, y elnavegaciónEl elemento generalmente contiene una lista desordenada, pero, por
supuesto, también puede contener simplemente una serie de hipervínculos a las páginas en cuestión:
<navegación>
<ul>
<li>
<a href=”index.html”>Inicio</a>
</li>
<li>
<a href=”about.html”>Acerca de</a>
</li>
<li>
<a href=”contacto.html”>Contacto</a>
</li>
</ul>
</nav>
Elnavegaciónelemento a menudo está contenido dentro de unencabezamiento,aunque no tiene porque
serlo. También puede estar contenido dentro de unpie de página elemento, pero solo si es la navegación
principal de su sitio web. Debido a que los pies de página en estos días a menudo contienen un conjunto de
enlaces de navegación de sitios secundarios, no deben estar contenidos dentro de unnavegaciónelemento. Sin
embargo, está bien tener más de unanavegaciónelemento en la misma página, en caso de que se justifique su
uso.

<APARTE>
ElaparteEl elemento se usa para contener contenido no principal de la página que es relevante para el
contenido principal al que se encuentra, pero el contenido principal tiene perfecto sentido por sí solo
sin él. el contenido de laaparteEl elemento también puede tener sentido por sí solo, aunque no
necesariamente.
Un uso actual, en el mundo real, delaparteEl elemento es para las barras laterales, que por supuesto
pueden contener cualquier cosa, desde widgets y fuentes de redes sociales hasta enlaces e imágenes
relacionados:
<aparte>
<encabezado>
<h1>Fuente de Twitter</h1>
</encabezado>
<ul>
<li>#HTML5 es increíble. - 26 de junio de 2011 a las 14:30</li>
<li>Todos deberían usar #HTML5 - 26 de junio de 2011 a las

14:22</li>
</ul>
<pie de página>
<a href=”http://twitter.com/iandevlin”>¡sígueme!</a>
</pie de página>
</aparte>
Tenga en cuenta cómo elaparteelemento también puede contenerencabezamiento ypie de página
elementos si son apropiados.

FIGURA 1.1Se muestra una imagen
y un pie de foto con elfiguray
figcaptionelementos.
<FIGURA> Y <FIGCAPTION>
Se introdujeron dos nuevos elementos para permitir relacionar un elemento multimedia (imagen,
video o audio) con un subtítulo específico, lo que por supuesto hace que el contenido dentro de estos
nuevos elementos sea más semántico (¡ahí está esa palabra otra vez!): elfigura
elemento y elfigcaptionelemento.
Elfigcaptionelemento sólo puede existir dentro de unfiguraelemento, aunque no
tiene porque estar ahí; obviamente, no todo el contenido tendrá un título:
<figura>
<img src=”images/html5-logo.gif” alt=”El logotipo de HTML5 “ />
<figcaption>
<strong>Figura 1: </strong>¡El logotipo de HTML5 en todo su esplendor!
</figcaption>
</figura>
Normalmente, diseñarías el figcaptioncontenido para que aparezca en texto pequeño encima de
una imagen o en la parte inferior (Figura 1.1). ¡Pero, por supuesto, no tienes que hacerlo y
generalmente puedes hacer con él lo que quieras!

EXPLORADOR DE INTERNET YCOMPATIBILIDAD DEL NAVEGADOR
En el momento de escribir este artículo, las últimas versiones de todos los principales navegadores son compatibles con varios de los nuevos elementos
de HTML5, especialmente los mencionados en este capítulo. IE8 y anteriores, sin embargo, no lo hacen. Estos nuevos elementos son completamente
desconocidos para estos navegadores y, por lo tanto, los navegadores no los renderizarán en absoluto.
No todo está perdido, sin embargo.
Puede agregar fácilmente elhtml5shimguión de Remy Sharp (http://code.google.com/p/html5shiv) en la parte superior de su

documento web:

Este script le dice a IE todo sobre los nuevos elementos que puede encontrar al renderizar el documento, por lo que felizmente
lo hace.
Para estos navegadores más antiguos, también debe agregar un estilo CSS predeterminado a ciertos elementos para que el navegador
sepa representarlos como elementos a nivel de bloque:

Si tiene la intención de configurar el HTML interno de un elemento o usa jQuery con HTML5 y versiones anteriores de IE,
debe agregar el interiorShiv script (http://jdbartlett.com/innershiv) a su documento web.
Deberá descargar este archivo JavaScript y alojarlo usted mismo, y luego agregarlo de la misma manera que agregaría el
calza interior archivo mencionado anteriormente:

Elcalza interior yinteriorShiv Los archivos funcionan juntos para permitirle trabajar con HTML5 en versiones anteriores de IE.
Tenga en cuenta que cada una de estas adiciones está contenida en comentarios condicionales que se dirigen a versiones de IE
anteriores a la versión 8. Esto es para evitar la adición y el procesamiento innecesarios de scripts para navegadores que no los necesitan.
20 CAPÍTULO 1UNA INTRODUCCIÓN A HTML5

<GUIÓN>
El significado y el uso de la texto elemento no ha cambiado en absoluto en HTML5. Sin

embargo, debido a que una buena parte de este libro trata sobre las API de JavaScript, vale la
pena señalar una diferencia nueva y útil: ya no tiene que especificar elescribe atributo si lo está
utilizando para encerrar JavaScript.
Sí, las personas inteligentes de WHATWG y W3C han decidido que por defecto
tipo = "texto/javascript", lo que evita tener que escribirlo y hace que el código sea
mucho más ordenado:
<script>
alert(“¡No tuve que especificar el atributo de tipo!”);
</script>
ENVASE ARRIBA
Los procesos involucrados para que las especificaciones HTML5 actuales llegaran a donde
están ahora fueron, por supuesto, un poco más complicados de lo que se ha descrito en este
capítulo. Pero la breve explicación debería darle una base en el proceso.
Además, los elementos mencionados son solo una porción muy pequeña de los nuevos
elementos contenidos en la especificación HTML5, y también se han realizado cambios en
elementos que existían en HTML 4.01 y versiones anteriores. Puede leer una lista completa de
estas diferencias en www.w3.org/TR/html5-diff.
Sin embargo, los elementos que encontró en este capítulo son suficientes para
crear sus propios documentos HTML5 simples. Este conocimiento también le ayudará a
comprender los ejemplos y recursos proporcionados en este libro.
En el próximo capítulo, aprenderá un poco sobre la historia de multimedia dentro de los
navegadores, y también observará de cerca los elementos HTML5 que son específicamente
relevantes para multimedia HTML5.
TERMINANDO21
2
HTML5MULTIMEDIA
ELEMENTOS
Ahora que está armado con la historia
básica de HTML5 y sus elementos de
estructura, puede comenzar a aprender ab
Multimedia HTML5, sus elementos, sus atributos y la

funcionalidad combinada que aportan.
HTML 4.01 no tenía un método definido para llevar audio y video a un sitio
web, lo que generó una gran popularidad en los complementos de terceros,
como Flash, para entregar contenido multimedia. Pero HTML5 proporciona
esta estructura tan necesaria para entregar audio y video a través de Internet a
través de un navegador web.
Este capítulo ofrece algo de historia de multimedia en el navegador y
cómo se logró la reproducción de audio y video a través de las muchas
aplicaciones, reproductores y complementos que lanzaron varios
proveedores. Luego aprenderá acerca de los nuevos elementos HTML5,
que le permiten aprovechar la multimedia nativa en el navegador.
23
HISTORIADEWEB MULTIMEDIA
Cuando los navegadores y la idea de la web aparecieron por primera vez a principios de la
década de 1990, no había multimedia web. Poco después, comenzaron a incorporarse
imágenes, pero en el mejor de los casos eran multimedia de pobres. Aunque podían animarse
con la llegada de los GIF animados, por supuesto no eran interactivos en absoluto.
Incluso con la existencia de archivos de audio y video, la capacidad de la tecnología de
Internet para entregar este multimedia a través de la web era limitada. Las conexiones a
Internet eran lentas, los archivos de audio y video eran grandes y nadie quería esperar a que
se descargaran los archivos grandes. Una vez que llegó el archivo, se tuvo que usar un
reproductor externo para ver el contenido, que estaba separado del navegador web. Esta era
la norma, y pocos se quejaron.
El aumento fenomenal en las velocidades de conexión a Internet trajo consigo la capacidad de
enviar multimedia a través de la web aún más rápido, y la tecnología de navegador web tuvo que
moverse con la misma rapidez, lo que por supuesto sucedió con la introducción de lo que ahora se
conoce como multimedia nativa.
Antes de sumergirse en la multimedia nativa, echemos un vistazo rápido a una descripción general de
los reproductores externos que se usaban (y aún se usan como reproductores de escritorio) para reproducir
archivos de audio y video.
REPRODUCTORES DE MEDIOS
Un reproductor multimedia es un término estándar utilizado para describir una pieza de software que tiene la
capacidad de reproducir archivos multimedia, como audio y video, generalmente a través de una interfaz
gráfica de usuario.
A mediados de la década de 1990, el formato de archivo MIDI (interfaz digital de instrumentos
musicales) se usaba para reproducir música de fondo en documentos web y la música generalmente
se reproducía automáticamente. Aunque muy molesto, este fue el comienzo de la disponibilidad de
multimedia a través del navegador. Luego se desarrolló una gran cantidad de otros jugadores de
diferentes proveedores para infestar su computadora.
RealNetworks lanzó su reproductor de audio RealAudio en 1995, que introdujo por primera vez la idea de
reproducir audio a través de la web usando un sistema propietario.real academia de bellas artes y
. RAMarchivos de sonido. Los desarrollos posteriores de RealAudio llevaron al lanzamiento de
RealVideo en 1997, que permitía la transmisión de video y se basaba en el formato de video

H.263. Estos dos reproductores finalmente se agruparon bajo el nombre de RealPlayer y se
incluyeron en Windows 98 como una herramienta seleccionable. RealPlayer todavía existe hoy
(la versión 14 es la última versión estable) y está disponible en muchas plataformas; es capaz
de reproducir múltiples formatos de archivos de audio y video.
24 CAPITULO 2 ELEMENTOS MULTIMEDIA HTML5

FIGURA 2.1 Microsoft Media Player 6
se envió con Windows 98.
Macromedia lanzó su primera edición de Shockwave en 1995, que se desarrolló

originalmente para el navegador web Netscape. En ese momento, la empresa
permitía a los usuarios de su popular software multimedia Director crear
aplicaciones y animaciones interactivas e insertarlas en un documento web.
Macromedia también tenía otro reproductor multimedia en desarrollo; lanzó el
reproductor Shockwave Flash en 2002, que admitía video y audio. El reproductor
Shockwave Flash utilizó el formato de archivo SWF desarrollado por el software
FutureWave. La intención principal del formato de archivo SWF era crear archivos
pequeños para mostrar animaciones, así como usarlos para intercambiar audio,
video y datos. Adobe compró Macromedia en 2005 y el reproductor Shockwave
Flash pasó a llamarse Adobe Flash.
Microsoft mejoró sus ofertas anteriores y lanzó DirectShow en 1996, que luego
se convirtió en Media Player 6.1 y se lanzó como parte de Windows 98 (Figura 2.1).
Con el lanzamiento de Windows 2000, Microsoft también lanzó la versión 7.1 de Windows
Media Player. Este tenía una interfaz gráfica muy mejorada y, en general, ofrecía una mejor
experiencia. Con este lanzamiento vinocódecs—protocolos de archivos especiales que
permiten crear y reproducir contenido multimedia.
NOTA:Obtendrá más información sobre los códecs en los

Capítulos 3 y 4 sobre audio y video HTML5, respectivamente.
HISTORIA DE MULTIMEDIA WEB25

Con lanzamientos posteriores, Microsoft mejoró su Media Player, mejorando
continuamente la oferta a lo largo del camino.
Microsoft también trabajó en un marco de aplicación para competir con Adobe Flash en el sentido de que
podría ejecutar el navegadorcomplementos(conjuntos de pequeños componentes de software que agregan
habilidades específicas a otras aplicaciones de software más grandes (en este caso, un navegador web) y otras
aplicaciones de Internet enriquecidas. Lanzado inicialmente en 2007, Microsoft Silverlight admitía muchos
tipos diferentes de formatos de archivo de audio y video, así como animación e interactividad. Originalmente,
tenía una tasa de adopción lenta, pero a partir de junio de 2011, tenía una penetración de mercado de
aproximadamente el 73 por ciento, con Adobe Flash con una participación de mercado del 97 por ciento.
Apple también estuvo en el juego de los reproductores multimedia desde los primeros
días. Su primera versión de QuickTime se lanzó en 1991 para el sistema operativo System
Software 6. QuickTime continuó siendo una pieza de software solo para Mac hasta el
lanzamiento de QuickTime 4.0 en 1999, que también se ejecutaba en Windows y admitía la
reproducción de audio MP3. QuickTime 5 y 6 ofrecieron reproducción de video y Flash, y la
versión 6 también admitió la reproducción de MP4. La versión 7 salió en 2005 y mejoró la
reproducción de MP4, pero dejó de admitir contenido Flash. La última versión de QuickTime
en el momento de escribir este artículo es la versión 10 para Mac OS, y diferentes sabores de
Microsoft Windows tienen versiones anteriores.
Cada proveedor tenía su propia forma de entregar multimedia, pero, por supuesto,
ninguno era perfecto. No había un método estandarizado para incrustar audio y video en un
documento web, y es por esta razón, para estandarizar la incrustación de multimedia, que el
audioyvideoLos elementos se convirtieron en parte de la especificación HTML5.
26CAPITULO 2 ELEMENTOS MULTIMEDIA HTML5

PROBLEMAS CON LOS REPRODUCTORES MULTIMEDIA
Todos los reproductores multimedia tenían un problema importante en común: los usuarios finales
necesitaban tener instalado el complemento adecuado para poder reproducir el audio o el video necesarios.
Inicialmente, todo lo que hicieron estos complementos fue iniciar el reproductor multimedia respectivo
para reproducir el audio o el video. La capacidad de mostrar multimedia dentro del navegador llegó más
tarde, aunque las ventanas emergentes (donde el reproductor multimedia apropiado se iniciaba fuera del
navegador) todavía eran comunes. Si el complemento requerido no existía en su sistema, tenía que
descargarlo, lo cual era una molestia porque necesitaba actualizarlo constantemente.
Además, diferentes complementos de diferentes proveedores podrían entrar en conflicto

entre sí, lo que provocaría inestabilidad en el navegador. Por ejemplo, VLC Media Player entra
en conflicto con Windows Media Player en Firefox, lo que a veces hace que Firefox se bloquee
al intentar ver un archivo WMV.
La seguridad también fue un problema, porque los complementos eran y siguen siendo una de
las principales áreas de destino del malware. Un ejemplo de esto se identificó en marzo de 2011
cuando se determinó que una vulnerabilidad crítica en Flash Player 10.2 podría permitir a atacantes
remotos ejecutar código arbitrario o provocar un ataque de denegación de servicio en la máquina
infectada (consulte www.adobe.com/support/ seguridad/avisos/apsa11-01.html).
Por supuesto, tan pronto como se detectan estas vulnerabilidades, los proveedores se mueven
rápidamente para parchearlas y lanzar una versión. Pero nuevamente, esto significa que el usuario
debe actualizar constantemente a las últimas versiones cuando estén disponibles.
Un problema importante con el complemento más popular de todos, Flash, es la decisión de
Apple de abril de 2010 de no admitir Flash en iPhones y iPads. Por supuesto, esto hace que el
contenido servido en Flash no esté disponible en absoluto en estos dispositivos.
Veamos ahora cómo se pueden aprovechar estos reproductores multimedia a través de sus
complementos para reproducir el audio o video requerido en HTML.

ELEMENTOS HTML
En el pasado, para incrustar complementos dentro de su documento web para iniciar un

reproductor multimedia, podía usar varios elementos HTML para hacerlo. Aunque el uso de
estos elementos es la forma en que se hacía en el pasado, aún debe conocer estos elementos
y cómo se usan, porque desafortunadamente, no todos los navegadores admiten multimedia
HTML5. Leerá más acerca de esta falta de soporte del navegador para multimedia HTML5 en
los Capítulos 3 y 4.
De hecho, se podrían usar tres elementos HTML diferentes:
- subprograma
- empotrar
- objeto
Elsubprograma El elemento, como sugiere su nombre, solo se usó para incrustar applets de
Java y en realidad quedó obsoleto en HTML 4.01. Permitió que un applet de Java se incrustara
en cualquier lugar dentro del documento web donde se colocó el elemento. Lo más probable
es que nunca necesite usar este elemento porque ahora está obsoleto, así que sigamos
adelante.
ElempotrarEl elemento fue introducido por el navegador Netscape 2.0 para permitir a los
desarrolladores incrustar un objeto de datos arbitrario dentro de un documento web. Si el
complemento requerido no estaba instalado en su sistema, generalmente se mostraba una
advertencia junto con un cuadro vacío. Un ejemplo de código incrustado que se usa para reproducir
un archivo MIDI se ve así:
<embed src=”myMidiFile.mid” height=”60” width=”144”>
Aquí se le dice al navegador que inserte elmiMidiFile.miden el navegador en la

posición especificada con las dimensiones especificadas.
NOTA:ElempotrarEl elemento se introdujo oficialmente en HTML5, convirtiéndolo

finalmente en una parte válida de una especificación HTML. Aunque la mayoría de los
navegadores lo admitían antes de HTML5, en realidad nunca fue un elemento válido.

Elobjetoelemento reemplazó al subprograma yempotrar(ninguno estuvo realmente en
ninguna especificación) en HTML 4.01 y estaba destinado a ser más genérico con respecto a
los medios que contiene. Por lo tanto, se puede usar para incrustar subprogramas Java, audio
y video. Elobjetoelement es bastante poderoso porque puede aceptar una gran cantidad de
argumentos y tipos de objetos de datos, pero esto a su vez lo hace bastante difícil de manejar.
El siguiente ejemplo muestra cómo elobjetoEl elemento se puede usar para incrustar un
archivo de video de Adobe Flash:
<tipo de objeto=”aplicación/x-shockwave-flash” ancho=”512”

pagsaltura=”300” wmode=”transparente” datos=”flvplayer.swf?
pagsfile=myFlashVideo.flv&autoStart=true”>
<param name=”película” value=”flvplayer.swf?file=
pagsmyFlashVideo.flv&autoStart=true” />
<param name=”wmode” value=”transparente” />
<param name=”allowscriptaccess” value=”siempre” />

<param name=”allowfullscreen” value=”siempre” />
</objeto>
El código aquí indica al navegador que el contenido dentro del objeto

elemento es Flash a través del tipo MIME (Multipurpose Internet Mail Extension) en el
escribe atributo. También establece la anchura y la altura del contenedor de objetos y
utiliza elmodo w atributo para informar al navegador que el fondo de la página HTML
debe mostrarse en las secciones transparentes del contenido Flash. Eldatos
El atributo se utiliza para apuntar a una URL válida, que contendrá el contenido real del
contenedor.

Elparámetro El elemento se utiliza para agregar diferentes parámetros al contenido incrustado. Como
puedes ver, uno de losparámetro elementos aquí se utiliza para establecer un parámetro llamado
películacuyo valor es el mismo que eldatosconjunto de atributos en el conjuntoobjeto¡elemento!

Esto lleva a la duplicación, que es, lamentablemente, necesaria. Esto es una alternativa: si el
navegador no sabe cómo reproducir objetos con un tipo MIME deaplicación/x-shockwave-flash,
comprobará el siguiente elemento secundario y verá si puede reproducirlo (en este caso, el
parámetro ajuste parapelícula).
Elmodo w El parámetro también se establece nuevamente para los navegadores que no
entienden la primera configuración en la declaración del objeto. Se establecen otros dos parámetros:
permitir el acceso al script, que permite que la página HTML interactúe con el objeto si el objeto tiene
algo con lo que interactuar; ypermitir pantalla completa,lo que permite que el objeto llene la pantalla
completa si el usuario lo solicita.

Puede estar de acuerdo en que el código anterior es un poco doloroso y confuso de ver
inicialmente. Afortunadamente, HTML5 hace que la incrustación de objetos multimedia sea mucho
más fácil porque ahora la multimedia es nativa del navegador.

BIENVENIDOS, NATIVO ¡MULTIMEDIA!
Con multimedia nativa, el objeto ya no está incrustado en el documento web, sino que
el navegador lo trata como un objeto nativo y, por lo tanto, lo integra. Esto brinda
beneficios inmediatos, como:
- Ya no se requieren complementos.
- Velocidad: todo lo que sea nativo de un navegador será más rápido que cualquier complemento de
terceros.
- Los controles nativos son proporcionados por el navegador.
- La accesibilidad del teclado se integra automáticamente.
HTML5 proporciona cuatro nuevos elementos de marcado que lo ayudan a lograr contenido
multimedia nativo en el navegador. Echemos un vistazo a cada uno de estos elementos y sus posibles
atributos.
¡BIENVENIDOS MULTIMEDIA NATIVO!31

EL ELEMENTO DE AUDIO
ElaudioEl elemento le permite incrustar archivos de audio o una transmisión de audio en un

documento web. Aquí hay un fragmento de código rápido que le muestra cuán fácil es
incrustar un archivo de audio en su documento web usando elaudioelemento:
<audio src=”sayHello.mp3”></audio>
Mucho más simple, ¿no?

Tabla 2.1enumera los atributos que el elemento puede tomar.
CUADRO 2.1Atributos de elementos de audio
ATRIBUTO DESCRIPCIÓN
origen Proporciona la dirección del recurso multimedia, en este caso, un archivo de audio o
una secuencia. Este atributo debe contener una URL válida para la fuente de audio.
precarga Se utiliza para indicarle al navegador cómo precargar la fuente de audio, si es que lo hace.
Solo le informa al navegador qué hacer, pero en última instancia, el navegador hará lo que
quiera (por ejemplo, en función de la configuración del usuario).
Tiene tres configuraciones posibles:
ninguna Informa al navegador que no precargue el archivo de audio. No se
espera que el usuario reproduzca el audio, por lo que no es necesario
realizar ninguna carga previa. Comenzará a cargarse tan pronto como
el usuario haga clic en el botón Reproducir.
metadatos Informa al navegador que solo precargue información sobre el

archivo de audio (por ejemplo, dimensiones, duración, etc.). El
usuario puede querer reproducir el audio. Sus metadatos (p. ej.,
dimensiones, duración) deben estar precargados. El resto del audio
se descargará cuando el usuario haga clic en el botón Reproducir.
auto Le dice al navegador que decida si descargar los metadatos,

la fuente completa o no descargar nada. Este es el valor
predeterminado siprecargano se especifica
El apoyo a este atributo es deficiente; solo Firefox 5 y Chrome 12

actualmente lo admiten.

CUADRO 2.1Atributos de elementos de audio(continuado)
auto-reproducción Es un atributo booleano que informa al navegador para que comience a reproducir
automáticamente la fuente de audio cuando se carga la página. Use esto con precaución
porque la reproducción automática de audio puede ser una molestia para los usuarios.
control S También es un atributo booleano que, si está presente, le dice al navegador que proporcione
un conjunto predeterminado de controles para el audio.
apagado Controla el estado predeterminado de la fuente de audio. Naturalmente, esto es en gran
medida redundante con una fuente de audio porque si lo reproduce automáticamente,
querrá que se escuche. Actualmente, ningún navegador admite este atributo.
círculo Otro atributo booleano, que indica que el audio se reproducirá continuamente
en un bucle. Es recomendable usar esto con precaución porque puede ser una
molestia para los usuarios, ¡especialmente si no proporciona ningún control
para que lo detengan! Este atributo actualmente no es compatible con Firefox
5.
origen cruzado Es un atributo relativamente nuevo de la especificación que pretende

permitir o prohibir los medios de origen cruzado de la fuente de audio
mediante la especificación CORS (Cross-Origin Resource Sharing) (sobre la
que puede leer en www.w3.org/TR/cors ).
Básicamente, especifica si la fuente de audio se puede compartir entre otros

dominios.
Puede tener dos configuraciones:
anónimo Permite el acceso anónimo a la fuente de audio.
credenciales de uso Se requieren credenciales para acceder a la fuente de

audio.
Si no se especifica ningún ajuste en particular, peroorigen cruzadoestá presente,

por defecto anónimo ajuste. Debido a que este atributo es tan nuevo en la
especificación, aún no se ha implementado en ninguno de los navegadores
principales.
grupo de medios Permite vincular varios elementos multimedia, en este caso fuentes de audio.
Esto puede, por ejemplo, permitir la reproducción y sincronización de dos
fuentes de audio diferentes en dos lugares diferentes de la pantalla.

FIGURA 2.2 Los controles de audio en FIGURA 2.3 Los controles de audio en
Firefox 5. Safari 5.0.5.
FIGURA 2.5 Los controles de audio en

Opera 11.50.
Chrome 12.

Internet Explorer 9.
Como puede ver en la Tabla 2.1, se pueden usar varias configuraciones diferentes con el audio
algunos de los cuales tienen una serie de configuraciones. Una declaración de audio de muestra en
un documento web podría verse así:
<audio src=”sayHello.ogg” controles></audio>
Este simple fragmento de código le informa al navegador que incruste el archivo de audio especificado en
el navegador y que utilice los propios controles multimedia del navegador. Varios navegadores tienen
diferentes controles predeterminados, por lo que la apariencia de los controles de audio depende del
navegador que esté usando el espectador. Puede ver ejemplos de cómo estos controles se representan de
manera diferente enFiguras 2.2mediante2.6.
Aprenderás más sobre elaudioen el Capítulo 3. Se proporcionan ejemplos más detallados

de su uso, así como también cómo combinar la mayoría de los atributos enumerados en la
Tabla 2.1.
Ahora que ha echado un vistazo rápido a los atributos de laaudioelemento, echemos un
vistazo a lavideoelemento.

EL ELEMENTO DE VÍDEO
ElvideoEl elemento le permite incrustar contenido de video en su documento web y, una vez
más, puede especificar una serie de atributos para controlar este contenido de video.
Muchos atributos son los mismos que los especificados para elaudioelemento, pero hay
algunos extras, y todos están enumerados enCuadro 2.2.
TABLA 2.2Atributos de elementos de vídeo
origen Proporciona la dirección del recurso multimedia, en este caso, un archivo de video o una transmisión. Este atributo debe contener
una URL válida para la fuente del video.
precarga Se utiliza para indicarle al navegador cómo precargar la fuente de video, si es que lo hace. Nuevamente, es solo una sugerencia para
el navegador, que puede optar por anularlo con una posible configuración de usuario.
Tiene tres configuraciones posibles:
ninguna Informa al navegador que no se espera que el usuario quiera ver el video, por lo que no es
necesario realizar ninguna carga previa.
metadatos Informa al navegador que el usuario puede querer ver el video y, por lo tanto, sus metadatos (por ejemplo,
dimensiones, duración) deben cargarse previamente.
auto Le dice al navegador que decida si descargar los metadatos, la fuente completa o no
descargar nada. Este es el valor predeterminado siprecargano se especifica
auto-reproducción Es un atributo booleano que informa al navegador para que comience a reproducir automáticamente la fuente de video tan pronto como
pueda. ¡No se considera una buena práctica hacer esto!
control S También es un atributo booleano que, si está presente, le dice al navegador que proporcione un conjunto predeterminado de controles para el
video.
apagado Controla el estado predeterminado de la fuente de video. Esto significa que puede especificar que un video que se reproduce
automáticamente se puede silenciar cuando comienza a reproducirse, evitando así cualquier irritación para el usuario.
Este atributo actualmente no es compatible con ninguno de los principales navegadores.
círculo Otro atributo booleano, que indica que el video se reproducirá continuamente en un bucle.
Actualmente, esto no es compatible con Firefox 5.
póster Permite que se muestre un archivo de imagen cuando no hay datos de video disponibles.
Sipósterno está especificado, el navegador mostrará el primer cuadro del video, que por supuesto puede
no ser la imagen que desea mostrar. Debe contener una URL válida para la imagen en cuestión.

TABLA 2.2Atributos de elementos de vídeo(continuado)
ancho Especifica el ancho del elemento de video en píxeles.
altura Especifica la altura del elemento de video en píxeles.
origen cruzado Indica si la fuente de video se puede compartir entre dominios o no. De forma predeterminada, la fuente se puede compartir
entre dominios.
Puede tener dos configuraciones:
anónimo Permite el acceso anónimo a la fuente de video.
credenciales de uso Se requieren credenciales para acceder a la fuente de video.
Si no se especifica ningún ajuste en particular, peroorigen cruzadoestá presente, por defecto anónimo ajuste.
Debido a que este atributo es tan nuevo en la especificación, aún no se ha implementado en ninguno de los navegadores.
grupo de medios Permite que múltiples elementos multimedia, en este caso fuentes de video, se vinculen entre sí. Esto puede, por ejemplo,
permitir la reproducción y sincronización de dos videos diferentes en dos lugares diferentes de la pantalla.
ORIGEN CRUZADO
origen cruzadoes una adición muy reciente a la especificación HTML5 y, como tal,
actualmente no tiene aplicación en el mundo real. Ninguno de los principales
navegadores lo admite. Utiliza la especificación CORS (Cross-Origin Resource Sharing),
sobre la que puede leer en www.w3.org/TR/cors.
GRUPO DE MEDIOS
Me gustaorigen cruzado, grupo de medioses una adición muy nueva a la especificación HTML5
y en el momento de escribir este artículo aún no se ha implementado en ninguno de los
principales navegadores. Una vez implementado, será muy útil para la accesibilidad, ya que
permite escenarios como reproducir un video en lenguaje de señas junto con un video
normal y los mantiene sincronizados.

FIGURA 2.7Los controles de video en FIGURA 2.8Los controles de video en FIGURA 2.9Los controles de video en
Firefox 5. Safari 5.0.5. Chrome 12.
FIGURA 2.10Los controles de video en FIGURA 2.11Los controles de video en

Opera 11.50. Internet Explorer 9.
Como puede ver, muchos de losaudioyvideoLos atributos de los elementos son los
mismos, lo que por supuesto hace que sea mucho más fácil especificarlos porque solo
necesita recordar un conjunto de atributos.
Un ejemplo de uso de lavideoEl elemento para mostrar un video en un documento web
completo con controles de navegador podría verse así:
<video src=”snowy-tree.mp4” width=”300” height=”176” controles>

pags</vídeo>
Este ejemplo simple le informa al navegador que muestre un reproductor de video de un tamaño de 300
píxeles por 176 píxeles con controles de medios predeterminados que contienen elárbol-nevado.mp4
archivo de vídeo.
Al igual que con el audio, varios navegadores muestran los controles y el video de manera
diferente. Puedes ver cómo se ven en cada navegador enFiguras 2.7mediante2.11.

EL ELEMENTO FUENTE
Debido a los diferentes requisitos del navegador (más sobre esto en los Capítulos 3 y 4), a
menudo se requiere que especifique diferentes fuentes para el mismoaudioo videoelemento.
Como viste anteriormente, tanto elaudioyvideoelementos proporcionan unorigenatributo
en el que colocar una URL a la fuente de audio o video. Pero ese atributo solo permite una
fuente. Entonces, ¿cómo puedes agregar múltiples fuentes?
Aquí es donde elfuenteelemento entra. Cualquier número defuenteLos elementos pueden
estar contenidos dentro de unaudioo videodeclaración del elemento, y es a través de este
elemento que puede especificar múltiples fuentes de medios.
Elfuenteelemento puede contener los atributos enumerados enTabla 2.3.
Entonces elfuenteEl elemento le permite especificar diferentes fuentes para una oferta
multimedia en particular, un ejemplo de lo que sigue:
<controles de audio>
<fuente src=”sayHello.ogg” type=”audio/ogg”>

<fuente src=”sayHello.mp3” type=”audio/mp3”>
Lo sentimos, su navegador no es compatible con el elemento de audio
</audio>
En este ejemplo, se presentan dos formatos de archivo de audio diferentes al navegador para
que los reproduzca. El navegador reproducirá el primer formato que reconozca e ignorará cualquier
formato que no reconozca. Si no puede encontrar un formato que pueda reproducir, le informará al
usuario que el navegador no puede reproducir el audio mostrando el texto "Lo sentimos, su
navegador no es compatible con el elemento de audio".
Este proceso de un navegador que ignora lo que no puede entender resulta muy útil cuando se
ofrece una solución multimedia para compatibilidad entre navegadores. Como se mencionó
anteriormente, los diferentes navegadores admiten diferentes formatos de archivos multimedia,
sobre los cuales leerá con más detalle en los próximos dos capítulos.

TABLA 2.3Atributos del elemento de origen
origen Proporciona la dirección del recurso multimedia, ya sea audio o video. Al

igual que con elorigenatributo de laaudioyvideoelementos, este debe
contener una URL válida a la fuente en cuestión.
escribe Especifica el tipo de recurso multimedia para ayudar al navegador a determinar

si realmente puede reproducir esta fuente o no. El valor debe ser un tipo MIME
válido, que le dice al navegador en qué formato está la fuente.
Los más comunes incluyen:
En algunos casos, es posible que también deba especificarse el códec con el que está
codificada la fuente para garantizar que se pueda reproducir. Aprenderá más sobre
el tipo MIME y los códecs en los Capítulos 3 y 4.
medios de comunicación Especifica el tipo de medio previsto del recurso en cuestión, ya que podría dirigirse a
un determinado tipo de dispositivo con una determinada altura, anchura, resolución o
relación de aspecto.
Este valor debe ser una consulta de medios válida. Puede leer más
sobre este atributo en la especificación de consultas de medios en
http://dev.w3.org/csswg/css3-mediaqueries.
Aprenderá más sobre consultas de medios y sus usos en el Capítulo 4.

EL ELEMENTO DE PISTA
ElpistaEl elemento se utiliza para especificar pistas de texto cronometradas

externas explícitas para elementos multimedia. Debe usarse junto con unaudioo
videoporque no representa nada por sí mismo.
Este elemento se utiliza principalmente para proporcionar una mayor accesibilidad a un
recurso multimedia, ya que permite proporcionar leyendas, descripciones, transcripciones y
subtítulos. Estos se pueden mostrar en el navegador junto con los medios que se están
reproduciendo.
En la mayoría de los casos, la información proporcionada a través delpistaelemento es más adecuado
para una fuente de medios de vídeo.
Al igual que los otros elementos descritos anteriormente, elpistaelemento puede tomar una serie
de atributos (Tabla 2.4).
Elpistapor lo tanto, el elemento se puede utilizar para especificar transcripciones

completas de recursos multimedia, lo que, por ejemplo, puede ser útil para poner la fuente a
disposición de personas con deficiencias auditivas. También le permite especificar múltiples
subtítulos y descripciones en diferentes idiomas. Aquí hay un ejemplo:
<video src=”sayHello.mp4”>
<track kind=”subtítulos” src=”hola-en.vtt” srclang=”en” pags
label=”Inglés”>
<tipo de pista=”subtítulos” src=”hola-de.vtt” srclang=”de” pags
label=”Alemán”>
</vídeo>
Este ejemplo especifica dos archivos diferentes para eldi hola.mp4video para
dos idiomas diferentes, inglés y alemán.
NOTA:El video HTML5 y los subtítulos se analizan en detalle en el
Capítulo 8, ¡así que no se preocupe!

CUADRO 2.4Seguimiento de atributos de elementos
amable Especifica qué tipo de datos esta instancia delpistaproporciona el elemento

multimedia especificado. Puede tener cualquiera de los siguientes valores:
subtitulos Una transcripción completa del diálogo, que es adecuada

para usar cuando el audio está disponible pero no se
entiende. El contenido se mostrará como una
superposición en el video.
subtítulos Una transcripción del diálogo, los efectos de sonido y otra

información de audio relevante, y es adecuado cuando el
audio/banda sonora no está disponible. Los contenidos se
superponen en el video y se etiquetan como útiles para
personas con problemas auditivos.
descripciones Proporciona descripciones textuales del componente de video del

recurso multimedia y está diseñado para cuando el componente
visual no está disponible.
capítulos Especifica los títulos de los capítulos y se utiliza para navegar por el
contenido del recurso multimedia.
metadatos Contiene información que se utilizará a través de un

script y no se muestra en el navegador de ninguna
manera.
Si se omite este atributo, el valor predeterminado essubtítulos
origen Proporciona la dirección de los datos de la pista de texto, que debe ser una URL válida.
El archivo proporcionado en esta fuente debe estar en un formato específico para que
se entienda, dos de los cuales son WebSRT y WebVTT. Ambos formatos se analizan en
el Capítulo 8.
srclang Indica el idioma de los datos de la pista de texto.
etiqueta Especifica un título legible por el usuario para la pista, lo que proporciona un
título más comprensible para que el usuario lo lea. Debe ser único en todopista
elementos del mismoamableatributo para el mismo recurso.
defecto Informa al navegador que elpistaelemento en cuestión se utilizará como

predeterminado si las preferencias del usuario no indican que uno
diferente sería más apropiado.

A CAPRICHODESAFARIYEXPLORADOR DE INTERNET 9
Anteriormente en el capítulo, cuando mencioné que la multimedia nativa es la rodilla de la

abeja y que no requiere complementos de terceros, lo cual es ideal, podría haber estado
distorsionando un poco la verdad. No quiere decir que la multimedia nativa no sea
excelente, lo es; es maravilloso.
Pero.
Para que la multimedia nativa funcione en Safari e Internet Explorer 9, Apple

ha decidido que debe tener instalado su complemento QuickTime, y
Microsoft requiere que instale su Media Player en su sistema.
Estos requisitos restan algo a la idea de multimedia nativa. No sé por qué

Apple y Microsoft han elegido tomar este camino, pero así son las cosas tal
como están.

ENVASE ARRIBA
Ha repasado brevemente la disponibilidad de multimedia en el navegador web. Como

era de esperar, la tecnología involucrada y los resultados que se pueden lograr han
avanzado mucho desde los días de "solo imágenes".
Ahora también conoce los tres nuevos elementos de marcado HTML5:audio
Video, yfuente-que necesitará para incrustar contenido de audio y video en su
documento web. ElpistaEl elemento se incluyó porque le brinda un método
poderoso para hacer que su contenido multimedia sea accesible al permitirle
especificar mejoras, como subtítulos y subtítulos.
Con esta base en los elementos y sus atributos en su haber, a continuación
aprenderá a utilizar estos elementos para llevar los medios a sus usuarios.
Sin más preámbulos, pasemos al siguiente capítulo y exploremos lo que puede
hacer con el audio HTML5.
TERMINANDO43
3
UTILIZANDO AUDIO
Agregar audio nativo a su documento
web usando multimedia HTML5
podría ser más fácil. Si querías sh
fragmentos de sonido, grabaciones de voz o su propia música con usuarios en
Internet, la capacidad de hacerlo siempre estuvo disponible. Pero ahora puede
compartir audio sin tener que depender de la instalación de complementos de
terceros.
El Capítulo 2 le presentó los elementos y atributos de HTML5 que le
permiten agregar audio a su documento web. Ahora es el momento de
explorar cómo se hace esto realmente. Este capítulo explica, con la
ayuda de ejemplos, cómo puede utilizar estos elementos y atributos.
Pero primero echemos un breve vistazo a los formatos de archivo de audio
que están disponibles para usar y cómo puede convertir el audio existente de
un formato a otro para usarlo en su documento web.
45
CÓDECS DE AUDIOY
FORMATOS DE ARCHIVO
La plétora de diferentes complementos y formatos que están disponibles para codificar archivos
multimedia para su presentación en la web podría causar un poco de dolor de cabeza si el
complemento o códec de audio en particular no está disponible en el sistema de un usuario.
AFÉRRATE;QUE ES UN¿CÓDEC DE AUDIO?
Un códec es un programa informático que utiliza un algoritmo de compresión para codificar

y/o decodificar (de ahí el nombre:coder-dicoder) un flujo digital de datos, haciéndolo más
adecuado para su reproducción en una computadora u otro dispositivo.
El objetivo del códec suele ser mantener la alta calidad de la señal de audio
utilizando el menor número de bits posible para reducir el tamaño del archivo en
cuestión y, por tanto, el ancho de banda necesario para la transferencia.
Se pueden usar diferentes códecs de audio para generar diferentes formatos de archivos de audio,
algunos de los cuales son compatibles con HTML5.
OGG VORBIS
Ogg Vorbis es un formato de archivo gratuito, sin patente y de código abierto creado por Xiph.
Fundación Org (www.xiph.org). Debido a que es gratuito, tiende a ser bastante atractivo como
formato de uso.
Ogg es el nombre del formato contenedor y Vorbis es la compresión de audio específica que
utiliza. Según el sitio web de Vorbis (www.vorbis.com), los archivos de Vorbis pueden comprimirse a
un tamaño de archivo pequeño y aun así mantener una buena calidad de sonido. Esto, por supuesto,
es ideal para la entrega a través de la web porque reduce los costos de ancho de banda.
El formato Ogg Vorbis ha demostrado ser bastante popular entre la comunidad de juegos
con compañías como Epic Games, Crystal Dynamics y EA Games que lo utilizan para ofrecer
música de juegos.
Ogg Vorbis utiliza el aplicación/ogg tipo MIME yaudio/ogg códec
46 CAPÍTULO 3 USO DE SONIDO

QUÉ A ¿TIPO DE MIMICA?
MIME (Extensiones de correo de Internet multipropósito) es un estándar de Internet que se diseñó
inicialmente para describir el contenido del correo electrónico. Ahora se ha extendido mucho más
allá de eso. Los tipos MIME se utilizan para identificar el tipo de información que contiene un
archivo en particular.
Una definición de tipo MIME generalmente toma esta forma:
tipo/subtipo
dondeescribe puede seraudio, aplicación, vídeo,o imagenysubtipopuede ser

jpg, mp3,o Código Postal,dependiendo del valor deescribe.
Para obtener una lista de tipos MIME comunes y sus extensiones de archivo correspondientes,
consulte http://hul.harvard.edu/ois/systems/wax/wax-public-help/mimetypes.htm.
MP3
MP3 tiene un nombre bastante engañoso porque también se conoce como MPEG-1 o MPEG-2
Audio Layer III. Desarrollado por Moving Picture Expert Group (www.mpeg.org), MP3 se
diferencia de Ogg Vorbis en que está protegido por una patente propiedad de Fraunhofer
(www.fraunhofer.de/en), que recibe un porcentaje de cada venta.
El estándar MP3 en realidad no incluye una especificación exacta sobre cómo codificar
MP3, pero sí especifica cómo decodificar el formato. Esto, por supuesto, ha resultado en
muchos codificadores de MP3 diferentes, cada uno de los cuales produce archivos de audio
de diferente calidad de sonido.
A pesar de la patente, MP3 ha demostrado ser uno de los formatos de audio más populares para
codificar archivos de sonido.

MP3 utiliza elaudio/mpegtipo MIME yaudio/mp3códec
CÓDECS DE AUDIO Y FORMATOS DE ARCHIVO47

WAV
El nombre propio del formato de archivo WAV es Formato de archivo de audio de forma de onda, pero se
llama WAV debido a su extensión de archivo. WAV es un formato de audio que fue creado por primera vez por
Microsoft e IBM en 1991.
Aunque puede contener datos comprimidos, por lo general no los contiene, lo que, por
supuesto, puede generar archivos de tamaño bastante grande. Es por esta razón que ha disminuido
su uso como formato para entregar audio a través de Internet.

WAV utiliza elaudio/wavtipo MIME yaudio/wavcódec
CAA
La codificación de audio avanzada (AAC) es un formato de audio utilizado por Apple y se ha
hecho popular como el formato predeterminado para la tienda iTunes de Apple. Fue diseñado
para ser el sucesor del formato MP3 y por eso suele tener una mejor calidad de sonido que el
MP3.
CAA utiliza elaudio/actipo MIME yaudio/accódec
MP4
Aunque se usa principalmente como formato de archivo de video (más sobre eso en el Capítulo 4), MP4
también se puede usar para codificar audio solamente. Al igual que AAC, se ha popularizado gracias a Apple,
que también lo utiliza para codificar algunos archivos de audio con la extensión .m4a extensión.
MP4 utiliza el sonido/mp4 tipo MIME ysonido/mp4 códec
Ahora que conoce los diferentes formatos de audio, veamos cómo se

admiten en los navegadores.

SOPORTE DEL NAVEGADOR POR
FORMATOS DE AUDIO
Cuando aparecieron los primeros borradores de la especificación HTML5, incluían una

recomendación, no, un requisito, que todos los navegadores web deben tener soporte
integrado para el formato de audio Ogg Vorbis. Esto fue beneficioso porque se podía
garantizar que cada navegador compatible con HTML5audioEl elemento al menos admitiría
Ogg Vorbis, y podría presentar su archivo de audio en ese formato.
Sin embargo, esta utopía de un formato de audio compatible universalmente cambió cuando
tanto Apple como Nokia se opusieron a este requisito. Apple simplemente no quería ningún requisito
obligatorio para una tecnología que, en ese momento, no era ampliamente compatible (además,
Apple tenía un interés personal en el formato de archivo MP4), mientras que Nokia afirmó que el
formato Ogg Vorbis no era tan abierto. y libre como decía.
Como resultado, el requisito se eliminó de la especificación. En consecuencia, diferentes

proveedores decidieron admitir diferentes códecs de audio.Tabla 3.1 contiene una lista de los
proveedores que admiten determinados formatos de audio en sus navegadores.
TABLA 3.1 Formatos de audio y compatibilidad con navegadores
FORMATO NAVEGADOR
Ogg Vorbis Firefox 3.5+ cromo 5+ Ópera 10.5+
MP3 Safari 5+ cromo 6+ IE9+ iOS
WAV Firefox 3.6+ cromo 8+ Safari 5+ Ópera 10.5+
CAA Safari 3+ cromo 5+ IE9+ iOS 3+ androide 2+
MP4 Safari 3+ cromo 5+ IE9+ iOS 3+ androide 2+
NOTA:Chrome dejará de ser compatible con MP4/H.264.

Consulte http://blog.chromium.org/2011/01/more-aboutchrome-
html-video-codec.html para obtener más información.
El soporte del navegador de formatos de audio es un poco confuso, pero puede

combatirlo fácilmente presentando el archivo de audio en los diferentes formatos requeridos
usando el audioyfuenteelementos sobre los que leyó en el Capítulo 2.
Con diferentes navegadores que admiten diferentes formatos, debe preguntarse
cómo convertir de un formato a otro. Bueno, echemos un vistazo rápido.
SOPORTE DE NAVEGADOR PARA FORMATOS DE AUDIO49

CODIFICAR SU ARCHIVO DE AUDIO
Una vez que tenga su archivo de audio, ya sea que lo haya grabado usted mismo o lo haya obtenido de otro
lugar, generalmente estará en un solo formato. Lo más probable es que esté en uno de los formatos
mencionados anteriormente, pero puede que no sea así.
Por supuesto, podría decidir admitir solo un tipo de audio. Puede saber, por
ejemplo, que todos sus usuarios usarán Firefox y, por lo tanto, solo tiene que
admitir Ogg Vorbis.
Por el bien del argumento, digamos que desea admitir todos los navegadores principales,
por lo que necesita convertir su archivo de audio a los otros formatos. ¿Cómo haces esto?
Bueno, muchos codificadores harán el trabajo por ti, y la mayoría de ellos son gratuitos.
Estos son dos de mis codificadores favoritos para convertir varios formatos de audio de uno a
otro:
- Convertidor de vídeo Miró (www.mirovideoconverter.com) le permite abrir muchos

formatos de archivos de audio diferentes y convertirlos a MP3, WAV, Ogg y otros a
través de una sencilla interfaz de arrastrar y soltar. Se ejecuta tanto en Windows
como en Mac.
- Convertidor multimedia (www.mediaconverter.org) es una aplicación de conversión

en línea que le permite cargar un archivo de audio o usar uno que ya está en línea.
También le permite convertir su archivo de audio a MP3, WAV y Ogg.
Por supuesto, hay muchos otros codificadores disponibles, pero prefiero estos dos porque uno
es una aplicación de escritorio y el otro está en línea. Esto se adapta a todas las ocasiones porque la
aplicación de escritorio es útil cuando no estoy conectado y, por supuesto, el convertidor web es útil
cuando quiero una conversión rápida de archivos y estoy en línea.
Sin embargo, debe enfrentar un problema particular si desea admitir navegadores que no
tienen capacidades de reproducción multimedia HTML5.
PROPINA:Es una buena idea tener varios de sus convertidores favoritos en

su computadora de escritorio/portátil o en línea para que siempre pueda
convertir entre los diferentes formatos cuando lo necesite. Aunque aquí solo se han
mencionado dos, puede encontrar diferentes codificadores que prefiera.

RECUPERACIÓN DEL NAVEGADOR LEGADO
Los ojos de águila entre ustedes habrán notado que en ningún momento he abierto Internet
Explorer 6 a 8. Como se mencionó en el Capítulo 2, estos navegadores no son compatibles con
HTML5 y necesitan ayuda de JavaScript para que puedan representar los elementos. . Y
empeora un poco con respecto a la multimedia, porque, naturalmente, no hay soporte nativo
para ninguno de los formatos de archivo de audio antes mencionados.
Entonces, ¿cuál es la solución? Utiliza un método que las versiones de Internet Explorer hacer
entender, lo que significa Flash, QuickTime o algún otro complemento de terceros. O simplemente
proporciona un enlace al archivo de audio en cuestión para que cualquier usuario desafortunado
pueda descargar el archivo y reproducirlo al estilo antiguo a través de un reproductor de audio en sus
computadoras. Esto se logra mediante el uso de laaudioyfuenteelementos.
Un ejemplo completo de cómo usar elaudioyfuenteelementos para hacer esto, junto con
cómo proporcionar respaldo de Flash se proporciona en la siguiente sección, así como otros
ejemplos sobre cómo usar elaudioelemento.
SOPORTE DE NAVEGADOR PARA FORMATOS DE AUDIO51

EJEMPLOSDEUTILIZANDO
ELELEMENTO DE SONIDO
Ya ha leído lo suficiente sobre el audio HTML5 y está ansioso por ver algunos ejemplos
adecuados de cómo usarlo en un documento web. Bueno, aquí vas a hacer precisamente eso.
Todos los elementos y atributos que se utilizan en el código de esta sección se
presentaron en el Capítulo 2.
REPRODUCCIÓN DE UN ARCHIVO DE AUDIO
Si simplemente desea reproducir un archivo de audio, solo necesita usar una instancia del
audioelemento. Por ejemplo, para permitir que el usuario reproduzca un archivo de audio Ogg Vorbis,
simplemente use esto:
<audio src=”sayHello.ogg” controles></audio>
Elcontrol SEl atributo le dice al navegador que muestre sus controles predeterminados a los usuarios
para permitirles controlar la reproducción del archivo.
Sin embargo, si fuera malvado y quisiera reproducir el archivo antes de que sus usuarios
tuvieran la oportunidad de hacer algo al respecto, agregaría elauto-reproducciónatributo:
<audio src=”sayHello.ogg” controla la reproducción automática></audio>
Si fueras aún más malvado, podrías reproducir el archivo de audio a los usuarios
automáticamente y en bucle, así:
<audio src=”sayHello.ogg” controla el bucle de reproducción automática></audio>
Y si tuviera alguna venganza contra sus usuarios y quisiera atormentarlos,

podría eliminar elcontrol Satributo, lo que los hace incapaces de detener la
reproducción:
<audio src=”sayHello.ogg” bucle de reproducción automática></audio>
NOTA:Puede encontrar todos los ejemplos (y más) en esta sección

en el sitio web adjunto en www.html5multimedia.com.

Tenga en cuenta que no estoy recomendando que use auto-reproduccióno círculo, o quitar
el control Satributo. Por lo general, no es algo agradable de hacer y realmente puede molestar
a sus usuarios. Sólo asegúrese de que puede justificar su decisión si decide
usar auto-reproduccióno círculo.
También puede silenciar el archivo cuando se carga por primera vez usando el apagado atributo. Esto
especifica el estado predeterminado del audio, lo que es posible que desee hacer para anular potencialmente
cualquier preferencia del usuario:
<audio src=”sayHello.ogg” controla la reproducción automática silenciada></audio>
Además, puede solicitar que el navegador no precargue el archivo de audio al iniciarse.

Todos los ejemplos anteriores tienen por defectoprecarga = "auto"cuando no se especifica:
<audio src=”sayHello.ogg” controles preload=”none”></audio>
Y, por supuesto, puede solicitar que el navegador cargue solo los metadatos. Esto puede
ser adecuado cuando el archivo de audio es bastante largo o si sabe que el usuario puede
optar por no escuchar el archivo de audio:
<audio src=”sayHello.ogg” controla preload=”metadata”></audio>
Cualquier uso de laprecargaEl atributo es simplemente una sugerencia para el navegador y en realidad
puede ser anulado por el propio navegador, tal vez en función de la configuración del usuario.
Todos los ejemplos anteriores utilizan una sola fuente de audio. Entonces, ¿qué sucede si
necesita servir múltiples fuentes para diferentes navegadores?
EJEMPLOS DE USO DEL ELEMENTO DE AUDIO53

REPRODUCCIÓN DE UN ARCHIVO DE AUDIO CON DIFERENTES FUENTES
Supongamos que desea proporcionar audio en formato Ogg Vorbis y MP3 para
admitir Firefox, Chrome, Opera, Safari e IE9. Puedes hacer esto usando elfuente
elemento junto con elaudioelemento. El código se vería así:

</audio>
¡No podría ser más fácil!

Naturalmente, también puede agregar un formato de archivo WAV (si lo desea):

<fuente src=”sayHello.wav” type=”audio/wav”>
</audio>
También puede incorporar cualquiera de los atributos mencionados anteriormente aquí. Entonces, hacer
que cualquier fuente que elija el navegador se reproduzca automáticamente simplemente requeriría este
código:
<reproducción automática de controles de audio>

<fuente src=”sayHello.wav” type=”audio/wav”>
</audio>
Para admitir navegadores que no son compatibles con HTML5audioelemento, seguiría la

misma táctica, pero la alternativa es diferente.
54CAPÍTULO 3 USO DE SONIDO

REPRODUCCIÓN DE UN ARCHIVO DE AUDIO CON
DIFERENTES FUENTES Y RETROCESO LEGADO
Debido a que los navegadores heredados como Internet Explorer 6 a 8 no son

compatibles con HTML5, si desea admitir estos navegadores (y debería), debe
volver a otro formato que entiendan, algo como Flash, por ejemplo.
Entonces, ¿necesita contaminar su agradable y limpio marcado HTML5 con un feo código de
complemento Flash? Sí, me temo que sí, a menos que esté satisfecho con simplemente proporcionar un
enlace al archivo de audio para que el usuario lo descargue.
De la misma manera que los navegadores compatibles con HTML5 se abren camino a través de las
fuentes que les presenta su documento para encontrar un formato de audio que puedan reproducir, los
navegadores heredados ignorarán todos estos formatos de audio hasta que encuentren un archivo que
puedan reproducir, ya sea un archivo Flash, o lo que sea.
Hay varias maneras de proporcionar la reproducción de archivos Flash: a través de un

reproductor Flash alojado en su servidor; mediante el uso de un reproductor Flash remoto,
como Flash Player de Google; o usando elempotraro objeto(ver Capítulo 2).
El código para usar un reproductor descargado (este reproductor en particular es el
Google Flash Player ya mencionado, que simplemente descargué) y elobjeto
elemento podría verse así:

<tipo de objeto=”aplicación/x-shockwave-flash”
data=”player.swf?audioUrl=sayHello.mp3&autoPlay=true”
alto = "27" ancho = "320">
<param nombre=”película”
value=”player.swf?audioUrl=sayHello.mp3&autoPlay=true”>
</objeto>
</audio>
PROPINA:Puede descargar el excelente JW Player, un reproductor Flash de Longtail

Video, en www.longtailvideo.com/players/jw-flv-player. Aunque JW Player es una
solución completa de reproductor de video HTML5 y Flash, contiene un reproductor
Flash dentro del archivo ZIP descargado (player.swf) que puede usar.

El mismo código usando elempotrarelemento se ve así:

<embed type=”aplicación/x-shockwave-flash”
wmode=”transparente”
src=”player.swf?audioUrl=sayHello.mp3&autoPlay=true”
altura=”27”
ancho=”320”>
</audio>
Y usando Flash Player de Google y elempotrarelemento se ve así:

<embed type=”aplicación/x-shockwave-flash”
wmode=”transparente”
src=”http://www.google.com/reader/ui/3523697345-audio-
pagsplayer.swf?audioUrl=sayHello.mp3&autoPlay=true”
altura=”27”
ancho=”320”>
</audio>
56CAPÍTULO 3 USO DE SONIDO

FIGURA 3.1El reproductor
de audio en Firefox 5.
FIGURA 3.2Un reproductor Flash de muestra

como se ve en Internet Explorer 8.
Todos los ejemplos anteriores funcionarán en navegadores compatibles con audio HTML5, como
se muestra en Firefox enFigura 3.1.

Y todos los ejemplos funcionarán en Internet Explorer 8 usando un reproductor Flash, como se
muestra enFigura 3.2.
Puede aprovechar el hecho de que Flash puede reproducir archivos MP3, por lo que no
tiene que ofrecer otro formato de archivo de audio. Por supuesto, los usuarios deben tener
Flash Player instalado en su sistema. Pero, ¿y si no lo hacen?
Bueno, puede ir un paso más allá con las alternativas presentadas y ofrecer un enlace simple al
archivo para que el usuario lo descargue:

data=”player.swf?audioUrl=sayHello.mp3&autoPlay=true”
alto = "27" ancho = "320">
value=”player.swf?audioUrl=sayHello.mp3&autoPlay=true”>
</objeto>
<a href=”sayHello.mp3”>Descargar el archivo de audio</a>
</audio>

Traducido del inglés al español - www.onlinedoctranslator.com
FIGURA 3.3Internet
Explorer 8 que muestra el
reproductor Flash y el enlace
de descarga del archivo de
audio.
FIGURA 3.4Firefox
muestra un cuadro feo si no
puede reproducir ninguno de los
archivos de audio HTML5
proporcionados.
Si el navegador no admite audio HTML5 pero tiene instalado el complemento Flash,

mostrará tanto el reproductor Flash como el enlace, como se muestra enFigura 3.3. Por
supuesto, esto no es necesariamente algo malo y, de hecho, es posible que desee
proporcionar siempre un enlace de descarga para el usuario.
Si decide no admitir Flash, puede omitir Flashempotrarelemento y proporcione el
hipervínculo para descargar el archivo solamente:

<a href=”sayHello.mp3”>Descargar el archivo de audio</a>
</audio>
También debe proporcionar formatos de archivo para navegadores quehacerAdmite
reproducción de audio HTML5. Si el navegador es compatible con HTML5 pero no puede reproducir
ninguna de las fuentes provistas, no volverá a reproducir ningún contenido Flash que usted también
haya proporcionado ni mostrará el enlace de descarga si hay uno presente. En su lugar, se puede
mostrar un reproductor roto o, como en el caso de Firefox, una caja negra bastante fea (Figura 3.4).
Independientemente de lo que decida hacer, hay suficientes mecanismos alternativos disponibles para ayudarlo a
admitir la mayoría de los navegadores.
58CAPÍTULO 3USO DE SONIDO

ENVASEARRIBA
En este momento, los principales navegadores web admiten diferentes formatos de archivos de
audio, lo que requiere que su contenido de audio se proporcione en varios formatos para que estos
navegadores puedan reproducirlos. Afortunadamente, proporcionar estos diferentes formatos de
archivo es fácil de hacer a través de HTML5audioy fuente elementos.

Además, los navegadores heredados, como Internet Explorer 8 y versiones anteriores, también
pueden admitirse a través de complementos de terceros (como Flash) como lo eran antes.
Gradualmente, los navegadores heredados dejarán de usarse y el requisito de admitirlos dejará de
existir. Pero aún puede garantizar que sus usuarios accedan a su audio.
Los ejemplos de este capítulo cubren una amplia gama de escenarios de la vida real que
puede encontrar al agregar audio a sus documentos web. Sin embargo, no son en modo
alguno exhaustivos. Y aunque todo el código utilizado en los ejemplos está disponible en el
sitio web, se agregarán ejemplos adicionales en el futuro, por lo que definitivamente vale la
pena revisarlos.
El audio nativo es un gran paso adelante en la tecnología web y al menos es igualado, y
tal vez incluso superado, por el video, que es el tema central del próximo capítulo.
TERMINANDO59
4
UTILIZANDOVIDEO
La popularidad de los sitios para compartir videos, como
YouTube y Vimeo, combinada con velocidades de ancho
de banda que hacen que la visualización en línea
factibles, han dado lugar a una gran demanda de incrustación de vídeo en
documentos web. Sin embargo, hasta hace poco, la única forma era usar
complementos de terceros como Flash y QuickTime. HTML5 proporciona ese
método estándar que falta para incrustar videos en documentos web. Los
principales navegadores han comenzado a admitirlo en sus últimas versiones, por
lo que puede estar seguro de que los navegadores modernos pueden manejar su
contenido de video.
Este capítulo cubre los formatos de archivo y los códecs compatibles con
el video HTML5, cómo convertir entre formatos y soluciones a los
problemas que pueda encontrar. También aprenderá cómo enviar video
a navegadores que no admiten video HTML5.
61
CÓDECS DE VÍDEO Y
FORMATOS DE ARCHIVO
Al igual que con el audio, el video HTML5 tiene varios formatos diferentes que puede usar para
codificar contenido de video debido a que los proveedores de navegadores no pueden ponerse de
acuerdo sobre un estándar. Los formatos de archivo de video disponibles incluyen Theora Ogg, MP4
(H.264) y WebM. Veamos cada uno en detalle.
CÓDECSYCONTENEDORES
Como se mencionó en el Capítulo 3, uncódeces un programa de computadora que usa un algoritmo
de compresión para codificar y/o decodificar un flujo digital de datos, haciéndolo más adecuado
para la reproducción.
Aenvasees un formato de contenedor cuya especificación describe cómo existen los

diferentes elementos de datos dentro del contenedor e interactúan juntos dentro de un
archivo de computadora.
TEORA OGG
Theora Ogg, como probablemente habrá adivinado, también es de la Fundación Xiph.Org

(www.xiph.org). Al igual que su contraparte de audio, Theora Ogg es gratuito y abierto, y no tiene
problemas de licencias o regalías.
Al igual que con el audio, Ogg es el nombre del formato contenedor y, en este caso, Theora se
refiere al formato de compresión de video que utiliza. Las versiones anteriores del códec Theora
demostraron que era inferior a otros códecs similares en ese momento, pero ha mejorado mucho y
ahora se considera comparable a la salida H.264 de YouTube (antes de que YouTube comenzara a
codificar videos de alta definición).
Theora Ogg usa elaplicación/oggtipo MIME y elvídeo/oggtipo de

atributo de vídeo.
62CAPÍTULO 4 USO DE VÍDEO

MP4 (H.264)
MPEG-4 Parte 10, o MP4, es un formato de video comprimido que, al igual que el formato de audio MP3
(consulte el Capítulo 3), fue definido por el Grupo de expertos en imágenes en movimiento (MPEG;
www.mpeg.org). Fue desarrollado para ofrecer video y audio con calidad de DVD en un paquete pequeño. Este
tamaño de archivo pequeño hace que los archivos MP4 sean muy adecuados para reproductores portátiles y,
por supuesto, para la web.
H.264 se ha dividido en 17 "perfiles" diferentes; cada uno de los cuales proporciona

Funciones opcionales que normalmente aumentan el tamaño del archivo. Algunos son adecuados
para usar con video HTML5, mientras que otros no. Los perfiles Baseline y Main se usan generalmente
para video HTML5. Para obtener una lista completa de estos perfiles, consulte en.wikipedia.org/wiki/
H.264#Profiles.
MP4 utiliza elvídeo/mpegtipo MIME y elvídeo/mp4tipo de atributo de vídeo.
WEBM
WebM es un proyecto (www.webmproject.org) respaldado por gigantes de la industria web,
como Mozilla, Opera, Adobe y Google. El objetivo del proyecto es producir un formato de video
abierto de alta calidad y libre de regalías.
El contenido de video está comprimido con el códec VP8, que fue desarrollado por
On2 Technologies (la compañía fue adquirida por Google en febrero de 2010). El códec
tiende a usarse dentro del contenedor WebM.
WebM utiliza elvideo/webmtipo MIME y elvideo/webm tipo de atributo de vídeo.
CÓDECS DE VÍDEO Y FORMATOS DE ARCHIVO 63

SOPORTE DEL NAVEGADOR POR
FORMATOS DE VÍDEO
Cuando se publicó el primer borrador de la especificación HTML5, se recomendó que los

navegadores admitieran el formato de video Theora Ogg. Saber que todos los navegadores
compatibles con video HTML5 admitirían un formato de video estándar le habría permitido
garantizar la disponibilidad de su contenido de video para los usuarios cuando presentó un
archivo de video Theora Ogg. Sin embargo, tenga en cuenta el uso de la frase "hubiera".
Desafortunadamente, al igual que la especificación de audio, tanto Nokia como Apple se
opusieron al requisito de admitir Theora Ogg, que consideraban que no era ampliamente
compatible y no era tan abierto y gratuito como afirmaba la Fundación Xiph.Org. Por lo tanto,
se eliminó el requisito. Como resultado, volverá a tener que proporcionar su contenido de
video en más de un formato para garantizar la cobertura de todos los navegadores que
admiten video HTML5.
Tabla 4.1 contiene una lista de los proveedores que admiten ciertos formatos de video en sus
navegadores.
CUADRO 4.1 Formatos de video y compatibilidad con navegadores
FORMATO NAVEGADOR
Teora Ogg Firefox 3.5+ cromo 5+ Ópera 10.5+
MP4/H.264 Safari 3+ cromo 5–? IE9+ iOS androide 2+
WebM Firefox 4+ cromo 6+ Ópera 11+ IE9+ androide 2.3+
NOTA: Chrome actualmente es compatible con MP4/H.264, pero dejará de admitirlo pronto.
Internet Explorer 9 admitirá WebM siempre que esté instalado un complemento de terceros que
pueda reproducirlo.
De hecho, debe ofrecer al menos dos formatos diferentes, MP4 y WebM, para admitir las
últimas versiones de los principales navegadores. Esto no es una gran tarea si solo está
publicando algunos videos, porque se puede hacer fácilmente usando elvideo y fuente
elementos mencionados en el Capítulo 2. Para los sitios con gran cantidad de videos,
desafortunadamente puede ser una carga porque muchos archivos deben existir en al menos
dos formatos diferentes, duplicando así el espacio de almacenamiento requerido.
64 CAPÍTULO 4 USO DE VÍDEO

MÓVIL DISPOSITIVOS
Otra buena razón para usar video HTML5 es la decisión de Apple de no admitir Flash
en el iPhone y el iPad. iOS, el sistema operativo que se ejecuta en estos teléfonos,
tiene soporte para video MP4.
Los teléfonos Android también son compatibles con MP4 (y WebM desde la versión 2.3),
Windows Phone 7 tiene soporte nativo tanto para MP4 como para WebM, y Blackberry es
compatible con MP4 desde la versión 7 de su navegador.
Debido a que tendrá su archivo de video en un formato, la forma más fácil de

proporcionar los dos formatos es convirtiendo de un formato a otro.
Echemos un vistazo rápido a cómo convertiría su contenido de video entre los diferentes
formatos antes de sumergirnos en los ejemplos de código.
CODIFICACIÓN DE SUS ARCHIVOS DE VÍDEO
Es posible que ya tenga el contenido de video que desea mostrar en su

documento web o que aún necesite grabarlo. Supongamos que ya tiene el
contenido y que está en uno de los formatos mencionados, aunque podría no ser
así. De cualquier manera, no es un problema porque hay muchos codificadores en
el mercado que puede usar para convertir su contenido de video de un formato a
otro.
PROPINA:Es aconsejable admitir al menos MP4 y WebM para cubrir las últimas versiones
de los principales navegadores. Safari admite MP4; Firefox y Opera son compatibles con
WebM; y Chrome e Internet Explorer 9 actualmente son compatibles con MP4 y WebM,
aunque Chrome dejará de ser compatible con MP4 en un futuro cercano e IE9 necesita un
complemento para WebM. Sin embargo, también puede optar por admitir Theora Ogg,
porque WebM no fue compatible con Firefox hasta la versión 4, y Firefox no admite MP4
en absoluto.
SOPORTE DE NAVEGADOR PARA FORMATOS DE VÍDEO sesenta y cinco

Aquí hay tres de mis codificadores favoritos:
- Convertidor de vídeo Miró (http://www.mirovideoconverter.com). Además de convertir

entre formatos de audio, este convertidor también admite la conversión de archivos de
video a Theora Ogg, MP4 y WebM. Realmente es todo lo que necesita y se ejecuta tanto en
Windows como en Mac.
- freno de mano (http://frenodemano.fr). Este convertidor de código abierto le permite

convertir archivos de video a MP4 y al formato Theora Ogg. Se ejecuta en Windows,
Mac y Linux.
- Convertidor multimedia(http://www.mediaconverter.org). Esta aplicación de

conversión en línea le permite cargar un archivo para convertirlo o proporcionar la
URL de un archivo existente. Te permite convertir archivos a Theora Ogg, MP4 y Flash
FLV, entre otros.
Aunque puede elegir entre muchos otros codificadores, estos son tres codificadores
sólidos que puede usar para comenzar.
CODIFICACIÓN MP4YREPRODUCCIÓN RETARDADA
A veces, la forma en que se codifica un archivo MP4 puede causar problemas con su
reproducción. Es decir, el archivo no comienza a reproducirse hasta que se haya descargado por
completo. Esto se debe a que el proceso de codificación coloca el índice del archivo (con todos los
metadatos sobre la longitud del archivo, etc.) al final del archivo en lugar de al principio.
Si encuentra que esto le sucede a sus archivos MP4, puede solucionar el problema
ejecutando los archivos a través de QTIndexSwapper (http://renaun.com/blog/
code/qtindexswapper) de Renaun Erickson de Adobe. QTIndexSwapper
simplemente mueve el índice al principio del archivo.
Ahora que ha convertido sus archivos, ¡está listo para comenzar a usarlos en
sus documentos!

UTILIZANDOELELEMENTOS DE VÍDEO
Comencemos con algunos ejemplos básicos de incrustación de archivos de video dentro de un

documento web. Ya habrá encontrado todos los elementos y atributos utilizados en los
ejemplos del Capítulo 2, por lo que nada debería ser nuevo para usted.
REPRODUCCIÓN DE UN ARCHIVO DE VÍDEO
El ejemplo más fácil de todos es reproducir un archivo de video simple de un formato con controles de
medios predeterminados para el usuario.
Para reproducir un archivo WebM, utiliza:
<video src=”snowy-tree.webm” controles></video>
ElcontrolEl atributo informa al navegador que debe mostrar un conjunto de controles de video básicos
en la parte superior del reproductor de video.
Si desea que el video comience a reproducirse tan pronto como se cargue la página, simplemente puede
agregar elauto-reproducciónatributo:
<video src=”snowy-tree.webm” controla la reproducción automática></video>
También es posible que desee que el video comience a reproducirse de inmediato y luego continúe
reproduciéndose en un bucle a través delcírculoatributo:
<video src=”snowy-tree.webm” controla el bucle de reproducción automática></video>
Sin embargo, se recomienda encarecidamente no hacer esto: no solo es molesto, sino que puede ser
una pesadilla de accesibilidad porque un archivo de video en bucle puede reproducirse sobre el audio
agregado que se inserta por razones de accesibilidad.
También puede silenciar el archivo de video al inicio usando elapagadoatributo. Por

supuesto, si tu video no tiene sonido, esto no tiene efecto:
<video src=”snowy-tree.webm” controla la reproducción automática silenciada></video>
NOTAS:Ninguno de los principales navegadores actualmente admite la

apagado atributo. Sin embargo, puede configurarlo a través de Media
JavaScript API, que se analiza en el Capítulo 5.
Todos los ejemplos de esta sección y más se pueden encontrar

en el sitio web adjunto en www.html5multimedia.com.
USO DE LOS ELEMENTOS DE VÍDEO67

De manera predeterminada, el navegador comenzará a cargar el archivo de video
completo cuando se cargue la página. Si prefiere que el navegador no haga esto (quizás
piensa que es poco probable que los usuarios quieran ver el video y no quieren desperdiciar
ancho de banda porque podrían estar viendo su sitio a través de una red móvil), puede usar el
precargaatributo y establecerlo enninguna:
FIGURA 4.1Restaurar los controles

multimedia predeterminados del
<video src=”snowy-tree.webm” controles preload=”none”></video>
navegador a través del menú del
navegador en Firefox 5. También puede solicitar que el navegador cargue los metadatos del video (por ejemplo, la longitud del
archivo) configurando elprecargaatribuir ametadatos:
<video src=”snowy-tree.webm” controles preload=”metadata”></video>
Cualquier ajuste de laprecargaEl atributo simplemente sugiere al navegador cuáles son sus
intenciones, pero en última instancia, el navegador decidirá qué hacer. El navegador puede, por
ejemplo, ignorar su sugerencia debido a una configuración del usuario en el navegador.

Si desea codificar el ancho y la altura del video en lugar de dejar que el navegador
decida automáticamente por usted, puede hacerlo a través de laanchoy altura
atributos:
<video src=”snowy-tree.webm” controles ancho=”300” altura=”210”>

pags</vídeo>
También puede eliminar los controles por completo omitiendo elcontrol Satributo:
<video src=”árbol-nevado.webm”></video>
Tenga en cuenta que el usuario puede restaurar los controles predeterminados en la mayoría de los
navegadores haciendo clic derecho en el video y seleccionando los controles del menú desplegable que se
muestra.Figura 4.1.
PROPINA:Si también especificasauto-reproducción, elprecarga¡La configuración

se anulará porque el video debe descargarse para que se reproduzca!
Todos los ejemplos anteriores usan solo un formato de archivo de video. Pero debido a que necesitará
servir más de un formato de archivo de video para cubrir todos los principales navegadores, echemos un
vistazo a cómo hacerlo a continuación.

REPRODUCCIÓN DE UN ARCHIVO DE VÍDEO CON DIFERENTES FUENTES
Presentar diferentes formatos de archivos de video al navegador es bastante fácil usando elfuente
elemento, que también usó en los ejemplos de audio en el Capítulo 3.

Aquí está el código que necesita para proporcionar dos fuentes diferentes para que se reproduzca el video:
<controles de vídeo>
<fuente src=”árbol-nevado.mp4” type=”video/mp4”>
<fuente src=”árbol-nevado.webm” type=”video/webm”>
</vídeo>
Pero también apoyemos a Theora Ogg, en caso de que un usuario de Firefox 3.5 u Opera
10.5 quiera ver su video:
<fuente src=”árbol-nevado.ogv” type=”video/ogg”>

</vídeo>
NOTA: Probablemente no necesite agregar soporte para Theora

Ogg, y solo debería molestarse si sabe que necesita soporte para
versiones anteriores específicas de Firefox.
Los ejemplos de la sección anterior, "Reproducción de un archivo de video", donde se

aplicaron diferentes atributos para mostrarle cómo funcionan y qué hacen, también se aplican
a cualquier video elemento que contiene varios fuente elementos.

ELescribeATRIBUTO
Cuando usas el fuente elemento dentro del video elemento, notará que el escribeatributo se mueve desde el video
elemento a la fuente elemento. La razón es que la idea de servir diferentes fuentes se debe a que usan diferentes
formatos, y cada elemento fuente debe especificar el formato en el que se encuentra la fuente a través de su propia
escribeatributo.
ElescribeEl atributo también puede contener el códec real en el que está codificado el archivo de video. Por ejemplo:
<source src=”árbol-nevado.mp4” type='video/ogg; códecs=”theora, vorbis”'>

<source src=”árbol-nevado.mp4” type='video/webm; códecs=”vp8, vorbis”'>
<source src=”árbol-nevado.mp4” type='video/mp4; códecs=”mp4a.40.2”'>
Incluir el códec en elescribeEl atributo puede ser beneficioso porque ayuda al navegador a decidir si puede reproducir el
archivo o no. Lo mejor es incluir el códec solo si sabe con certeza qué códec se usó para codificar el contenido de su
video.
Si decide incluir el códec, asegúresemuy cuidadosoy asegúrese de formatear la cadena correctamente, prestando
especial atención a las comillas utilizadas; de lo contrario, el navegador no reconocerá la fuente.
En el ejemplo anterior, observe cómo la cadena completa está encerrada entre comillas simples, elescribey códecs Los atributos
están separados por un punto y coma, y elcódecslos valores están contenidos entre comillas dobles.
Si desea reproducir automáticamente y repetir su video, debe agregar elauto-reproduccióny

círculoatributos a lavideo elemento como este:
<bucle de reproducción automática de controles de vídeo>
</vídeo>
Por supuesto, también puede reproducir automáticamente y eliminar los controles de esta manera:
<reproducción automática de vídeo>
</vídeo>

Tenga en cuenta que cuando la reproducción automática está desactivada, la primera imagen fija del video se FIGURA 4.2La imagen de la
izquierda muestra el primer
muestra en el navegador como una imagen. Es posible que desee utilizar una imagen diferente si la primera imagen
fotograma del video que el
fija del video no es lo que desea mostrar; puede estar en blanco o simplemente no ser la imagen fija que desea mostrar navegador muestra por defecto; a
primero. la derecha, se muestra el mismo
video pero con una imagen de
Si desea utilizar una imagen diferente, puede utilizar elpósteratributo para apuntar a un archivo
póster definida en su lugar.
de imagen para usar en su lugar:
<video controles poster=”snowy-tree-poster.gif” width=”300” pags

altura=”210”>
</vídeo>
Puedes hacerte una idea de cómopósterel atributo funciona enFigura 4.2. Ahora que sabe cómo
reproducir archivos de video, es posible que desee pensar en el respaldo del navegador
heredado. ¿Cómo se muestran videos en navegadores heredados? Vamos a ver.

REPRODUCCIÓN DE UN ARCHIVO DE VÍDEO CON
DIFERENTES FUENTES Y RETROCESO LEGADO
A lo largo de este capítulo, he recomendado proporcionar una alternativa para los navegadores
heredados, como Internet Explorer 6 a 8, que no son compatibles con HTML5 y multimedia nativa.
Por supuesto, esto significa volver a un antiguo complemento de terceros que estos navegadores
entienden, como Flash.
Debido a que los navegadores ignoran lo que no entienden, los navegadores heredados
ignorarán lavideo y fuente elementos y actuar como si no existieran. Por supuesto, esto le
permite proporcionar un enlace simple al archivo de video para que pueda descargarse:
<reproducción automática de controles de video>
<a href=”snowy-tree.mp4”>Descargar el video: snowy-tree.mp4</a>

</vídeo>
Es posible que prefiera proporcionar un enlace de imagen en lugar de un enlace de texto simple:
<figura>
<a href=”árbol-nevado.mp4”>
<img src=”snowy-tree.gif” alt=”Ramas de un helecho pags

cubierto de nieve” altura=”210” ancho=”300” />
<figcaption>Descargar el video: snowy-tree.mp4
pags</figcaption>
</a>
</figura>
</vídeo>

FIGURA 4.3Así es como podría
mostrarse la imagen y el enlace para
descargar el archivo MP4 en Internet
Explorer 8.
Figura 4.3muestra cómo se vería esto en Internet Explorer.

Si decide admitir Flash y permitir que los navegadores que no sean HTML5 reproduzcan su
video a través de Flash, por supuesto que puede hacerlo usando elempotraroobjetoelementos.
A continuación, puede reproducir el vídeo utilizando un reproductor Flash descargado (que ha
cargado en su servidor) y elobjetoelemento.
También puede aprovechar el hecho de que Flash puede reproducir archivos MP4, por lo que no
es necesario crear otro archivo en un formato diferente. El siguiente código muestra cómo se puede
lograr un respaldo de Flash:
data=”player.swf?videoUrl=árbol-nevado.mp4&autoPlay=true”
alto = "210" ancho = "300">

value=”player.swf?videoUrl=árbol nevado.mp4&autoPlay=true”>
</objeto>
</vídeo>
Un navegador que no sea HTML5 ignorará los dosfuente elementos porque no sabe
qué hacer con ellos. Entonces reconocerá laobjetoy siempre que Flash esté instalado,
reproducirá el video a través del reproductor Flash.

El mismo código usando elempotrarelemento se ve así:
<embed type=”aplicación/x-shockwave-flash” wmode=”transparente”

src=”player.swf?videoUrl=árbol nevado.mp4&autoPlay=true”
alto = "210" ancho = "300">

</vídeo>
Es una mejor práctica usarobjetoen vez deempotrar,porque cualquier contenido en el

objetoLas etiquetas de inicio y finalización se representarán incluso si el navegador no es compatible
con el complemento que elobjetoelemento especifica en suescribeatributo. Esto le permite especificar
otro recurso alternativo en caso de que lo necesite. Como se puede ver en el anterior
objetoejemplo, elparámetroelemento será leído por los navegadores que no entienden

el valor especificado por elescribeatributo en elobjetoelemento.
Por supuesto, aún debe confiar en el hecho de que los usuarios tienen el reproductor Flash
instalado en sus computadoras, pero puede que no siempre sea así. Por lo tanto, también puede
agregar el enlace de descarga de la imagen mencionado anteriormente como alternativa final, en
caso de que Flash no esté instalado:
data=”player.swf?videoUrl=árbol-nevado.mp4&autoPlay=true”
alto = "210" ancho = "300">

value=”player.swf?videoUrl=árbol nevado.mp4&autoPlay=true”>
</objeto>
<a href=”snowy-tree.mp4”>Descargar el video: snowy-tree.mp4</a>
</vídeo>

El enlace de descarga aquí no es una verdadera alternativa en el sentido de que si el navegador
recurre a Flash, también se mostrará el enlace de descarga, pero eso no es necesariamente algo
malo porque solo proporciona otra forma de acceder al archivo.
Hay mucho en lo que pensar al decidir qué navegadores desea admitir y qué
respaldos desea proporcionar para hacerlo. Independientemente de lo que decida, la
multimedia HTML5 debería permitirle hacer el trabajo.
VIDEOPOR¡TODOS!
Puede leer un excelente artículo de Kroc Camen de Camen Design (http://camendesign.com)

sobre cómo hacer que el video esté disponible para todos sin usar JavaScript o rastrear el
navegador. Definitivamente vale la pena visitar el sitio de Kroc para futuras lecturas porque
lo mantiene actualizado con cualquier nuevo desarrollo o descubrimiento que él u otros
hagan.
Encontrará el artículo en http://camendesign.com/code/video_for_everybody.
Por supuesto, en estos días no solo debe preocuparse por la compatibilidad con los navegadores de
escritorio modernos y heredados. También debe hacer que su contenido esté disponible para los usuarios de
dispositivos móviles, tabletas y otros dispositivos de navegación alternativos con capacidades de reproducción
de video. Para optimizar su contenido web para tales dispositivos, también necesita aprender acerca detipos
de mediosy preguntas de los medios, que es lo que verás a continuación.
DISPOSITIVOS OBJETIVOS CON DIFERENTES ARCHIVOS DE
VÍDEO UTILIZANDO TIPOS DE MEDIOS Y CONSULTAS
Supongamos que desea mostrar un archivo de video diferente según las capacidades y el tamaño del
navegador. Por ejemplo, es posible que desee reproducir un video más pequeño, tanto en
dimensiones como en tamaño de archivo, en un teléfono móvil que tenga una pantalla pequeña y
posiblemente esté recuperando datos a través de una conexión 3G. ¿Es esto posible? Lo es si usas una
combinación detipos de mediosy preguntas de los medios, y elmedios de comunicaciónatributo en el
fuente elemento.
Los tipos de medios se introdujeron en CSS2 (www.w3.org/TR/CSS2/media.html) para
permitirle orientar diferentes dispositivos con estilos específicos y/u hojas de estilo. Tabla 4.2(
en la página siguiente) enumera los tipos de medios.

CUADRO 4.2Tipos de medios
ESCRIBE DEFINICIÓN
todo Apto para todos los dispositivos.
braille Dirigido a dispositivos de retroalimentación táctil Braille.
en relieve Dirigido a impresores braille paginados.
Mano Destinado a dispositivos portátiles, como teléfonos móviles.
impresión Apunta a material paginado y material para mostrar en el modo de vista previa de impresión.
proyección Adecuado para presentaciones proyectadas.
pantalla Adecuado para mostrar en una pantalla de computadora a color.
habla Diseñado para sintetizadores de voz.
tty Dirigido a dispositivos con una cuadrícula de caracteres de paso fijo, como una terminal.
televisión Destinado a un dispositivo tipo televisión.
Es posible que haya encontrado algunos de los tipos de medios enumerados en la Tabla 4.2
antes, aunque la mayoría de ellos probablemente le resulten extraños. Si alguna vez ha creado una
hoja de estilo para imprimir contenido, estará familiarizado con elimpresióntipo de medio; si alguna
vez ha intentado apuntar a un teléfono móvil, elManotipo también le resultará familiar.
pero es elManotipo que ha causado problemas particulares a medida que avanza la tecnología.
Inicialmente, los teléfonos no tenían navegadores que fueran capaces de representar sitios HTML, por lo que
los desarrolladores los ignoraron en gran medida. Cuando los teléfonos se volvieron "más inteligentes" y
llegaron con navegadores mejorados, laManoel tipo de medio no se usaba en los sitios web. Luego, los
proveedores eligieron ignorarlo y usar por defecto elpantallatipo de medio en su lugar. Pero se necesitaba
algo para ayudar a combatir esto porque las configuraciones del sitio web que estaban destinadas a los
navegadores de pantalla completa ahora se procesaban en los teléfonos, lo que generaba una molesta barra
de desplazamiento. Aquí es donde entran las consultas de los medios.
Las consultas de medios fueron creadas por el W3C y tienen una especificación
completa propia (consulte www.w3.org/TR/css3-mediaqueries). Son una extensión de
los tipos de medios CSS3 que le permiten verificar las condiciones de funciones de
medios particulares, comoancho, alto,y orientación, para entregar contenido o estilo
diferente. Puede comprobar una serie de funciones del dispositivo, cuya lista aparece en
Cuadro 4.3.

TABLA 4.3 Funciones del dispositivo de consulta de medios
CARACTERÍSTICA PREFIJOS MIN/MAX DEFINICIÓN
ancho sí El ancho del área de visualización de destino.
altura sí La altura del área de visualización de destino.
ancho del dispositivo sí El ancho del área de representación del dispositivo.
altura del dispositivo sí La altura del área de representación del dispositivo.
orientación sí Orientación del dispositivo de renderizado: retrato opaisaje.
relación de aspecto sí Relación de objetivo anchoal altura.
relación de aspecto del dispositivo sí Ratio de ancho del dispositivo al altura del dispositivo.
resolución sí Densidad de píxeles en el dispositivo.
color sí Número de bits por componente de color.
Indice de color sí Número de entradas en la tabla de búsqueda de colores.
red No Comprueba si el dispositivo está basado en la red o no.
monocromo sí Número de bits por píxel en dispositivo monocromático.
escanear No Para navegar por la televisión: progresivo oescanear.
Lo bueno es que puede combinar tipos de medios y consultas de medios para dirigirse a ciertos
dispositivos usando el y palabra clave:
pantalla y (ancho mínimo del dispositivo: 300 px)
También puede apuntar a todos los dispositivos que no coincidan con una configuración particular mediante el uso de la
lógica no palabra clave del operador:
no pantalla y (ancho máximo: 800px)
Elsolo La palabra clave también se puede usar para ocultar la configuración de los navegadores más antiguos:
solo pantalla y (ancho máximo: 800px)

Por supuesto, estos ajustes no funcionan por sí solos y deben asignarse al medios
de comunicaciónatributo de lo requerido fuente elemento dentro del video envase:
<source src=”myVideo.webm” media=” pantalla y pags

(min-dispositivo-ancho:300px)”>
El siguiente ejemplo de código sirve un video diferente para todos los tipos de medios que
tienen un ancho máximo de 600 píxeles. Se proporcionan los formatos WebM y MP4. Todo lo
que no coincida con estas características pasará a las siguientes definiciones de origen:
<fuente src=”árbol-nevado-pequeño.mp4” type=”video/mp4”

pagsmedia = "todos y (ancho máximo: 600px)">
<fuente src=”árbol-nevado-pequeño.webm” type=”video/webm”

pagsmedia = "todos y (ancho máximo: 600px)">
<fuente src=”árbol-nevado-medio.webm” type=”video/webm”>
<fuente src=”árbol-nevado-medium.mp4” type=”video/mp4”>
</vídeo>
Si también desea proporcionar un archivo de video de tamaño mediano basado en un ancho

máximo de visualización mayor de 800 píxeles, puede hacerlo así:
<fuente src=”árbol-nevado-pequeño.mp4” type=”video/mp4”

pagsmedia = "pantalla y (ancho máximo: 600px)">
<fuente src=”árbol-nevado-pequeño.webm” type=”video/webm”

pagsmedia = "pantalla y (ancho máximo: 600px)">
<fuente src=”árbol-nevado-medium.webm” type=”video/webm” pags

media=”pantalla y (ancho máximo: 800px)”>
<source src=”snowy-tree-medium.mp4” type=”video/mp4”

pagsmedia=”pantalla y (ancho máximo: 800px)”>
<fuente src=”árbol-nevado-grande.webm” type=”video/webm”>
<fuente src=”árbol-nevado-grande.mp4” type=”video/mp4”>
</vídeo>

PRUEBAS CON TIPOS DE MEDIOS YCONSULTAS
Quizás se pregunte cómo demonios probaría los servidor) y cambiar la vista a la de un puñado de
tipos de medios y las consultas si no tiene teléfonos (como Blackberry y iPhone) y monitores de
dispositivos específicos disponibles. varios tamaños, entre otros dispositivos.
Con los ejemplos que proporcioné, el simple hecho de cambiar el Puede ver cómo funciona el código en la sección "Dispositivos
tamaño de la ventana del navegador y luego actualizar la página de destino con diferentes archivos de video usando tipos de
generalmente dará como resultado el resultado deseado. medios y consultas" en ProtoFluid en Figura 4.4 y Figura 4.5.
También puede usar la aplicación ProtoFluid (http:// Por supuesto, nada supera a probar su código en la
app.protofluid.com), que le permite cargar un sitio realidad, pero esa no siempre es una opción viable
web (incluso aquellos que se ejecutan en su dada la gran cantidad de dispositivos en el mercado.
NOTA: Firefox ignora por completo las consultas de medios, por lo que cambiar el tamaño de la ventana del
navegador no tendrá ningún efecto. Sugiero usar Opera, que hace exactamente lo que se supone que debe hacer.
FIGURA 4.4 Al seleccionar el tamaño del iPhone en ProtoFluid, se muestra el archivo de FIGURA 4.5 Al seleccionar el tamaño de escritorio
video más pequeño. de 800 × 600 en ProtoFluid, se muestra el archivo
de video mediano.

Una vez más, cualquier dispositivo que tenga un tamaño de pantalla máximo superior a 600
píxeles u 800 píxeles ignorará los tamaños más pequeños y reproducirá cualquiera de los videos
WebM o MP4 más grandes que sea capaz de reproducir.
Estos son solo algunos ejemplos simples de lo que podría querer lograr al apuntar a diferentes
dispositivos. Al combinar tipos de medios y consultas, puede dirigirse a cualquier dispositivo para
cumplir con sus requisitos específicos. Desafortunadamente, ninguno de los ejemplos anteriores
discutidos funcionará con Android.
ANDROID Y VÍDEO
La implementación de video HTML5 en Android es sorprendentemente pobre.

Por eso, se merece su propio apartado pequeño para evitar que te arranques
los pelos.
Android admite archivos MP4 desde la versión 2.0 y WebM desde la versión
2.3. No deberías usar elescribeatributo con elvideo ofuente elemento al definir
el archivo de video que desea que use Android. Por alguna razón, esto confunde a
Android e ignora la fuente.
Además, Android ignorará por completo lacontrol Satributo, y tendrá que implementar sus
propios controles a través de la API de JavaScript (que es el tema del Capítulo 5), o para lograr la
reproducción automática, reproduzca el video a través de la API en la carga de la página.
Android tampoco mostrará el primer cuadro del video como una imagen; en su lugar,
muestra un icono de video. Sin embargo, reconoce y comprende lapósteratributo, por lo que si
especifica una imagen con ese atributo, mostrará esa imagen correctamente.
A continuación se muestra el código para especificar un video para Android, junto con el JavaScript
requerido para reproducir el video en Android cuando el usuario presiona el ícono de video. Aplazaré la
explicación de este JavaScript por ahora, pero lo discutiré en detalle en el Capítulo 5:
PROPINA:Peter Gasston, desarrollador web y autor de muchos artículos y un

libro sobre CSS3, brinda un tutorial detallado sobre cómo hacer que el video HTML5
funcione en teléfonos Android. Asegúrese de ver lo que tiene que decir en www.broken-
links.com/2010/07/08/making-html5-video-work-on-android-phones si tiene problemas para
trabajar con video HTML5 en teléfonos Android.

<!DOCTYPEhtml>
<html>
<cabeza>
<title>Reproducir un archivo de video: Media Query Android</title>
<script>
función reproducir () {
var video = document.getElementById('video');

video.addEventListener('clic',función(){
video.reproducir();
},falso);
}
</script>
</cabeza>
<carga del cuerpo=”reproducir();”>
<source src=”snowy-tree-small.mp4” media=”pantalla y pags(

ancho máximo: 800px)”>
<fuente src=”árbol-nevado-grande.mp4” type=”video/mp4”>
</vídeo>
</cuerpo>
</html>
Los problemas anteriores mencionados solo afectan al navegador predeterminado que

viene con Android. Si el usuario utiliza otro navegador móvil, como Opera Mobile, el código
anterior no es necesario. Es una buena apuesta que Google mejorará la implementación de
video HTML5 de Android en una versión futura. Y para cuando lea esto, es posible que ya se
haya actualizado.

ENVASEARRIBA
Ahora debe ser consciente de lo fácil que es agregar video a su sitio web usando
multimedia nativa HTML5. Probablemente también sepa que todavía hay una serie de
detalles que debe considerar antes de hacerlo. Por ejemplo:
- ¿Qué navegadores debería admitir?
- ¿Admitirá navegadores heredados?
- ¿Debe admitir dispositivos móviles? ¿De ser asi, cuales?
Estas son solo algunas de las preguntas que quizás deba hacerse antes de seguir
adelante. Sin embargo, una vez que haya tomado esas decisiones, aprovechar el poder de
la multimedia HTML5 para entregar video a sus usuarios es relativamente simple. Con el
método estandarizado de entrega que trae la parte multimedia de la especificación HTML5,
usted sabe a qué espectadores llegará y qué tipo de experiencia tendrán.
Hasta ahora, ha dejado que el navegador proporcione los controles de video (y
audio). Y estos controles varían de un navegador a otro.
En el próximo capítulo, aprenderá a utilizar las API de JavaScript multimedia de HTML5
incluidas como parte de la especificación de HTML5 para crear sus propios controles
personalizados para audio y video. ¡Vamos!

Esta página se dejó en blanco intencionalmente
5
API JAVASCRIPT
YPERSONALIZADO
CONTROL S
El audio y el video HTML5 brindan mucha
funcionalidad lista para usar, pero se detiene
allí. HTML5 también proporciona una ganada
Media JavaScript API completamente fácil de usar que puede usar para ampliar
esa funcionalidad básica de otras maneras.
Todos han visto los controles predeterminados que los navegadores agregan a
su contenido de video o audio, y algunos son bastante desagradables. Bueno,
un excelente uso de la API de JavaScript es implementar sus propios controles
multimedia. Puede diseñarlos como desee usando CSS y luego conectarlos a
través de la API para controlar su video y audio.
Este capítulo describe los atributos, métodos y eventos de la API

de JavaScript y luego le muestra cómo armar su propio conjunto
de control y conectarlo para que funcione.
¡Tomemos el control!
85
QUÉ ES ¿JAVASCRIPT?
JavaScript es un lenguaje de secuencias de comandos del lado del cliente de uso común que puede
usar para proporcionar funcionalidad adicional a un sitio web. Debido a que el código es del lado del
cliente, es parte de la página HTML y depende del navegador hacer algo con él. Por lo tanto, tener
Media API como parte de la especificación HTML5 garantiza una implementación estándar de la API
en todos los navegadores.
La API de medios que se analiza aquí es una API de JavaScript y se supone que
tiene conocimientos de este idioma. Si no lo hace, le recomiendo el tutorial de
JavaScript en www.quirksmode.org/js/intro.html. Le brindará una buena
introducción al lenguaje JavaScript, que lo ayudará a comprender el contenido de
este capítulo.
Cuando haya terminado el tutorial, o si ya está familiarizado con JavaScript, ¡siga
leyendo!
86CAPÍTULO 5API DE JAVASCRIPT Y CONTROLES PERSONALIZADOS

EXPLORADORELATRIBUTOS DE LA API
Es importante que conozcas los atributos que puede tener cada elemento multimedia
como parte de la API de JavaScript. Cada atributo junto con su descripción se enumeran
enCuadro 5.1.
Algunos atributos son específicos solo para video; estos se enumeran enCuadro 5.2. Para aquellos
atributos que generan un evento cuando se cambia su valor, se proporciona el nombre del evento para
facilitar la referencia. Consulte la sección "Aprovechamiento de los eventos de API" más adelante en este
capítulo para obtener una lista de eventos.
TABLA 5.1Atributos de audio y video(continuado)
duración Contiene la duración del audio o video. Este es un atributo de solo lectura y es posible que solo esté
disponible si el video se ha cargado previamente.
Cuando este valor esté disponible para lectura, elduracióncambiarse levanta el evento.
volumen Contiene la configuración de volumen para el audio o el video.
0 es el valor más bajo; 1.0 es el más alto.
Cuando se cambia este valor, elcambiado de volumense levanta el evento.
en pausa Es un atributo booleano que indica si el recurso de audio o video está actualmente en pausa o
no.
Cuando este valor cambia a verdadero, unpausase levanta el evento.
Cuando este valor cambia a falso, untocarse levanta el evento.
tasa de reproducción Indica la velocidad requerida a la que se reproducirá el recurso de audio o video. Los valores válidos
oscilan entre −1,0 y 1,0.
Un valor negativo reproduce el recurso hacia atrás más rápido; un valor positivo lo reproduce más rápido.
Un valor de 0 detiene la reproducción.
Cuando este valor cambia, uncambio de tasase levanta el evento.
terminado Es un atributo booleano que indica si el recurso de audio o video ha terminado de reproducirse (¡y la dirección de reproducción
es hacia adelante! Vertasa de reproducción predeterminadamás adelante en esta tabla ytasa de reproducción más temprano).
auto-reproducción Es un atributo booleano que indica si el audio o el video se reproducirán automáticamente o no.
EXPLORANDO LOS ATRIBUTOS DE LA API 87

círculo Es un atributo booleano que indica si el recurso de audio o video está configurado para reproducirse en bucle o no.
control S Es un atributo booleano que indica si el navegador debe mostrar o no su conjunto de controles
predeterminado en el audio o el video.
apagado Es un atributo booleano que indica si el audio o el video están silenciados o no.
origen Contiene la URL de la fuente de medios tal como se establece en el atributo del audioovideo elemento.
fuente actual Inicialmente vacío, contiene la URL de la fuente de medios que realmente está seleccionada para reproducir por el audioovideo
elemento, generalmente establecido a través de un niño fuente elemento.
hora de inicio Contiene el valor de la hora de inicio de la audioovideo elemento. Por lo general, es 0, pero ocasionalmente puede
ser un valor positivo por varias razones, como ser parte de una transmisión en vivo o si es un fragmento de un
recurso de audio o video más grande.
origencruz Contiene la configuración para elaudioovideo elementosorigencruzatributo. Esto tiene como objetivo permitir o prohibir
medios de origen cruzado de la fuente de audio utilizando la especificación CORS (intercambio de recursos de origen cruzado)
(consulte el Capítulo 2 para obtener más detalles).
estado de la red Contiene el estado actual de la red delaudioovideo elemento.
Puede tener una de cuatro configuraciones (el valor numérico se proporciona entre paréntesis después del nombre de la
configuración):
RED_VACÍA (0) Indica que el elemento aún no ha sido inicializado.
Cuando se establece este valor, elvaciadose levanta el evento. Elabortary errorlos
eventos también se pueden generar cuando se establece este valor.
RED_IDLE (1) Se seleccionó un recurso para reproducir pero no se está reproduciendo
actualmente.
Cuando se establece este valor, elsuspenderse levanta el evento. Elabortary error
También se pueden generar eventos.
CARGA_DE_RED (2) El navegador está intentando descargar datos actualmente.
Cuando se establece este valor, se generan los siguientes eventos:inicio de carga,

progreso,y estancado
RED_SIN_FUENTE (3) El elemento está buscando actualmente un recurso para jugar, pero aún no lo
ha encontrado.

precarga Contiene el valor del elementoprecargaatributo, que se utiliza para proporcionar una pista al navegador sobre
cómo se debe precargar la fuente de medios (consulte el Capítulo 2 para obtener más detalles).
amortiguado Contiene el intervalo de tiempo de laaudioovideo elemento que el navegador ha almacenado actualmente en el búfer (si lo
hay).
Esto devuelve unIntervalo de tiempoobjeto.
listoestado Contiene el estado listo actual delaudioovideo elemento y puede contener uno de los cinco valores
posibles (el valor numérico se proporciona entre paréntesis después del nombre del valor):
NO TENER_NADA (0) Actualmente no hay información sobre el elemento disponible.
TENER_METADATOS (1) Los metadatos del elemento en cuestión están disponibles

actualmente. en el caso de lavideo elemento, también indica que las
dimensiones del video están disponibles. Actualmente se desconoce la
posición de inicio del recurso.
Cuando se establece este valor, elmetadatos cargadosse levanta el evento.
TENER_DATOS_ACTUALES (2) Se recuperaron suficientes datos para conocer la posición de inicio del
audio o video, pero no los suficientes para reproducirlo.
Cuando se establece este valor, eldatos cargadosse levanta el evento.
TENER_DATOS_FUTUROS (3) Se han recuperado suficientes datos para que se pueda reproducir el
recurso. Sin embargo, reproducir el recurso ahora puede significar que la
reproducción puede intentar superar la cantidad del recurso recuperado.
Cuando se establece este valor, elPoder jugar se levanta el evento.
TENER_SUFICIENTE_DATOS (4) Se han recuperado suficientes datos para que el recurso se pueda
reproducir sin temor a que la reproducción llegue al final de los datos
disponibles antes de que se haya cargado el final del recurso.
Cuando se establece este valor, elpuede jugar se levanta el evento.
Puede verificar este atributo periódicamente para ver cuándo comenzar/dejar de mostrar un ícono de espera, por
ejemplo.
buscando Es un atributo booleano que indica si el navegador está buscando actualmente una posición de reproducción
diferente dentro del recurso de audio o video. Por ejemplo, el usuario puede haber arrastrado los controles
predeterminados hacia adelante para reproducirlos en un punto posterior del recurso.

tiempo actual Contiene el tiempo actual en segundos que ha alcanzado la posición de reproducción dentro del
recurso de audio o video.
Cuando este valor cambia, elactualización de tiempose levanta el evento.
Cuando este valor es igual al final del recurso multimedia, elterminadose levanta el evento.
tiempo inicial Contiene la posición de reproducción inicial del recurso de audio o video.
startOffsetTime Contiene unaFechaobjeto que representa el desplazamiento de la línea de tiempo actual (la fecha y hora
explícitas correspondientes a la hora cero en el recurso) dentro del recurso.
tasa de reproducción predeterminada Indica la velocidad requerida a la que se debe reproducir el recurso de audio o video cuando se inicia. Los
valores válidos oscilan entre -1,0 y 1,0.
Un valor negativo reproduce el recurso hacia atrás más rápido; un valor positivo lo reproduce más rápido.
Un valor de 0 detiene la reproducción. La tasa de reproducción normal es 0.1.
Cuando este valor cambia, uncambio de tasase levanta el evento.
jugó Devuelve unRangos de tiempoobjeto que indica los intervalos de tiempo, si los hay, que el navegador ha reproducido hasta ahora
del recurso.
buscable Devuelve unRangos de tiempoobjeto que indica los rangos de tiempo, si los hay, del recurso de medios que el
navegador puede "buscar" (es decir, mirar hacia adelante), que depende de la cantidad del recurso que se carga
realmente.
grupo de medios Contiene el recursogrupo de mediosvalor de atributo, que permite vincular varios elementos multimedia a través de un
nombre/grupo común (consulte el Capítulo 2 para obtener más detalles), si está configurado.
controlador Contiene el controlador de medios actual del recurso, si está establecido; de lo contrarionulo.
por defecto silenciado Es un valor booleano que refleja el valor del recursoapagadoatributo (ver Capítulo 2).
pistas de audio Contiene la lista de pistas de audio en vivo que está disponible en el recurso del elemento multimedia, si lo hay.
videopistas Contiene la lista de pistas de video en vivo que está disponible en el recurso del elemento multimedia, si lo hay.
pistas de texto Es un atributo de solo lectura que contiene una lista de las pistas de texto disponibles en el recurso del elemento
multimedia, si lo hay.

ELINTERVALO DE TIEMPOOBJETO
Algunos de los atributos mencionados en la Tabla 5.1 devuelven unIntervalo de tiempoobjeto,
que esencialmente contiene los siguientes bits de datos:
- longitud.El número de rangos realmente en el objeto.
- Índice de comienzo).La marca de tiempo de la hora de inicio del rango para el

índice dado.
- fin (índice).La marca de tiempo de la hora de finalización del rango para el

índice dado.
Así, si un determinadoIntervalo de tiempola longitud del objeto es 1, puede acceder a las marcas
de tiempo de inicio y finalización de ese objeto en particular a través deinicio(0)y fin (0),
respectivamente.
TABLA 5.2Atributos de vídeo
ancho Contiene el ancho del elemento de video en píxeles o porcentaje.
Alterar este valor no afectará el valor deancho de video.
altura Contiene la altura del elemento de video en píxeles o porcentaje.
Alterar este valor no afectará el valor devideoHeight.
ancho de video Es un atributo de solo lectura que contiene el ancho real del archivo multimedia
de video en píxeles, o 0 si no se conoce, en el momento en que se carga el video.
videoAltura Es un atributo de solo lectura que contiene la altura real del archivo
multimedia de video en píxeles, o 0 si no se conoce, en el momento en que se
carga el video.
póster Contiene la URL de la imagen del póster del video, si corresponde.
¡Uf, esa es una gran lista de atributos! Pero no te preocupes; muchos de ellos quizás
nunca los uses. He hecho un intento de ponerlos en orden de aquellos que podrían
interesarle más.

Veamos un par de ejemplos rápidos que muestran cómo puede usar estos
atributos. Si, por ejemplo, quisiera tomar la posición de tiempo de reproducción
actual del video, usaría eltiempo actualatributo:
<script>
var video = document.getElementsByTagName(“video”)[0];
alerta (video. hora actual);
</script>
Agarras un identificador del objeto de video usando el estándargetElementsByTagName()

Función de JavaScript (solo hay un video aquí, y lo sabe, de ahí el índice de 0), y luego lea el
videotiempo actualatributo. Por supuesto, esto podría ser 0 si el video aún no ha comenzado y
se actualiza constantemente a medida que se reproduce el video.
Otro ejemplo sería verificar si el video está en bucle y, de ser así, evitar
que lo haga:
<script>
if (video.bucle) video.bucle = falso;
</script>
Como puede ver, puede lograr esto comprobando si elcírculoEl atributo es verdadero y, de ser así,
establecerlo en falso para evitar que el video se reproduzca en bucle.

Estos son solo dos breves ejemplos de cómo puede usar los atributos. Verá muchos
más ejemplos cuando comience a armar sus propios controles multimedia más
adelante en este capítulo.
Las tablas 5.1 y 5.2 contienen la lista completa de atributos en caso de que quiera probar
uno o más en el futuro y sienta curiosidad por saber qué hace qué y dónde. Además, es
posible que haya notado que cambiar algunos de estos atributos genera eventos que puede
capturar, lo que le permite actuar sobre ellos.
Echemos un vistazo más de cerca a estos eventos.

ARNÉSELEVENTOS API
Debido a que JavaScript agrega interactividad a los documentos web, cuando un usuario realiza una
acción, debe haber una forma de detectar que se produjo la acción. Este es el papel de los
acontecimientos.
Se pueden generar una serie de eventos en Media JavaScript API en función de los
cambios de valor, las llamadas a métodos y las acciones del navegador. Escuchar ciertos
eventos y responder a ellos puede ser clave al implementar su propio conjunto de control
para recursos de audio y video.
Se proporciona una lista completa de los eventos que se pueden generar enCuadro 5.3.
PROPINA:Si los eventos de JavaScript son nuevos para usted, consulte
www.quirksmode.org/js/introevents.html para obtener una buena
introducción sólida.
CUADRO 5.3 Eventos generados en la API de JavaScript de medios (continuado)
EVENTO DESCRIPCIÓN
inicio de carga Se genera cuando el navegador comienza a buscar datos multimedia para cargar.
Progreso Se genera cuando el navegador está recuperando datos multimedia.
suspender Se genera cuando el navegador estaba obteniendo datos de medios, pero se detuvo y aún no ha obtenido todo el
recurso de medios.
abortar Se genera cuando el navegador deja de obtener datos multimedia, pero no debido a un error.
error Se genera cuando se produjo un error mientras el navegador recuperaba los datos multimedia.
vaciado Se genera cuando se perdió la conexión de red mientras el navegador estaba obteniendo datos multimedia o el
carga() El método fue llamado cuando uno de esos métodos ya estaba en progreso.
estancado Se genera cuando el navegador intenta obtener datos multimedia, pero por alguna razón los
datos no se transfieren.
metadatos cargados Se genera cuando el navegador ha adquirido la duración y las dimensiones del recurso
multimedia.
datos cargados Se genera cuando el navegador conoce la posición de inicio del recurso multimedia.
Poder jugar Aparece cuando el navegador puede iniciar la reproducción por primera vez, pero no puede garantizar que si la
reproducción comienza ahora, no tendrá que hacer una pausa para obtener más datos multimedia.
APROVECHAR LOS EVENTOS DE LA API 93

CUADRO 5.3 Eventos generados en la API de JavaScript de medios (continuado)
EVENTO DESCRIPCIÓN
puede jugar Aparece cuando el navegador es capaz de reproducir el recurso multimedia de principio a fin sin tener que
hacer una pausa para obtener más datos multimedia.
jugando Se genera cuando la reproducción de un recurso multimedia está lista para comenzar después de haber sido pausada o retrasada
previamente debido a la falta de suficientes datos multimedia.
espera Aparece cuando el navegador ha detenido la reproducción debido a que no hay suficientes datos
multimedia disponibles. Sin embargo, espera que los datos requeridos estén disponibles en breve.
buscando Se genera cuando el recurso multimediabuscandoEl atributo se establece en verdadero.
buscado Se genera cuando el recurso multimediabuscandoEl atributo se establece en falso.
terminado Se genera cuando el recurso multimedia deja de reproducirse porque ha terminado.
duracióncambiar Se genera cuando el recurso multimediaduraciónel atributo ha sido actualizado.
actualización de tiempo Se eleva cuando se ha cambiado la posición de reproducción actual del recurso de medios (por ejemplo, como parte de la
reproducción normal).
tocar Se genera cuando el recurso multimedia que se detuvo anteriormente ya no está en pausa y se ha reanudado la
reproducción normal.
pausa Se levanta después de lapausa()El método ha regresado y el recurso multimedia se ha pausado.
cambio de tasa Se genera cuando el recurso multimediatasa de reproducción predeterminadaotasa de reproducciónse modifican
los atributos.
cambio de volumen Se genera cuando el recurso multimediavolumenoapagadoel atributo ha cambiado.

Los eventos pueden ser bastante útiles cuando desea reaccionar ante el cambio de varios atributos y
estados de recursos de medios, incluso si es solo para actualizar una visualización en pantalla.
Reutilicemos uno de los ejemplos breves anteriores. Si desea capturar y mostrar la hora actual
del video mientras se reproduce, naturalmente querrá actualizar la hora a medida que cambia. Para
hacer esto, escucharía elcambio de tiempoevento y luego actuar en consecuencia:
<div id=”tiempo”>0</div>
<script>
video.addEventListener('cambio de hora', function() {
documento.getElementById(“tiempo”).innerHTML =
pagsvideo.tiempoActual;
}, falso);
</script>
Este código agrega un detector de eventos (más sobre esto más adelante) para elcambio de tiempo
evento. Cuando se eleva, actualiza la hora.divisióncon el tiempo de reproducción del video actual. Porque el
cambio de tiempoel evento se genera como el videotiempo actualse cambia el atributo, este código
mantendrá la pantalla actualizada.
Utilizará un video en los ejemplos a lo largo del resto del capítulo (a menos que se
indique lo contrario). Aunque casi todos los atributos, eventos y métodos se aplican
tanto al audio como al video, un ejemplo de video ayuda a visualizarlos mejor.
Mientras se reproduce el video, deberá moverse o dar la impresión de movimiento dentro
de una barra de progreso. Simplemente reaccionando a laactualización de tiempoevento puede
facilitar esa tarea, porque puede leer fácilmente eltiempo actualatributo y calcule el porcentaje
del video reproducido. Volverá a visitar las barras de progreso más adelante en el capítulo
cuando aprenda a crear una.
Pero antes de comenzar a mirar el código y cómo usa realmente la API,
necesita conocer los métodos.
APROVECHAR LOS EVENTOS DE LA API 95

UTILIZANDOELMÉTODOS API
Los métodos son pequeñas subrutinas que le dicen a un objeto, en este caso un objeto
de audio o video, qué hacer. No necesita conocer los entresijos de lo que hace
internamente un método en particular. Solo necesita saber que existe, se puede llamar,
qué hace y el resultado esperado.
La API Media JavaScript contiene un puñado de métodos que tienen nombres apropiados y
hacen exactamente lo que dicen que hacen (Tabla 5.4).
Seguro que no es una lista larga de métodos, pero es suficiente para poder crear su propio
conjunto simple de controles de medios y usarlo para manipular sus medios de audio y video.
Si desea reproducir el video cuando se hace clic en un botón determinado (lo que, por
supuesto, hará cuando implemente sus propios controles de medios), podría hacer lo
siguiente:
<button id=”reproducir” title=”reproducir” onclick=”reproducirVideo()”>reproducir</button>
<script>
función reproducir vídeo () {

video.reproducir();
}
</script>
Este código define un botón HTML simple y especifica que elreproduce el video()
La función de JavaScript debe llamarse cuando se hace clic en el botón. Elreproduce el video()
función simplemente llama al vídeotocar()método, que inicia la reproducción del video!
PROPINA:Habrás notado que no haydetener()método. Bueno, detener

la reproducción es más o menos lo mismo que pausarla. La única
diferencia es que probablemente también desee configurar el recurso de medios
tiempo actualatributo al inicio del recurso multimedia, que es 0.
A estas alturas, está absolutamente aburrido de ver listas de atributos, eventos y métodos.
Bueno, tan interesantes y útiles como pueden ser, yo también lo soy. Entonces, avancemos
para ver qué tan útiles pueden ser a medida que crea un reproductor de video HTML5 simple
con controles personalizados.

TABLA 5.4Métodos de la API de medios
MÉTODO DESCRIPCIÓN
carga( ) Hace que toda la actividad en un recurso de medios se suspenda inmediatamente y el elemento en cuestión se
restablece a los valores predeterminados (para obtener una lista completa de los valores predeterminados que
se establecen, vaya a www.whatwg.org/specs/web-apps/current -work/multipage/the-video-
element.html#dom-media-load).
Este método hace que lainicio de cargaevento a plantear.
tocar( ) Informa al elemento de medios para comenzar la reproducción de un recurso de medios.
Si el recurso de medios se detuvo previamente, el recursoen pausaatributo se establecerá en

falso y eltocarevento planteado.
pausa( ) Hace que un recurso multimedia deje de reproducirse.
Esto hará que el elemento multimediaen pausaatributo se establezca en verdadero y, por lo tanto, genere un
pausaevento.
canPlayType(tipo) Toma una representación de cadena de un tipo MIME (por ejemplo,audio/ogg, vídeo/mp4)como parámetro y devuelve
un valor de cadena que indica la capacidad percibida del navegador para reproducir ese tipo de medio en particular.
Los valores que se pueden devolver incluyen:
Una cadena vacía El navegador no puede reproducir un recurso multimedia de este tipo.
"quizás" El navegador no puede decir con certeza si puede o no reproducir un recurso

multimedia de este tipo.
"probablemente" El navegador está bastante seguro de que puede reproducir un recurso multimedia de este tipo.
addTextTrack(tipo, Devuelve y agrega una pista de texto, que también se agrega a la lista de pistas de texto del elemento multimedia.
[etiqueta], [idioma])
Elamable parámetro puede ser uno de:
subtitulos
subtítulos
descripciones
capítulos
metadatos
el opcional etiqueta y idioma los parámetros predeterminados son una cadena vacía si no se proporcionan.
Leerá más sobre las pistas de texto en el Capítulo 8.
USO DE LOS MÉTODOS API 97

CREANDO UN SIMPLE REPRODUCTOR DE VIDEO
CON CONTROLES PERSONALIZADOS
Al crear controles personalizados, incorporará muchos de los elementos que

aprendió en los capítulos anteriores y en este.
Para comenzar, necesitará un video con sonido. El ejemplo del video anterior del árbol
nevado moviéndose suavemente con el viento muestra que no soy muy creativo cuando se
trata de elegir un video. Por lo tanto, para este ejemplo, he elegido la hierba que sopla en el
viento, con sonidos del viento y el susurro de la hierba, cosas emocionantes.
El código HTML5 básico para esta pequeña configuración de video es un código que ha visto antes y, por
lo tanto, no es nuevo para usted:
<source src=”hierba-en-el-viento-sma.mp4” type=”video/mp4”>

<source src=”hierba-en-el-viento-sma.webm” type=”video/webm”>
</vídeo>
A continuación, agregará botones para usarlos como botones Reproducir/Pausar y Detener.
NOTAS:El código para este sencillo ejemplo de reproductor de video está disponible en
el sitio web en www.html5multimedia.com.
En algunas ocasiones puede haber formas mejores o más rápidas de escribir el
Funciones JavaScript. Pero el propósito de este código es mostrarle lo que puede
lograr a través de Media JavaScript API. Por lo tanto, creo que es más fácil verlo
explicado a través de JavaScript detallado.

FIGURA 5.1Un reproductor de video
aburrido.
AÑADIR BOTONES DE REPRODUCCIÓN/PAUSA Y DETENER
Usando HTML simple, nuevamente nada con lo que no esté familiarizado, agregará los dos
botones en undivisiónbajo elvideo definición de elemento:
<div id=”controles”>
<button id=”playpause” title=”play”>reproducir</button>
<button id=”detener” title=”detener”>detener</button>
</div>
Y ahí lo tienes; dos botones simples, pero actualmente inútiles, que puedes
diseñar como quieras. Por ahora, dejémoslos como están (Figura 5.1).
NOTA: Por supuesto, podría usar hipervínculos en lugar

de botones, pero he optado por usar botones aquí.
Usarás el mismo botón para reproducir y pausar el video porque solo tendrás uno y no el
otro. Consulte los controles de medios predeterminados del navegador. Cuando hace clic en
Reproducir, se convierte en un botón de Pausa. Imitarás ese comportamiento.
Tenga en cuenta que he añadido uncontrol Satribuir a lavideo elemento. ¿Por qué? Estoy jugando
a lo seguro. Debido a que agregará todos sus controles personalizados mediante la API de JavaScript,
si los usuarios tienen JavaScript desactivado, no tendrán ningún control. Así que dejarás el
control Satributo donde está y luego eliminarlo a través de JavaScript, lo que tampoco sucederá
si los usuarios tienen JavaScript desactivado. Por lo tanto, el atributo no es un problema.
CREAR UN REPRODUCTOR DE VIDEO SENCILLO CON CONTROLES PERSONALIZADOS99

FIGURA 5.2El reproductor de video
sin controles.
Agreguemos la primera pieza de JavaScript y eliminemos los controles

predeterminados del video:
<script>
video.controles = falso;
</script>
Agarras un identificador del objeto de video usando el estándargetElementsByTagName()

Función de JavaScript y luego, usando ese identificador, establece el valor booleano control S
atribuye a falso. Su reproductor de video ahora se parece al deFigura 5.2.
A continuación, creará una función para que los botones llamen cuando se haga clic en ellos.
Hagamos primero el botón Detener, porque es el más fácil.
tu defines la funcion detenerVideo() y agréguelo al botón Detener al hacer clic

evento:
función detenerVideo() {
video.pausa();
video.tiempoActual = 0;
}
<button id=”detener” title=”detener” onclick=”stopVideo()”>detener</button>
Como se mencionó anteriormente, detener el video es prácticamente lo mismo que

pausarlo, excepto que también restablece el tiempo del video al principio. Como puede
ver, estas tareas se logran llamando al videopausa()y luego configurando el
tiempo actualatribuye a 0.

Los botones Reproducir y Pausa naturalmente siguen un patrón similar pero son un poco
más complejos. Debe agarrar un identificador para el objeto del botón porque deberá realizar
cambios en él de esta manera:
var ppbutton = document.getElementById(“playpause”);
Luego define otra función; para este ejemplo, llámelaalternarReproducir()—y

asígnalo al botón Play/Pause:
función alternarReproducir() {
if (video.pausado || video.finalizado) {
if (video.finalizado) video.currentTime = 0;
ppbutton.título = “pausa”;
ppbutton.innerHTML = “pausa”;
video.reproducir();
}
demás {
ppbutton.título = “reproducir”;
ppbutton.innerHTML = “reproducir”;
video.pausa();
}
}
<button id=”playpause” title=”play” onclick=”togglePlay()”>reproducir
pags</botón>
Veamos la función más de cerca.

Primero verifica si el video está actualmente en unen pausaoterminadoExpresar. Si ha
terminado, restablece eltiempo actuala 0 (muy parecido a lo que hiciste endetenerVideo()).Luego
configuras el botóntítuloatributo y texto para "pausar" y llamar altocar()Método para
reproducir el video.
Si el video no está en pausa o terminado, entonces obviamente se está
reproduciendo (y desea pausarlo). Así que cambias el botóntítuloatributo y texto para
"reproducir" y luego llamar alpausa()método para pausar el video.

personalizado con botones Reproducir/
Pausar y Detener.
Tal como está ahora, el reproductor de video cambia el botón Reproducir a Pausa cuando hace clic en él y
viceversa (Figura 5.3). Los botones Reproducir/Pausar y Detener ahora hacen exactamente lo que se supone
que deben hacer.
Has hecho un buen comienzo en la personalización de tus controles. Pero, ¿y si los usuarios
lograran reproducir o pausar el video sin usar los controles? ¿Cómo pueden hacer eso, te
preguntarás? Bueno, algunos navegadores (p. ej., Firefox) le permiten restablecer los controles
haciendo clic derecho en el video y seleccionando Mostrar controles. Si un usuario hace clic en su
botón Reproducir y luego usa estos controles predeterminados para pausar el video, sus controles se
ven dañados porque los valores que se muestran en los botones Reproducir/Pausar no están
sincronizados con el estado real del video. Aquí es donde entran los eventos.
ESCUCHANDO EVENTOS
Como se menciona en la Tabla 5.4, cuando elpausa()y tocar()se llaman métodos, generan dos
eventos,pausay tocar,respectivamente. Entonces, todo lo que su código debe hacer es
escucharlos y actuar en consecuencia.
Para escuchar un evento, utilice elagregarEventListener()(que vio brevemente
antes) para llamar al objeto de video. Así que para escuchar elpausay tocar
eventos, necesitas agregar esto:
video.addEventListener('reproducir', función() {
/*...hacer cosas...*/
}, falso);
video.addEventListener('pausar', function() {
/*...hacer cosas...*/
}, falso);

Y las "cosas" que debe hacer en este caso es simplemente actualizar el texto del
botón en consecuencia, así:
ppbutton.título = “pausa”;
ppbutton.innerHTML = “pausa”;
}, falso);
video.addEventListener('pausar', function() {
ppbutton.título = “reproducir”;
ppbutton.innerHTML = “reproducir”;
}, falso);
Ahora, si usa los controles predeterminados del navegador para reproducir/pausar el video, sus
controles personalizados seguirán mostrando los valores correctos.
Debido a que ahora agregó la actualización de los valores de los botones a los detectores
de eventos, ya no necesita hacerlo en elalternarReproducir()función; ahora sucederá
automáticamente cuando se genere el evento. EntoncesalternarReproducir()ahora se ve así:
función alternarReproducir() {
if (video.pausado || video.finalizado) {
if (video.finalizado) video.currentTime = 0;
video.reproducir();
}
demás {
video.pausa();
}
}
También necesita agregar un detector de eventos para elterminadoevento para que pueda actualizar
correctamente los botones cuando la reproducción de video finaliza normalmente. Hazlo así:
video.addEventListener('finalizado', function() { this.pause(); }, false);

Elestaen cuestión en la línea de código anterior es el video, y llamando
pausa()simplemente hace una pausa en el video, lo que a su vez aumentará lapausaevento. Luego, el
botón Reproducir/Pausa se actualizará en consecuencia a través del oyente que ya ha agregado para
elpausaevento.
Esta misma lógica se aplica a todos los controles predeterminados que verá en el
navegador, porque su código también deberá escucharlos todos y actuar en
consecuencia. Agregará detectores de eventos y actuará sobre ellos en el resto de los
ejemplos de este capítulo.
A continuación, debe controlar el volumen y silenciar.
AÑADIR BOTONES DE VOLUMEN Y MUTE
Al igual que con los botones Reproducir/Pausar y Detener, el principio de agregar botones de Volumen y
Silencio es el mismo:
- Agregar botones HTML
- Cree funciones de JavaScript para interactuar con el video a través de la API
- Agregue las funciones de JavaScript al botón HTMLal hacer clicevento
- Agregue eventos apropiados para capturar el comportamiento del control predeterminado (si es necesario)
Entonces, una vez más, agregará nuevos botones, nada especial por el momento,
solo tres botones simples, uno para aumentar y disminuir el volumen, y también para
silenciar/reactivar el sonido:
<button id=”bajar volumen” title=”-”>-</button>

<button id=”subir volumen” title=”+”>+</button>
<button id=”mute” title=”mute”>silencio</button>
NOTA: Podrías usar el nuevo HTML5rangoelemento para el volumen

controles, lo cual es ideal para una funcionalidad como esta. Sin embargo, no
todos los navegadores actualmente admiten este elemento; Opera, Chrome y Safari
son los únicos que lo hacen. Por lo tanto, los botones se utilizan en el ejemplo.

Ahora necesita definir esas funciones, una para cambiar el volumen y otra
para silenciar:
función cambiarVolumen(dirección) {
var volumen = Matemáticas.piso(video.volumen * 10) / 10;
video.silenciado = falso;
si (dirección == “-”) {
if (volumen <= 0.1) video.volumen = 0;
más video.volumen -= 0.1;
}
demás {
if (volumen >= 0.9) video.volumen = 1;

más video.volumen += 0.1;
}
}
Miremos acambiarVolumen() fiprimero

Primero toma la configuración de volumen actual del video a través del videovolumen
atributo, y luego redondearlo hacia abajo al lugar decimal más cercano usando JavaScript
Matemáticas.piso()función. A continuación, configura el vídeoapagadoatribuya a "falso" (no
tiene que hacer esto, pero si alguien está cambiando el volumen, esa persona probablemente
quiera activar el video automáticamente si está silenciado).
Luego revisas eldirecciónparámetro pasado por la llamada del botón a
cambiarVolumen()para ver si se debe disminuir o aumentar el volumen. Un “-” indica
una disminución y un “+” indica un aumento. Si es una disminución, verifica si el
volumen actual ya es inferior a 0.1 (disminuye y aumenta el volumen en pasos de
0.1), y si es así, simplemente configura el video.volumenatributo a 0. De lo
contrario, disminuye el volumen en 0,1. Casi lo contrario ocurre con un aumento
de volumen; 1 es el valor más alto.

Ahora defines una función, alternar silenciar(), para alternar el estado de silencio del video:
función alternar silenciar () {
var mute = document.getElementById(“mute”);

si (video.silenciado) {
mudo.título = “mudo”;
mudo.innerHTML = “mudo”;
video.silenciado = falso;
}
demás {
mute.title = "no silenciar";
mute.innerHTML = "no silenciar";
video.silenciado = verdadero;
}
}
Como puede ver en el código anterior, primero debe obtener una referencia al objeto del
botón de silencio para poder usarlo, ya que, al igual que con el botón Reproducir/Pausar,
debe cambiar el texto y el valor.
Luego revisas los videos apagadoatributo para ver si ya está silenciado. Si es así, cambie el
valor del botón a "silenciar" y configure el videoapagadoatribuye a "falso". De lo contrario,
establezca el valor y el título del botón en "no silenciar" y configure el video
apagadoatribuir a "verdadero".
Ahora necesita agregar las funciones a su botón apropiado al hacer cliceventos:
<button id=”volumeDown” title=”-” onclick=”changeVolume('-')”>- pags

</botón>
<button id=”subir volumen” title=”+” onclick=”cambiarVolumen('+')”>+
pags</botón>
<button id=”mute” title=”mute” onclick=”toggleMute()”>silencio</button>
106 CAPÍTULO 5API DE JAVASCRIPT Y CONTROLES PERSONALIZADOS

FIGURA 5.4 ¡El reproductor de video
ahora ha agregado la funcionalidad
de control de sonido!
En este caso, no necesita escuchar ningún evento a menos que esté actualizando una
visualización de los controles actuales del reproductor. Si desea reaccionar a los cambios de
volumen, puede agregar un oyente para elcambio de volumenevento, que se genera cuando se
cambian los valores de volumen o silencio.
Los botones están terminados. Su reproductor ahora tiene tres botones de trabajo más (
Figura 5.4), y son completamente funcionales.
Suficiente con los botones por el momento. ¿Cómo puedes mostrar a tus usuarios cuánto
del video han visto? Para eso necesitas una barra de progreso.
AGREGAR UNA BARRA DE PROGRESO
Para agregar una barra de progreso, nuevamente debe agregar el HTML primero:
<div id=”barra de progreso”><span id=”reproducido”></span></div>
NOTA: Idealmente, el nuevo HTML5Progresose usaría para agregar una barra de

progreso. Desafortunadamente, actualmente solo es compatible con Opera y Chrome,
por lo que un simpledivisióny lapsoen su lugar se utiliza la combinación.

muestra una barra de progreso que
actualmente no hace nada.
Además, también debe diseñarlo con un poco de CSS simple para que funcione
visualmente:
# barra de progreso {
borde: 1px sólido #aaa;

color:#fff;
ancho: 295px;
altura: 20px;
}
# jugó {
color de fondo:#aaa;
altura: 20px;
pantalla: bloque en línea;
El ancho y la altura son bastante arbitrarios, pero eso no importa en este momento
porque puede diseñar la barra de progreso como lo desee. Con este código, ahora tiene
una barra de progreso cruda (Figura 5.5).
Básicamente, lo que hará a continuación es aumentar el ancho porcentual de lalapso jugado
dentro debarra de progreso divmientras se reproduce el video.
Usted define una función llamadaprogreso de actualización(),que usará para capturar el

videotiempo actualconfiguración y aumentar el ancho de la jugadalapsorespectivamente:

y su barra de progreso de trabajo.
¡Hurra!
función actualizarProgreso() {
valor variable = 0;
if (video.horaActual > 0) {
valor = Matemáticas.piso((100 / video.duración) *
pagsvideo.horaActual);
}
document.getElementById(“reproducido”).style.width = valor + “%”;
La función calcula el porcentaje del video reproducido utilizando la duración total del video en
comparación con eltiempo actual (que es en qué parte del tiempo completo del video se encuentra
actualmente).
Por supuesto, para que la barra de progreso funcione, debe escuchar un evento que le
indique cuándotiempo actualha cambiado para que pueda llamar alprogreso de actualización()
y actualizar la barra de progreso, en este caso, elactualización de tiempoevento:
video.addEventListener('timeupdate', updateProgress, false);
Y eso es. Reproducir el video aumentará laactualización de tiempoevento mientras se

reproduce, que a su vez llamará alprogreso de actualización()función que actualizará la barra de
progreso.
Su reproductor de video ligeramente mejor que el promedio ahora tiene una barra de progreso en
funcionamiento (Figura 5.6)!
Para hacer que este simple reproductor de video sea aún más útil, ¿por qué no agregar botones de
avance rápido y rebobinado?

AÑADIR BOTONES DE AVANCE RÁPIDO Y RETROCESO
Sí, me temo que ha vuelto a agregar botones. Pero ya eres un experto en agregarlos, así
que no tendré que decirte qué hacer hasta que llegues a la etapa de JavaScript.
Definamos los botones y agreguemos los nombres de función para elal hacer clic
eventos porque ahora sabes qué es qué:
<button id=”rebobinar” title=”retroceder” onclick=”cambiarVelocidad de

reproducción('-');” >«</botón>
<button id=”ffwd” title=”avance rápido” onclick=”changePlaybackSp

eed('+');” >»</botón>
Usará las entidades HTML «y »para imitar los símbolos típicos que se
encuentran en dichos botones: « y » respectivamente.
Observe que el nombre de la función que definirá escambiar la velocidad de
reproducción (). El atributo que cambiará para que esto funcione es eltasa de reproducción
atributo que encontró en la Tabla 5.1.
Sin embargo, hay una advertencia: actualmente, solo los navegadores basados en
WebKit, Safari y Chrome, admiten eltasa de reproducciónatributo. Por lo tanto, la única forma
en que puede imitar la funcionalidad prevista en otros navegadores es alterar el video
tiempo actualatributo, moviéndolo hacia adelante o hacia atrás:
cambio de función Velocidad de reproducción (dirección) {
if (video.playbackRate != indefinido) {
if (dirección == “-”) video.playbackRate -= 1;
else video.playbackRate += 1;
}
demás {
if (dirección == “-”) video.currentTime -= 1;

else video.tiempoActual += 1;
}
}

FIGURA 5.7Su reproductor de video completamente funcional pero bastante soso FIGURA 5.8Una versión estilizada del reproductor de video
que realmente podría funcionar con un poco de amor por CSS. hace que realmente se vea bien.
Sivideo.playbackRateestá definido, usted marca eldirecciónparámetro pasado, nuevamente

"-" para retroceder y "+" para avanzar, y disminuir o aumentartasa de reproducción
respectivamente. Si eltasa de reproducciónes 0, el video se pausa efectivamente y la reproducción se
detiene. De lo contrario, mueves el videotiempo actualhacia atrás o hacia adelante por 1.
PROPINA:Aunque Safari y Chrome admiten latasa de reproducciónatributo, funcionan de

diferentes maneras. Ambos admiten el incremento del parámetro para avanzar
rápidamente, pero Chrome no admite el rebobinado. Safari, por otro lado, comienza a
reproducir el video al revés, desde el principio.
Su reproductor multimedia simple pero un poco más impresionante de lo que era al comienzo del
capítulo ahora tiene un conjunto completo de botones bastante grises pero funcionales y una barra de
progreso funcional (Figura 5.7).
Con un poco de póquer jiggery con CSS, puede diseñar el jugador a su

gusto y lograr lo que ve en Figura 5.8 o tal vez algo mejor.
Justo cuando pensabas que habías terminado con este sencillo reproductor multimedia, harás
una última adición para aumentar su genialidad: la funcionalidad de búsqueda de la barra de
progreso.
NOTA: El código para este reproductor con estilo y para el

reproductor sin estilo está disponible en el sitio web en
www.html5multimedia.com.

AÑADIR UNA BARRA DE BUSQUEDA
La funcionalidad de búsqueda de la barra de progreso permite a los usuarios hacer clic en cualquier
parte de la barra de progreso para mover el video a ese punto. No se necesita HTML nuevo para esto;
todo lo que necesita hacer para agregar esta funcionalidad está en JavaScript. Solo necesita agregar
un detector de eventos y dos funciones.

Debido a que la interacción se realizará a través de un mouse, debe agregar un detector de
eventos para el ratón arriba evento (que se genera cuando un usuario suelta el botón del mouse al
final de un clic) a la barra de progreso:
var barra de progreso = document.getElementById(“barra de progreso”);
ProgressBar.addEventListener(“mouseup”, function(e)
pags{setPlayPosition(e.pageX); }, falso);
Este código indica que elestablecerPosiciónJuego()función (que toma un

parámetro, elX-coordenada de la posición del ratón en el momento del clic) se
llama cuandoratón arriba es elevado.
Definir elestablecerPosiciónJuego()funcionan como:
función establecerPosiciónJuego(x) {
var value = (x - findPos(progressBar)).toFixed(2);

var timeToSet = ((video.duration /
pagsbarra de progreso.ancho de desplazamiento).toFixed(2) * valor).toFixed(2);
video.currentTime = timeToSet;
}

ElestablecerPosiciónJuego()la función es donde todo sucede. Defina un identificador para la
barra de progreso y luego establezca una variablevalorbasado en elX-coordenada de la
posición del mouse en el momento del clic, menos la posición real de la barra de progreso en
la página web (obtenida a través de laencontrarPos()función), con dos decimales:
encontrarPos()Se define como:
function buscarPos(obj) {
var curva izquierda = 0;
if (obj.offsetParent) {
do { curleft += obj.offsetLeft; } mientras
pags(obj = obj.offsetParent);
}
curva de retorno;
}
NOTA: ElencontrarPos()encuentra la posición real de un elemento HTML,
teniendo en cuenta la posición de sus padres. Puede leer más sobre el
código detrás de él en www.quirksmode.org/js/findpos.html.
tu calculas elvalorvariable a través de laencontrarPos()para obtener una lectura más precisa

de la posición del mouse, ya que tiene en cuenta la posición de desplazamiento de la barra de
progreso.
A continuación, defina eltiempo para establecervariable, que será el valor de tiempo real
en el que se configurará el video. Calcula esta variable tomando la duración total del video y
dividiéndola por el ancho de la barra de progreso. El cálculo resultante equivale
aproximadamente a la posición de píxel por unidad de tiempo de video, que luego se
multiplica porvalor. Todos los resultados se obtienen con dos decimales.
A continuación, configura el vídeo tiempo actualvariable a este nuevo valor de tiempo. Ahora, cuando un
usuario haga clic en la barra de progreso, el video se moverá a esa posición y la reproducción continuará
o comenzará desde allí.
El reproductor que acaba de crear es, por supuesto, solo HTML5, y para los navegadores que no
admiten HTML5, como Internet Explorer 6 a 8, el reproductor no funcionará. Entonces, ¿cómo puede
hacerlo compatible con dichos navegadores? Eso es lo que aprenderás a continuación.

NAVEGADORES NO HTML5
Para que su reproductor sea compatible con navegadores que no sean HTML5, primero
deberá agregar un recurso Flash (como se explica en el Capítulo 4) alvideo para que estos
navegadores lo utilicen. Luego realice una verificación para ver si el navegador admite video
HTML5. Si es así, puede continuar con todo ese elegante JavaScript que agrega controles,
eventos y funciones. Si el navegador no es compatible con video HTML5, ocultará sus controles
personalizados y permitirá que Flash Player maneje la reproducción de video y proporcione
controles de usuario.
Puede verificar la compatibilidad con el navegador de video utilizando la siguiente pieza de
JavaScript:
var v = documento.createElement(“video”);
si (v.jugar) {
/* ...el navegador soporta video HTML5...*/
}
demás {
/*...el navegador no soporta video HTML5...*/

}
Este código crea un dummyvideo elemento y luego comprueba para ver si eltocar
existe la función. De lo contrario, el navegador no admite la reproducción de video.

MODERNIZAR
También puede verificar la compatibilidad del navegador de video utilizando la muy útil biblioteca de detección Modernizr
(www.modernizr.com), que le permite simplemente escribir:
si (Modernizr.video) {
/* ...el navegador soporta video HTML5...*/
}
demás {
/*...el navegador no soporta video HTML5...*/

}
Además, Modernizr le permite verificar la compatibilidad del navegador con una multitud de otros elementos, funciones y
capacidades de HTML5, así como verificar la compatibilidad con CSS3.
ENVASEARRIBA
Ahora está familiarizado con la mayoría de los atributos, eventos y métodos de la API JavaScript de
medios de HTML5 y para qué se pueden utilizar. Aprendió a usarlos para crear un reproductor de
video HTML5 simple con controles personalizados que también reacciona a los cambios en la
reproducción de video de otras fuentes a través de eventos.

Por supuesto, eso no es todo lo que puede hacer con la API y su reproductor de video, que
después de todo es bastante simple y básico. Puede ir más allá y agregar una lista de reproducción
que cargue videos en el reproductor según la selección del usuario de una lista. Pero esa función está
fuera del alcance de su reproductor multimedia simple.

Diseñó la versión final de su reproductor multimedia mínimo (Figura 5.8) a través de CSS,
que fue simplemente un caso de agregar el estilo a los elementos HTML estándar que usó
para construir su conjunto de control: div, botón, y lapso. El siguiente capítulo muestra cómo
puede usar CSS para diseñar los elementos multimedia reales.
TERMINANDO115
6
ESTILO MEDIOS DE COMUNICACIÓN
ELEMENTOS CON CSS

Porque el audioy video elementos como
elementos HTML válidos, puede tratarlos de
la misma manera que otros elementos, como
div, encabezado, artículo, y sección. Esto, por supuesto, significa que el audioy
video los elementos se pueden diseñar a través de CSS.
Ya no necesita obtener un reproductor Flash que tenga los colores correctos o
similares para que el reproductor encaje con el esquema de colores de su sitio
web (bueno, excepto para los navegadores que no son HTML5, por supuesto).
Ahora puede ponerse su sombrero CSS y usar sus habilidades para hacer que
estos elementos se vean como usted quiere.
Además de las declaraciones CSS habituales con las que está
familiarizado, han surgido varias nuevas con la llegada de CSS3, la
última versión de CSS. En este capítulo, aprenderá algunas de las
propiedades y técnicas CSS más útiles que puede aplicar a los
elementos multimedia. También aprenderá sobre las reglas CSS
prefijadas del proveedor del navegador y por qué son necesarias.
117
SIMPLEESTILO CSS
FIGURA 6.1Algunos estilos simples

de CSS pueden hacer que el video
sea más agradable estéticamente.
Las hojas de estilo en cascada (CSS) es un lenguaje que se utiliza para describir la presentación
de un documento escrito en un lenguaje de marcado, en este caso HTML5. CSS básicamente
separa el contenido del documento del estilo del documento, que incluye colores, imágenes
de fondo, fuentes y posicionamiento.
Un estudio completo y completo de CSS, su sintaxis y sus propiedades está
fuera del alcance de este libro. Si es nuevo en CSS, consulte los numerosos libros y
recursos en línea disponibles para familiarizarse con el concepto.
Antes de sumergirnos en estilos más avanzados, primero veamos algunos ejemplos simples de
cómo puede usar CSS básico para diseñar el aspecto de unvideo elemento.
Para comenzar, tomemos un video, démosle un borde blanco grande y céntrelo en el

medio de un documento web (Figura 6.1).
El código del video no es nada que no hayas visto antes:
<controles de video precargados=”metadatos”>
<fuente src=”parrots-small.mp4” type=”video/mp4”>

<fuente src=”parrots-small.webm” type=”video/webm”>
</vídeo>
El CSS básico que se utiliza para lograr el estilo es el siguiente:
cuerpo {
color de fondo:#262626;
margen: 0 automático;
alineación de texto: centro;
118CAPÍTULO 6ESTILIZAR ELEMENTOS DE MEDIOS CON CSS

video {
margen superior: 100px;
borde: 20px sólido #fff;

}
El cuerpo tiene un color de fondo de #262626 (una especie de carbón), y su contenido está
alineado en el centro. Elvideo El elemento tiene un borde blanco grueso de 20 píxeles y se
coloca a 100 píxeles de la parte superior de la página. Esto mejora el aspecto general del
video.
NOTA: Puedes usarmargen: 0 automático;sobre el
video elemento si desea centrar videos dentro de
contenido diferentedivisióncolumnas
Si desea agregar un título en la parte superior del video, puede usar el método habitual
de posicionamiento relativo e índices z para asegurarse de que el título se coloque donde lo
desea. El siguiente HTML define un contenedor simpledivisión,adivisiónque contiene el título, y
luego elvideo elemento:
<div class=”contenedor”>
<div class=”title”>Loros</div>

</vídeo>
</div>
El contenedordivisiónsimplemente se utiliza para encerrar el títulodivisióny elvideo

dentro de un cierto ancho:
. envase {
ancho: 340px;
ESTILO CSS SENCILLO119

A continuación, diseñas el título.división,dándole unas dimensiones determinadas, aplicando un
color de fondo, centrando el texto y transformando el texto a mayúsculas. Démosle también una
posición relativa y definamos el índice z como 2:
. título {
ancho: 200px;
altura: 30px;
índice z: 2;
posición: relativa;
margen: 10px automático;
borde: 1px sólido #262626;

transformación de texto: mayúsculas;
alineación de texto: centro;
Luego dale unas dimensiones al video, una posición derelativo,y uníndice z

de 1 (menor que el del títulodivisiónpor lo que se colocará detrás de él). Aplique un margen negativo
en la parte superior para colocarlo debajo del título.división,y luego céntrelo horizontalmente dentro
delcontenedor div (mediante elautoajuste):
video {
margen:-35px automático;
ancho: 305px;
altura: 152px;
borde: 20px sólido #fff;
índice z: 1;
}

FIGURA 6.2Un títulodivisiónse coloca encima de lavideo elemento. FIGURA 6.3El video con un fondo blanco.
El resultado se muestra enFigura 6.2.

Si necesita definir unvideo elemento que es más grande que el video que contiene (p. ej.,
se pueden cargar videos de diferentes tamaños en el elemento), el video podría tener formato
de formato letterbox. Puede aplicar un color de fondo a lavideo elemento, que luego llenará el
espacio vacío:
video {
margen: 20px;
color de fondo:#fff;
ancho: 305px;
altura: 200px;
}
Aquí el color de fondo se define como #fff (blanco), y el resultado se muestra

enFigura 6.3.
Los ejemplos anteriores no fueron nada espectaculares y relativamente fáciles. Sin
embargo, muestran que puede manipular y diseñar elvideo elemento de la misma manera que
cualquier otro elemento HTML utilizando el conocimiento de CSS que ya tiene.
Lo siguiente son algunos ejemplos específicos de CSS3.
ESTILO CSS SENCILLO121

AVANZADOSILENCIO
CON CSS3
CSS3, la última versión de CSS que surgió, tiene una gran cantidad de nuevas reglas y
propiedades que su predecesor, CSS2.1, no tenía. Y puede usar estas nuevas características
para diseñar elementos HTML al contenido de su corazón.
Un estudio y una lista de estas reglas y propiedades están fuera del alcance de este libro,
pero puede ver la especificación en www.w3.org/TR/CSS.
Algunas de las propiedades más interesantes que agregan nuevas funcionalidades se analizan
en las siguientes secciones y, como de costumbre, contienen ejemplos completos.
PROPINA:Dos fantásticos recursos para CSS3 y ejemplos de cómo

puede usar sus diversas partes son CSS3.info en http://www.css3.info y
Dev.Opera en http://dev.opera.com/articles/css.
OPACIDAD
Puede, si lo desea, hacer que su video sea transparente usando el CSS3opacidad

propiedad. Esta propiedad toma un valor entre 0 y 1; 0 es invisible y 1 es opaco:
video {
opacidad: 0,5;
Esta pieza de CSS hace que el video sea 50 por ciento transparente (Figura 6.4). Luego,
puede llevar el video al 100 por ciento de opacidad al pasar el mouse usando lo siguiente:
vídeo: pasar el cursor {
opacidad: 1;
Opacity funciona en las últimas versiones de Firefox, Opera, Internet Explorer y Safari.
Chrome hace que los controles de video sean transparentes pero no el video.

FIGURA 6.4Este video es 50
por ciento transparente en
Firefox 5.
DEGRADADO
Otra nueva incorporación a CSS3 es la capacidad de definir un degradado (mezcla de un color

con otro) como imagen de fondo de un elemento. La especificación de degradados hace uso
de otra propiedad de CSS3,rgbdefiniciones de color
Anteriormente en CSS, los colores se podían definir a través de nombres comunes (p. ej.,
blanco),códigos hexadecimales de color (p. ej., #ffffff),oRGBdefiniciones de color donde se

definen los valores individuales de rojo, verde y azul del color (p. ej.,rgb(255,255,255)). Por
supuesto, estas definiciones de color siguen siendo completamente válidas en CSS3, pero
también puede usar una nueva regla,rgba.Similar argb, rgbtambién le permite definir el canal
alfa, es decir, el valor de opacidad del color además de los valores rojo, verde y azul. Por
ejemplo, una definición dergba(255,255,255,0.5)define un color blanco con un 50 por ciento de
opacidad. Los degradados hacen uso de esto como verá a continuación.
También puede usar un degradado con un video, pero no puede aplicarlo al elemento real
porque, como imagen de fondo, el video siempre estaría correctamente en la parte superior y,
por lo tanto, ocultaría la mayor parte o la totalidad del fondo. Sin embargo, puede agregar el
degradado a undivisiónque luego colocas encima del video elemento como este:

</vídeo>
<div class=”gradiente”></div>
Luego dale al video una posición relativa y un índice z de 1. Dar el degradado

divisiónuna posición relativa, las mismas dimensiones que el video y una índice z de 2 (por lo que
permanece en la parte superior de la video elemento), y aplicar el degradado:
EXCELENCIA AVANZADA CON CSS3 123

. degradado {
ancho: 305px;
altura: 152px;
margen:-187px 30px 30px;
índice z: 2;
imagen de fondo: -webkit-linear-gradient(
cima,
rgba(255,255,255,0),
rgba(255,255,255,1)
);
imagen de fondo: -moz-linear-gradient(
cima,
rgba(255,255,255,0),
rgba(255,255,255,1)
);
imagen de fondo: -o-linear-gradient(
cima,
rgba(255,255,255,0),
rgba(255,255,255,1)
);
imagen de fondo: degradado lineal (
cima,
rgba(255,255,255,0),
rgba(255,255,255,1)
);
}

FIGURA 6.5El video con el degradado aplicado en Firefox 5 (izquierda) y Chrome 13 (derecha).
Los colores degradados se definen utilizando el nuevo CSS3rgbregla de establecimiento

de color mencionada anteriormente. Las definiciones de color utilizadas en el ejemplo anterior
tienen el color "desde" definido con una opacidad de 0 (transparente), y el color "hasta" se
define con una opacidad de 1 (opaco).
Observe que hay cuatro definiciones diferentes para el gradiente: una con el
-mozprefijo (específico de Mozilla Firefox), uno con -webkit (Específico del navegador WebKit;
Safari y Chrome), uno con –o (Opera), y uno sin ningún prefijo específico del navegador, que
es la definición de CSS3, pero es posible que aún no sea compatible.
PROPINA:Siempre es una buena idea proporcionar definiciones de CSS específicas del
navegador (si existen), así como la versión de especificación real para garantizar que todos
los navegadores que sean capaces de usar la regla de estilo lo hagan.
Las definiciones generalmente toman el formato:
posición, degradado de color, degradado a color
Puedes ver cómo se ve el degradado enFigura 6.5. Tenga en cuenta que los controles están
cubiertos y no se pueden usar, por lo que debe implementarlos a través de la API de JavaScript, como
se describe en el Capítulo 5.
Gradiente funciona en Firefox, Chrome y Safari.
NOTA: Puede hacer más con las reglas de gradiente lineal de CSS3 de lo que se
muestra en los ejemplos, pero cualquier explicación adicional está fuera del
alcance de este libro. Puede leer más sobre los gradientes lineales de CSS3 en
http://dev.opera.com/articles/view/css3-linear-gradients.

FIGURA 6.6Un elemento de video con
hermosas esquinas redondeadas.
ESQUINAS REDONDEADAS
Las esquinas redondeadas alguna vez fueron la ruina de la vida del desarrollador web, con
muchas horas dedicadas a manipular imágenes de fondo para agregar esquinas redondeadas
a un elemento HTML. Ese dolor se alivia en CSS3 con la adición deborde-radio,que te permite
agregar esquinas redondeadas a cualquier elemento HTML, y eso incluye los elementos
multimedia:
video {
- moz-border-radio:20px;
- webkit-border-radio:20px;
borde-radio: 20px;
}
Una vez más, hay una serie de definiciones específicas del navegador, pero cada una le da al
elemento un radio de esquina redondeada de 20 píxeles (Figura 6.6).
Por el momento, las esquinas redondeadas de los elementos multimedia actualmente solo funcionan en
Firefox.
SOMBRA
Junto con las esquinas redondeadas, agregar una sombra a un elemento HTML es otra
tarea común de los desarrolladores web. Una vez mas. CSS3 viene al rescate y lo agrega
a la especificación.
Usando el siguiente código, puede agregar un color de sombra de #999a los 10 píxeles en
la parte inferior derecha del video con una extensión de 5 píxeles:

FIGURA 6.7Un video con una
sombra paralela en Chrome 13.
video {
- moz-caja-sombra: 10px 10px 5px #999;
- webkit-caja-sombra: 10px 10px 5px #999;

sombra de caja: 10px 10px 5px #999;
El resultado se muestra enFigura 6.7.
REDONDEADOESQUINASMÁSSOMBRA
Combinando esquinas redondeadas con sombra y aplicándolas a unvideo El elemento tiene un efecto extraño en todos los
navegadores que no sean Firefox.
Firefox presenta las propiedades correctamente, pero otros navegadores ignoran las esquinas redondeadas en elvideo
elemento y en su lugar mostrar las esquinas redondeadas en la sombra (Figura 6.8)!
FIGURA 6.8El video con esquinas redondeadas y una sombra proyectada en Firefox (izquierda) y luego en Chrome (derecha).

FIGURA 6.9Los controles de audio se

muestran con esquinas redondeadas y
una sombra paralela en Firefox.
No solo puede aplicar una sombra paralela y esquinas redondeadas alvideo

elemento, pero también puede aplicarlos a laaudioelemento:

</audio>
Estaaudioentonces el elemento se diseña así:
sonido {
borde-radio: 10px;
caja-sombra:10px 10px 5px #888;
El precedenteaudioejemplo de elemento se muestra mejor en Firefox (Figura 6.9);

otros navegadores no aplican las esquinas redondeadas alaudioelemento.
DIMENSIONANDO SU CONTENIDO
Dos nuevas propiedades en la especificación CSS3 le permiten especificar cómo se incluye el

contenido reemplazado dentro de los elementos reemplazados, como imágenes y videos. Es
posible que desee que el contenido de su video ocupe un espacio de ciertas dimensiones,
pero que se mantenga la relación de aspecto en lugar de estirar o aplastar el contenido. Del
mismo modo, es posible que desee que el contenido del video se aplaste o estire. Las dos
propiedades que le permiten definir cómo desea que se represente el contenido del video son
lasajuste de objetoyposición del objetopropiedades

AJUSTE A OBJETO
ajuste de objetoespecifica cómo se debe escalar el elemento en relación con el

contenedor, usando su alto y ancho.ajuste de objetopuede tener varios valores:
- llenar El contenido llena el recipiente.
- Contiene El contenido llena el contenedor y se mantiene la relación de

aspecto del elemento multimedia.
- cubrir El contenido llena el recipiente por completo.
- ninguna El contenido llena todo el contenedor independientemente de la relación
de aspecto, por lo que puede ocurrir algo de estiramiento.
- reducción de escala Aplicar cualquiera deningunaoContieneresultaría en un tamaño

más pequeño.
Es bastante difícil entender lo que cadaajuste de objetovalor significa sin ver

realmente su resultado. Así que veamos un ejemplo de todos ellos usando cinco videos:
<id de vídeo=”v1” ancho=”200” altura=”200” precarga=”metadatos”>
<fuente src=”parrots-tiny.mp4” type=”video/mp4”>

</vídeo>

</vídeo>

</vídeo>
EXCELENCIA AVANZADA CON CSS3129

</vídeo>

</vídeo>
Dale estilo a los videos así:
video {
margen inferior: 10px;
}
vídeo#v1 {
- o-objeto-ajuste:ninguno;
}
vídeo#v2 {
- o-objeto-encajar:contener;
}
vídeo#v3 {
- o-objeto-encajar:cubierta;
}
vídeo#v4 {
- o-objeto-encajar:llenar;
}
vídeo#v5 {
- o-objeto-ajuste:reducción de escala;

FIGURA 6.10Elvideoelemento utiliza elajuste FIGURA 6.11Elvideousos de los elementos FIGURA 6.12Elvideousos de los elementos
de objeto: rellenoajuste para encerrar el elajuste de objeto: contieneajuste a elajuste de objeto: cubiertaajuste a
contenido. encierra el contenido. encierra el contenido.
FIGURA 6.13Elvideoelemento utiliza elajuste FIGURA 6.14Elvideousos de los elementos

de objeto: ningunoajuste para encerrar el elajuste de objeto: reducción de escalaajuste a
contenido. encierra el contenido.
Figuras 6.10mediante6.14muestra cómo el código anterior muestra los videos en

Opera 11.50.
Por cierto, este método de posicionamiento de objetos actualmente solo funciona en
Opera y necesita usar la propiedad específica de Operao-objeto-ajuste.

OBJETO-POSICIÓN
posición del objetoindica la alineación del elemento dentro del contenedor. Esta regla
CSS toma los mismos valores que la conocidaposición de fondopropiedad y se usa de la
misma manera para definir dónde se debe colocar el elemento.
Usando cuatro de las definiciones de video anteriores, puede colocarlas de la siguiente manera:
<id de vídeo=”v1” precarga=”metadatos”>

<fuente src=”parrots-tiny.webm” type=”video/webm”>
</vídeo>

</vídeo>

</vídeo>

</vídeo>

Diseñe los videos de la siguiente manera pero con un diferente:o-posición-del-objetoRegla CSS
definida para cada video:
video {
margen inferior: 10px;
ancho: 300px;
altura: 180px;
- o-objeto-ajuste:ninguno;
}
vídeo#v1 {
- o-posición-del-objeto:arriba a la izquierda;
}
vídeo#v2 {
- posición del objeto o: centro derecho;
}
vídeo#v3 {
- o-posición-del-objeto:abajo a la derecha;
}
vídeo#v4 {
- o-posición-objeto:centro;
}
Ahora ha definido cuatro videos, cada uno con un borde y dimensiones especificadas pero con
diferentes configuraciones paraposición del objeto.
NOTA:Elposición del objetoActualmente, la propiedad solo se admite en Opera, que

requiere el navegador específico-o-posición-del-objetopropiedad.

FIGURA 6.15El contenido del video se coloca usando FIGURA 6.16El contenido del video se coloca usando
posición del objeto: arriba a la izquierda. posición del objeto: centro derecho.
FIGURA 6.17El contenido del video se coloca usando FIGURA 6.18El contenido del video se coloca usando
posición del objeto: abajo a la derecha. posición del objeto: centro.
Figuras 6.15mediante6.18muestra cómo se renderiza cada uno de los videos en Opera

11.50. Puede aplicar y utilizar varias reglas CSS3 con elvideoelemento. Los discutidos en
esta sección solo le dan una idea de lo que está disponible para usted. Se le anima a explorar
a los demás por su cuenta.
Algunas configuraciones específicas de WebKit no son parte de la especificación CSS3, pero
existen y hacen algunas cosas geniales. Veremos algunos de ellos a continuación.
PROPINA:Puedes leer más sobre elajuste de

objeto yposición del objetoPropiedades de CSS3 en
http://dev.w3.org/csswg/css3-images/#object-fit y http://
dev.w3.org/csswg/css3-images/#object-position.

ESPECÍFICO PARA WEBKITREGLAS CSS3
FIGURA 6.19Un video en reproducción

automática reflejado debajo de sí mismo
en Chrome 13.
Vale la pena mirar dos divertidas propiedades específicas de WebKit:reflejarymáscara. Se espera que
se conviertan en parte de una especificación más amplia. Incluso si no lo hacen, ahora puede
sorprender a los usuarios de su navegador WebKit con los efectos que producen.
REFLEJAR
El -webkit-box-reflectLa propiedad le permite especificar un reflejo en un elemento

HTML. Aquí, lo aplicarás a un video:
video {
- webkit-box-reflect:por debajo de 0px;
El fragmento de código corto define un reflejo inmediatamente debajo del video en

cuestión (Figura 6.19). Los controles en el video se han eliminado porque también se
incluirán en el reflejo, lo cual no es lo ideal; en su lugar, debe implementarlos a través
de Media JavaScript API.
REGLAS CSS3 ESPECÍFICAS PARA WEBKIT135

FIGURA 6.20El video se refleja en el lado derecho, a 30 píxeles de distancia, en Chrome 13.
También podría reflejar el video 30 píxeles a la derecha (Figura 6.20).
video {
- webkit-box-reflect:derecha 30px;
}
MÁSCARA
También puede agregar una máscara sobre el video usando el -webkit-mask-box-imagen

propiedad. Para hacer esto, debe crear una imagen de máscara, que debe tener las mismas
dimensiones que el video. La máscara también debe ser transparente donde desea ocultar el
video y opaca donde desea que se muestre el video.
NOTA:Chrome 13 requiere que la máscara de imagen sea opaca donde

desea ocultar el video y transparente donde desea que se muestre el
video. Este también era un requisito en Safari 5.0.5, pero se modificó
recientemente en la versión 5.1.
Luego, simplemente asigna la URL de esa imagen a la -webkit-mask-box-imagen

propiedad dentro de lavideoconjunto de reglas CSS del elemento y proporciona un color de fondo
que llenará las áreas opacas de la imagen de la máscara:
video {
- webkit-mask-box-image:url('oval-mask.png');
color de fondo:#262626;
}

FIGURA 6.21 Un video escondido detrás de una imagen de máscara en Safari 5.1 (izquierda); usando la misma imagen de máscara en Chrome 13 (centro); y usando una imagen de
enmascaramiento invertida en Chrome 13 (derecha).
Este ejemplo utiliza una imagen de máscara simple en forma de óvalo; el área ovalada es
donde debe aparecer el video (Figura 6.21).
Si los controles están ocultos o parcialmente ocultos detrás de la imagen de la máscara, serán
inaccesibles; por lo tanto, debe eliminar el conjunto de control predeterminado e implementarlo a
través de JavaScript.
Si quisiera que los usuarios vieran un video a través de una imagen en particular para obtener un efecto
adicional, por ejemplo, para ver un video del mar a través de un ojo de buey, podría usar una imagen de
máscara.
Es una pena que el reflejarymáscara las propiedades son específicas de WebKit. Pero
quién sabe; tal vez algún día se estandaricen y se conviertan en la próxima
especificación CSS.
PROPINA:Puede leer más sobre el uso de la reflejarymáscara propiedades en

http://designshack.co.uk/articles/css/mastering-css-reflections-in-webkit.
ENVASEARRIBA
Aprendió cómo puede crear elementos multimedia HTML5 como cualquier otro
elemento HTML dentro de su documento web y cómo diseñarlos y colocarlos de la
misma manera también. Este capítulo solo le ha dado una idea de lo que puede hacer al
diseñar sus elementos. Asegúrese de experimentar con el estilo y ver qué puede
descubrir y qué resultados puede lograr.
También aprendió sobre algunas de las nuevas funciones que vienen con algunas de las últimas
propiedades de CSS3. Pero CSS3 se extiende un poco más. El Capítulo 7 analiza las transiciones, las
transformaciones y la animación en CSS3.
TERMINANDO137
7
TRANSICIONES,
TRANSFORMA,
YANIMACIÓN
Usted sabe que puede usar CSS para darle estilo a sus
elementos multimedia, pero CSS3 proporciona
algunas adiciones nuevas y emocionantes. Nosotros
tres de estas nuevas incorporaciones (transiciones, transformaciones y
animaciones) puede crear mejoras visuales a través de CSS sin necesidad
de ningún JavaScript sofisticado. Debido a que tales características se
consideran de presentación, es ideal que formen parte de CSS.
Este capítulo le presenta brevemente algunos de los aspectos de las
transiciones, transformaciones y animaciones de CSS3. Aprenderá a
usarlos y combinarlos para agregar efectos dinámicos a su diseño.
139
UTILIZANDO TRANSICIONES
Una de las definiciones del diccionario para una transición es un "paso de una forma,
estado, estilo o lugar a otro". Esto es lo mismo con los elementos HTML y
particularmente con el estilo. Es este color o aquel color, colocado en esta posición o en
aquella posición. No hay un estado intermedio; Es uno o el otro. Las transiciones
agregan un estado intermedio entre un estilo, posición o estado y otro.
Por ejemplo, supongamos que tiene un elemento HTML para el que ha definido dimensiones
establecidas y que, al pasar el mouse, desea que ese elemento en particular aumente de tamaño.
Esto es relativamente simple de hacer con el siguiente CSS aplicado a un HTML
imagenelemento:
imagen {
ancho: 183px;
altura: 164px;
}
img: flotar {
ancho: 275px;
altura: 246px;
}
Y aquí está la imagen a la que se aplica el CSS anterior:
<img src=”fútbol-pequeño.jpg” alt=”Fútbol de colores” />
NOTA:Todos los ejemplos de codificación usados en este capítulo

están en línea en www.html5multimedia.com.
Al pasar el cursor sobre esta imagen, saltará de 183 × 164 píxeles de

tamaño a 275 × 246 píxeles y viceversa (al alejar el mouse). La transición entre
los dos estados es inexistente, porque la imagen cambia de un tamaño a otro
instantáneamente (Figura 7.1).
Aquí es donde entran las transiciones CSS. El W3C describe las transiciones de esta manera:
"CSS Transitions permite que los cambios de propiedad en los valores de CSS se produzcan sin problemas
durante un período específico".
140CAPÍTULO 7TRANSICIONES, TRANSFORMACIONES Y ANIMACIÓN

FIGURA 7.1La pelota salta de
tamaño de un estado (A) a
otro (B) al flotar.
Usando el ejemplo anterior, puede agregar untransiciónregla a laimagenelemento para

que aumente gradualmente de tamaño a 275 × 246 píxeles en lugar de saltar de su tamaño
original al nuevo tamaño más grande.
PROPINA:Las transiciones CSS son compatibles con todos los
navegadores principales, aunque debe usar reglas CSS específicas del
navegador para garantizar la compatibilidad.
Para crear esta transición, utilizará algunas de las propiedades de transición enumeradas en
Tabla 7.1.
TABLA 7.1Propiedades de transición de CSS3
NOMBRE DESCRIPCIÓN
propiedad de transición Especifica los nombres de la transición a la que se aplicará la transición (p. ej.,
fondo, color, tamaño de fuente, ninguno, otodo).
duración de la transición Define la cantidad de tiempo en segundos que realmente tomará la transición. un valor de 0s
indica que la transición se llevará a cabo inmediatamente.
función de temporización de transición Especifica la función que se utilizará para calcular los valores intermedios durante la transición. Hay
una serie de valores predefinidos para esta propiedad:facilidad, lineal, facilidad de entrada, facilidad de
salida, facilidad de entrada, ycubic-bezier(), que le permite definir el suyo propio.
transición-retraso Define cuándo comenzará la transición. un valor de0, la configuración predeterminada, hace que la
transición comience inmediatamente.
USO DE TRANSICIONES141
Dado que debe agregar todas las diferentes reglas específicas del proveedor para cada propiedad de
transición especificada, ¡esto puede generar una lista bastante larga! Solo para Mozilla, definir una regla de
transición podría tomar tres líneas:
- moz-transition-property:all;
- moz-transición-duración:1s;
- moz-transition-timing-function:facilidad;
PROPINA:Para obtener una lista de todas las propiedades a las que puede aplicar transiciones, consulte
www.w3.org/TR/css3-transitions/#properties-from-css y para obtener más información sobre las transiciones.
funciones de sincronización de funciones, consulte www.w3.org/TR/css3-transitions/#transition-timing-function.
¡Agregar reglas para los otros tres proveedores más la definición de regla no
específica del proveedor haría que 15 líneas de CSS solo para una transición!
Afortunadamente, puede solucionar esto utilizando la regla abreviada, que le permite
definir las diversas propiedades juntas, por ejemplo:
- moz-transition: todos 1s facilidad;
Entonces, utilizando la información de la regla de transición anterior y proporcionando todas las
diferentes reglas abreviadas específicas del proveedor, puede definir la transición de esta manera:
imagen {
ancho: 183px;
altura: 164px;
- webkit-transition: todos los 1 son sencillos;
- o-transición: todos los 1s facilidad;
- ms-transition: todos los 1s facilidad;
transición: todo 1s facilidad;

A
tu pones eltransiciónregla sobre el estado normal del elemento en cuestión en lugar FIGURA 7.2Aunque tendrá que
de:flotarExpresar. El motivo es que es posible que desee que la transición se aplique a usar su imaginación aquí, la
imagen ahora aumenta
todos los estados de este elemento, como:enfocar. suavemente de un tamaño (A) a
Ahora, la transición entre los dos estados al pasar el mouse es mucho más suave, ya que otro (C) con estados de transición
la imagen cambia gradualmente de un tamaño a otro (Figura 7.2). en el medio (representados por
B).
USO DE TRANSICIONES CON AUDIO Y VIDEO
Debido a que puede aplicar transiciones a cualquier elemento HTML, por supuesto puede usar
transicióncon elaudioyvideoelementos:
video {
ancho: 146px;
altura: 76px;
A
B
C
FIGURA 7.3Al pasar el mouse, el video cambia suavemente de un tamaño (A) a otro (C) con transiciones intermedias (representadas por B).
ancho: 292px;
altura: 152px;
}
Trate de visualizar cómo el video aumenta de tamaño sin problemas de 146 × 76 a

292 × 152 (Figura 7.3).
ESTILO CON TRANSICIONES CSS
Con CSS Transitions, puede diseñar su video de diferentes maneras para crear una mejor
experiencia para sus usuarios. Por ejemplo, suponga que tiene un video que ha diseñado con
una sombra paralela, como esta:

</vídeo>
video {
margen: 100px;

144 CAPÍTULO 7TRANSICIONES, TRANSFORMACIONES Y ANIMACIÓN

FIGURA 7.4 Cuando el usuario se desplaza sobre el video (izquierda), la sombra paralela aumenta suavemente (derecha).
Pero desea aumentar la sombra paralela cuando un usuario pasa el mouse sobre el
video. Nada sofisticado; solo desea agregar una acción de respuesta sutil al usuario.
Definiría el estado de desplazamiento del video y luego agregaría la transición al estado
normal delvideoelemento:
video {
margen: 100px;

}

Ahora la sombra aumenta muy ligeramente en el estado de desplazamiento, creando una

respuesta sutil pero efectiva para el usuario (Figura 7.4).
TRANSICIONES QUE SE DESVANECEN
También puede usar una transición para desvanecer el video de un opacidad valor de 0,5 a 1 en
:flotar y :enfocar. Es posible que desee hacer esto si tiene una lista de videos que se muestran
en la pantalla al mismo tiempo y desea que el video sobre el que el usuario se desplaza y
reproduce se vuelva opaco:
video {
opacidad: 0,5;
- webkit-transition: opacidad 2s lineal;

- moz-transition: opacidad 2s lineal;
- o-transición: opacidad 2s lineal;
- ms-transition: opacidad 2s lineal;
transición: opacidad 2s lineal;
}
video: pasar el mouse, video: enfocar {
opacidad: 1;
Esta vez, la duración aumenta a 2 segundos, y la transición apunta a la

opacidad valor solamente (en lugar de todo, como lo hicieron los ejemplos anteriores) (Figura 7.5).
NOTA:Chrome parece tener problemas con la transición de la opacidad en el

videoelemento; desvanece solo los controles en lugar de todo el elemento.

A FIGURA 7.5 El video comienza con una
opacidad del 50 por ciento (A) a
completamente visible (C) al pasar el
mouse, con una transición en el medio
(representada por B).
Los ejemplos anteriores le dan una idea de lo que puede hacer con las transiciones CSS:
crear nuevos estados para el elemento y realizar una transición a ellos sin problemas.
Pero eso no es todo lo que puedes hacer. También puede aplicar transformaciones
bidimensionales y tridimensionales a elementos HTML.
PROPINA:Puede leer más sobre las transiciones CSS3 en la

especificación en www.w3.org/TR/css3-transitions.
EXPLORADORTRANSFORMACIONES 2D
FIGURA 7.6El video escala por un factor de

1.5 al pasar el mouse, pasando de un
tamaño pequeño (izquierda) a un tamaño
más grande (derecha).
Una transformación se define como cambiar la apariencia o forma de algo. El “algo” en

este caso, por supuesto, es un elemento HTML. Un elemento HTML se coloca en algún
lugar de un documento web y su posición suele estar determinada por las propiedades
y los valores de CSS. Pero es posible que desee transformar el elemento HTML de
alguna manera, ya sea su posición o apariencia, y CSS Transforms le permite hacer esto.
Hay dos tipos de transformaciones CSS, 2D y 3D. Primero echemos un vistazo a las
transformaciones 2D.
Las transformaciones 2D permiten que los elementos se transformen en un espacio

bidimensional. Con CSS 2D Transforms, puede escalar, rotar, sesgar y traducir un
elemento HTML dentro del espacio definido, es decir, el documento web.
ESCALA DE UN VÍDEO
La mejor manera de comenzar a ver las transformaciones 2D es trabajar con un ejemplo simple. Usando el
video de loros coloridos, agregará una transformación de escala para escalar el tamaño del video en el estado
de desplazamiento del video:

</vídeo>
Para agregar la transformación, utiliza eltransformarregla, pero nuevamente, se requieren reglas
específicas del proveedor para garantizar la mejor cobertura del navegador.
Primero debe especificar qué transformación desea utilizar. En este caso,

utilizará elescalatransform, que toma un parámetro que indica la escala por
NOTA:Al igual que las transiciones CSS3, las transformaciones 2D son compatibles con los
navegadores modernos, siempre que use reglas CSS específicas del proveedor.

A B
C
que desea que el elemento se transforme. Un valor mayor que 1 escala hacia arriba; cualquier FIGURA 7.7 La transformación de escala
ahora es mucho más suave y agradable de
valor inferior a 1 se reduce. Los valores funcionan como porcentajes;escala (0.75)
ver a medida que se mueve de un tamaño
indica una escala del 75 por ciento, mientras que escala (1.25) indicaría una escala de 125 por pequeño (A) a un tamaño más grande (C) a
ciento. En este ejemplo, aumentará la escala del video en un valor de 1,5 (150 por ciento): través de un estado intermedio (B).
- webkit-transformar: escala (1.5);
- moz-transform:escala(1.5);
- o-transformar:escala(1.5);
- ms-transform:escala(1.5);
- transformar: escala (1.5);
Ahora, cuando el usuario se desplaza sobre el video, se escalará hacia arriba en un factor de 1.5 (
Figura 7.6).
Pero al igual que el primer ejemplo de transición anterior en el capítulo, la transición entre los
estados es torpe y fea. ¿Entonces que puedes hacer? Bueno, ¡agrega una transición, por supuesto!
Usando lo que ya aprendió, puede aplicar una transición simple al estado normal
del videoelemento para hacer el escalatransformar la acción mucho más suave (Figura
7.7):
video {
- transición: todos los 1s facilidad;
EXPLORANDO TRANSFORMACIONES 2D 149

FIGURA 7.8 El video se gira 5
grados en sentido contrario a
las agujas del reloj.
Por supuesto, la escala no es la única transformación disponible; también puede rotar el
elemento, que es lo que hará a continuación.
GIRAR UN VÍDEO
Esta vez rotará el estado normal del video, por lo que no se requieren reglas de transición o estado
de desplazamiento.
usando el mismo transformarregla como lo hizo anteriormente, simplemente indica que
desea que el elemento sea rotado en lugar de escalado. Por ejemplo, puede tener varios
videos en una página y desea que se vean como si estuvieran dispersos aleatoriamente en la
página, cada uno en un ángulo ligeramente diferente.
Elgirartransform también toma un parámetro: el número de grados en los que se rotará el elemento. Un
valor positivo lo gira en el sentido de las agujas del reloj; un valor negativo lo gira en sentido contrario a las
agujas del reloj:
video {
- webkit-transformar: rotar (-5 grados);
- moz-transformar: rotar (-5 grados);
- o-transformar: rotar (-5 grados);
- ms-transform:rotate(-5deg);
- transformar: rotar (-5 grados);
Aquí, el video se gira 5 grados en sentido contrario a las agujas del reloj (Figura 7.8).
¡Y la bondad no termina ahí! Tú también puedessesgarel video debe ser

esto lo que quieres lograr.

FIGURA 7.9Un video con una
sombra paralela sesgada 15
grados a la izquierda.
SESGANDO UN VIDEO
Usando el video con una sombra adicional, puede sesgarlo 15 grados hacia la izquierda:
video {
- webkit-transform:skew(15deg);
- transformación moz: sesgo (15 grados);
- o-transformar: sesgo (15 grados);
- ms-transform: sesgo (15 grados);
- transformar: sesgo (15 grados);
- moz-caja-sombra: -10px 10px 5px #999;
- webkit-caja-sombra: -10px 10px 5px #999;

caja-sombra: -10px 10px 5px #999;
}
Un valor de sesgo negativo inclinaría el video hacia la derecha.Figura 7.9muestra el

resultado de sesgar a la izquierda.
Elsesgartransform también puede tomar dos parámetros, lo que le permite especificar dos
valores de sesgo diferentes para los ejes X e Y.
¡Ah, y hay más! También puede trasladar un elemento de una posición a
otra.
TRADUCCIÓN DE UN VÍDEO
Eltraducirtransform toma dos parámetros,relativoXyrelativoY.Estos dos parámetros

moverán el elemento a la posición requerida especificada en relación con su
posición normal sin afectar los elementos a su alrededor.

En este ejemplo, usemos dos videos uno al lado del otro en un división con un borde negro. En
su estado de desplazamiento, cada video se moverá 50 píxeles hacia la derecha y hacia abajo desde
su posición actual:

</vídeo>

</vídeo>
</div>
- webkit-transformar: traducir (50px, 50px);
- moz-transform:translate(50px,50px);
- o-transformar: traducir (50px, 50px);
- ms-transform: traducir (50 px, 50 px);

transformar: traducir (50px, 50px);
Si quisiera traducir los videos a diferentes posiciones, podría hacerlo asignando a cada
video un identificador único y luego especificando diferentes valores de traducción para cada
video a través de este identificador.
Combinando lo que aprendiste anteriormente, también puedes agregar un borde, una sombra
paralela y una transición suave a los videos para darles una transformación suave:
video {
margen derecho: 10px;

- moz-caja-sombra: -10px 10px 5px #999;

FIGURA 7.10Los videos se sientan uno al lado del otro en su FIGURA 7.11Se activa el estado de desplazamiento del primer video y
estado normal. el video se dirige a su nueva posición traducida.
FIGURA 7.12El primer vídeo se instala

en su nueva posición temporal. Tenga
en cuenta cómo no ha afectado la
posición del segundo video.
- webkit-caja-sombra: -10px 10px 5px #999;

caja-sombra: -10px 10px 5px #999;
- transición: todos los 1s facilidad;
Figuras 7.10mediante7.12darle una idea de cómo funcionaría la transformación.
PROPINA:La mayoría de las funciones de transformación 2D de CSS3 también

tienen equivalentes X e Y, comoescalaX()ysesgadoY(), que le permiten trabajar
en un solo eje. Elmatriz()La función también existe, ¡pero es bastante compleja!
Puede leer más sobre estas y las transformaciones 2D en general en
www.w3.org/TR/css3-2d-transforms.
CSS 2D Transforms puede ser bastante útil para lograr algunos efectos ingeniosos. Pero
recuerda que hay dos tipos de CSS Transforms. Ahora echemos un vistazo a las transformaciones 3D.

JUGANDOCONTRANSFORMACIONES 3D
Las transformaciones 3D son, por supuesto, bastante similares a las transformaciones 2D, excepto
que tratan con tres dimensiones en lugar de dos. Desafortunadamente, las transformaciones 3D no
son compatibles con los navegadores; solo los navegadores WebKit actualmente brindan soporte. Es
por esta razón que sólo se mencionan brevemente aquí.
La especificación W3C menciona que aunque una Transformación 3D:
“. . . utiliza un sistema de coordenadas tridimensional, los elementos en sí mismos no

son objetos tridimensionales. En cambio, existen en un plano bidimensional (una
superficie plana) y no tienen profundidad”.
Puede dar a los elementos una perspectiva a través de laperspectivapropiedad, que establece la
perspectiva (en píxeles) desde la que se ve un elemento. Esto da una sensación de profundidad, lo
que hace que los elementos más alejados del espectador parezcan más pequeños.
PROPINA:La aplicación de perspectiva a un elemento no se aplica al
elemento en sí, solo a sus elementos secundarios.
También puede rotar elementos alrededor de los tres ejes diferentes de un plano
3D usando elrotar3D(x, y, z, grado de rotación)función. Por ejemplo, para aplicar una
rotación de 25 grados alrededor del eje Y, usaríarotar3d (0, 1, 0, 25 grados).
Cada una de lasx, y,yzlos parámetros toman un 1 o un 0, lo que indica si rotar
alrededor de ese eje o no.
Usando los videos dispersos en un ejemplo de página mencionado anteriormente, es posible que desee
agregar algo de profundidad para los usuarios de WebKit. Veamos un ejemplo simple que muestra las dos
propiedades que acabamos de mencionar para darle una idea de cómo funcionan.
NOTAS:Puede leer más sobre las transformaciones 3D en la especificación W3C

en www.w3.org/TR/css3-3d-transforms.
Dado que los navegadores WebKit son actualmente los únicos que admiten
transformaciones 3D, en el ejemplo de esta sección solo se utilizan las
propiedades CSS3 específicas de WebKit.
Para comenzar, defina undivisión con una clase "principal", que también contiene otradivisión
con una clase "bg" que contiene el video:
<clase div=”principal”>
<clase div=”bg”>


</vídeo>
</div>
</div>
Luego define el posicionamiento de cada uno de estos elementos en el CSS y también dale al
video una sombra paralela:
div.principal {
posición:absoluta;
arriba: 50%;
izquierda: 50%;
margen izquierdo: -350px;
margen superior: -233px;
}
div.bg {
altura: 246px;
ancho: 380px;
}
video {
ancho: 292px;
posición:absoluta;
arriba: 50px;
izquierda: 50px;
- webkit-caja-sombra:-10px 10px 5px #888;

}
JUGANDO CON TRANSFORMACIONES 3D155

FIGURA 7.13La apariencia de los
elementos en Safari 5.1.
No hay señales de la Transformación 3D en este momento, porque aún no se ha

aplicado (Figura 7.13)!
La razón detrás del exteriordivisión es que quieres aplicarle perspectiva, para que afecte a
los elementos que hay dentro, en este caso el bgdivisión y el vídeo Entonces, apliquemos una
perspectiva de 1000:
div.principal {
posición:absoluta;
arriba: 50%;
izquierda: 50%;
margen izquierdo: -350px;
margen superior: -233px;
- perspectiva del kit web: 1000;
Esta perspectiva no tiene ningún efecto visual en los elementos, pero lo tendrá cuando agregue
la regla CSS siguiente y final. Agrega unrotacióntransforma alrededor del eje Y con un ángulo de 40
grados con respecto a ladivisión con la clase bg:
div.bg {
altura: 246px;
ancho: 380px;
- webkit-transform:rotate3d(0, 1, 0, 40 grados);

FIGURA 7.14El video y el fondo.división se giran en un ángulo FIGURA 7.15Los mismos elementos y grados de rotación se muestran
de 40 grados alrededor del eje Y en Safari 5.1. alrededor de los ejes X e Y.
Figura 7.14 muestra cómo se representan los elementos alrededor del eje Y, y Figura
7.15 muestra el mismo video girando alrededor de ambos ejes.
El ejemplo anterior muestra solo una pequeña parte de lo que puede hacer con las
transformaciones 3D, pero debería darle una idea general de lo que puede lograr.
Debido a la compatibilidad limitada del navegador, recomendaría no usar Transformaciones 3D
en este momento. Sin embargo, definitivamente vale la pena jugar con ellos para ver qué puede
hacer con ellos, siempre que use un navegador WebKit. Cuando aumente la compatibilidad con los
navegadores, sin duda verá mucho más acerca de las transformaciones 3D.
PROPINA:Para obtener más información sobre transformaciones y transformaciones 3D, consulte la

biblioteca para desarrolladores de Safari en http://developer.apple.com/library/safari/#documentation/
InternetWeb/Conceptual/SafariVisualEffectsProgGuide/ Transforms/Transforms.html.
Con transiciones y transformaciones en su haber, es hora de explorar otra pieza de

la familia CSS3, las animaciones.
JUGANDO CON TRANSFORMACIONES 3D157

LABORALCONANIMACIONES
La especificación CSS3 introduce la idea de animaciones definidas, que le permiten especificar

los valores que las propiedades CSS de elementos HTML particulares tomarán durante un
intervalo de tiempo determinado. Esta secuencia de valores, cuando se encadenan durante el
intervalo de tiempo especificado, hace que el elemento HTML en cuestión se anime.
La especificación W3C lo expresa de esta manera:
"Las animaciones CSS permiten que un autor modifique los valores de las propiedades CSS a lo largo del tiempo".
"Valores a lo largo del tiempo" implica que debe definir ciertos valores para diferentes períodos
de tiempo, lo que hace a través de la clave de CSS Animations, Fotogramas clave.
@FOTOS CLAVE
Los fotogramas clave le permiten definir funciones dentro del CSS en las que puede
especificar reglas CSS para los estados inicial, final e intermedio de un elemento HTML. Para
especificar una regla de este tipo, utilice el @fotogramas clave palabra clave seguida de un
identificador único o nombre de función. A esto le sigue un conjunto de reglas CSS contenidas
entre llaves que especifican los diferentes fotogramas de la animación, es decir, cómo se
moverá, rotará, escalará, etc. el elemento animado en diferentes puntos de la animación.
Por ejemplo, una función de animación de fotogramas clave muy simple que mueve un elemento
de lado a lado podría definirse de la siguiente manera:
@keyframes tiembla {
0% {
izquierda: 5px;
}
25% {
izquierda: 10px;
}
50% {
izquierda: 15px;

75% {
izquierda: 20px;
}
100% {
izquierda: 25px
}
}
En la función Fotogramas clave agitar, fise definen cinco marcos de tiempo diferentes; cada uno
contiene una diferenteizquierda definición CSS. Entonces, en cada marco de tiempo, el elemento
debería haberse animado a esa nueva posición.

También puedes escribir esto usando el desde ya properties, que le permiten
especificar los estados inicial y final de la animación:
@keyframes tiembla {
desde {
izquierda: 5px;
}
a{
izquierda: 25px;
}
}
La definición anterior tiene el mismo efecto que la definición anterior, pero

obviamente es más corta. Esto puede ser útil si la animación es simple; puede dejar que
el navegador resuelva los estados intermedios.
Para definir realmente una animación, utiliza una combinación de las propiedades enumeradas
en Tabla 7.2 en la página siguiente.
TRABAJANDO CON ANIMACIONES 159

TABLA 7.2 Propiedades de animación CSS3
PROPIEDAD DESCRIPCIÓN
nombre-de-animación Identifica los nombres de animación que se aplicarán. Cada nombre debe ser una función de
animación Keyframe definida.
duración de la animación Define el tiempo que debe tardar la animación en completar un ciclo.
función de temporización de animación Define cómo progresará la animación durante un ciclo de sus duraciones. Puede ser uno de varios valores
predefinidos:facilidad, lineal, facilidad de entrada, facilidad de salida, facilidad de entrada, ocubicbezier(). Tenga en
cuenta que estos son los mismos valores que se pueden utilizar para un función de temporización de transición
como se menciona en la Tabla 7.1.
recuento de iteraciones de animación Especifica el número de iteraciones que debe realizar la animación. Se puede configurar para
infinito, lo que hará que la animación se repita continuamente.
animación-dirección Define si la animación debe o no reproducirse en reversa en ciclos alternos. Los valores válidos
sonnormal yalterno. un valor de normal es el predeterminado.
animación-retraso Indica cuándo comenzará la animación. Permite agregar un retraso al comienzo de la animación
si es necesario. un valor de0, el predeterminado, hace que la animación comience
inmediatamente.
modo de relleno de animación Indica qué valores aplica la animación fuera del tiempo que se está ejecutando. De forma
predeterminada, los valores contenidos dentro de los cuadros de animación no se conservan una
vez que se completa la animación. Establecer este valor puede anularlo usando uno de cuatro
valores diferentes:
ninguna. Ninguno de los valores persiste fuera de la animación. Este es el valor predeterminado.
hacia atrás. Los valores definidos en el primer cuadro persistirán una vez que se complete la
animación.
hacia adelante. Los valores definidos en el cuadro final se mantendrán una vez que se complete la
animación.
ambos. Los valores tanto en el primer cuadro como en el último se conservarán cuando
se complete la animación.
NOTA:Elestado-de-reproducción-de-animación, que define si una animación

está en ejecución o en pausa, también se define actualmente en la especificación
de animaciones CSS3, pero lo más probable es que se elimine en un futuro próximo
(www.w3.org/TR/css3-animations/#the-animation-play-state-property).

Al igual que con las transiciones, la creación de definiciones específicas del proveedor podría dar lugar a un
conjunto bastante largo de reglas, por lo que, una vez más, utilizando la notación abreviada, en este casoanimación, es
el mejor curso de acción:
- animación webkit: agitar 5s 1 facilidad;
Este fragmento de CSS define elsacudirAnimación de fotogramas clave que se utilizará, con una
duración de 5 segundos para una iteración, y utiliza elfacilidadfunción de temporización de animación.
NOTA:Actualmente, la compatibilidad con las animaciones CSS se limita a los
navegadores WebKit y Firefox 4+. Por lo tanto, una vez más, se requieren reglas
CSS específicas del proveedor para que las animaciones CSS funcionen.
Pasando de esta simple animación en movimiento, echemos un vistazo a cómo podría

usar una rotación dentro de una secuencia de animación.
PORTADA VIDEO ANIMADO
Usando una combinación de CSS Transforms y Animations, armemos un ejemplo

simple que comienza con un video cubierto y, al hacer clic, la cubierta gira y revela
el video debajo.
Primero debe definir el marcado HTML:
<div id=”cubrir” class=”cubrir”></div>
<clase div=”bg”>
<video poster=”sintel-poster.jpg” preload=controles de “metadatos”>
<fuente src=”sintel-pequeño.mp4” tipo=”video/mp4”>
<fuente src=”sintel-pequeño.webm” type=”video/webm”>
</vídeo>
</div>
</div>

El contenedordivisión contiene la portadadivisión,que estarás animando, y un bg
división,que contiene la definición del video. Tenga en cuenta que el video en cuestión tiene una
imagen de póster definida, usa los controles predeterminados del navegador y también sugiere que
el navegador solo debe precargar los metadatos del video.
NOTA:El video utilizado en el ejemplo de animación de portada de

video esSintelpor la Fundación Blender y el Proyecto de Película
Abierta Durian. Puede leer más al respecto en www.sintel.org.
A continuación, debe definir el CSS y concentrarse en el aspecto real de los elementos

HTML; agregará las animaciones y las transformaciones más tarde.
dar los tresdivisionesestablecer dimensiones y un color de fondo blanco. Además, coloque la cubierta y
bgdivisionesabsolutamente y aplique un borde gris claro de 1 píxel de ancho. centrar el recipientedivisión en
la página y colóquelo 20 por ciento hacia abajo desde la parte superior de la página:
. contenedor, .cover, .bg {

ancho: 311px;
altura: 138px;
color de fondo:#fff;
}
. envase {
margen:20% automático 0 automático;
}
. portada, .bg {
posición:absoluta;
borde: 1px sólido #aaa;
}
Además, dale la portada.división una imagen de fondo, que especifica cómo se

ve realmente la portada. Selecciona elcursorser elpunterográfico, y darle un
índice zvalor de 3, porque quieres estodivisión estar arriba:

FIGURA 7.16El video
cubierto se ve muy bien.
. cubrir {
background:#fff url('sintel-cover.jpg') no-repetir center center;
índice z: 3;
cursor:puntero;
}
Ahora da el bgdivisión aíndice z,pero un valor menor de 2 para que la cubiertadivisión se

apilará encima de él:
. fondo {
índice z: 2;
}
Entonces simplemente dale lavideoelemento una dimensión determinada y unamargenvalor de 5
píxeles:
video {
ancho: 301px;
altura: 128px;
margen: 5px;
Figura 7.16muestra cómo se ve la portada del video.
Por supuesto, ahora necesita animar la portada, de modo que cuando un usuario haga
clic en ella, gire hacia afuera y detrás del video, revelando el video, que luego se puede
reproducir.

Para implementar la animación, debe definir la función Keyframes que moverá
eldivisión y girarlo al mismo tiempo. Para lograr esto, usará dos transformaciones
diferentes,traducirygirar.La función de fotogramas claveremovecover
Se define como:
@-moz-keyframes removecover {
0% {
- moz-transform:translate(0,0) rotar(0deg);
índice z: 3;
}
50% {
- moz-transform: traducir (-180 px, -180 px) rotar (-180 grados);
índice z: 3;
}
100% {
- moz-transform: traducir (0,0) rotar (-360 grados);

índice z: 1;
}
}
NOTA:El ejemplo de portada animada se define para Firefox

solo usando el–mozprefijo. Puede duplicar fácilmente las reglas
para navegadores WebKit usando el–webkitprefijo en su lugar.
Solo es necesario definir tres marcos aquí, porque desea que eldivisión para alejarse
a un punto determinado (-180 píxeles de distancia en los ejes X e Y), girar 360 grados y
luego volver a la misma posición, pero con una diferencia. Note que el
índice ztambién se especifica dentro de las definiciones de marco. porque la portadadivisión permanecerá en
la parte superior a medida que gira y luego se asentará detrás del video y bgdivisión,el
índice zel valor definido en el cuadro final debe persistir una vez que finaliza la
animación. Lo lograrás usando elmodo de relleno de animaciónpropiedad.

La definición de animación se asigna a una clase animada, que luego asignará
a la portadadivisiónLa definición abreviada de la animación es:
div.animar {
- moz-animation:removecover 2s 1 linear forwards;
}
Así que asignas los Keyframesremovecover función a esta clase animada con una
duración de 2 segundos, itérela una vez con unlinealfunción de temporización y ajuste el
modo de relleno de animacióna hacia adelantepor lo que las reglas contenidas en el cuadro de
animación final persistirán una vez que termine la animación, es decir, uníndice zde 1
Para asegurarse de que la animación sea fluida, agregue una transición a la portadadivisión:
. cubrir {
background:#fff url('sintel-cover.jpg') no-repetir center center;
índice z: 3;
cursor:puntero;
- moz-transition: todos los 1s facilidad;
- webkit-transition:todos los 1 son sencillos;
Para que la animación realmente suceda, simplemente agregue la clase de animación CSS a la
portadadivisión cuando el usuario hace clic en él. Debido a que no puede hacer esto a través de CSS,
se requiere un poco de JavaScript para escuchar el evento de clic en la portada.división y luego
agregue el nombre de la clase:
var portada = document.querySelector('div.cover');

cover.addEventListener('clic', function() {
cover.className += ' animar';
}, falso);
NOTA:Cuando se agrega al nombre de clase del elemento, también se agrega un espacio

antes del nuevo nombre de clase para que el elementoclaseEl atributo mantiene la lista
requerida de clases separadas por espacios, por ejemplo, "cover animate".

FIGURA 7.17Imagine, por así
decirlo, la cubierta girando
alejándose y detrás del video.
A B
C D
¡Y eso es! Cuando un usuario hace clic en la portada, girará hacia afuera y hacia atrás del video, lo
que permitirá que se reproduzca el video (Figura 7.17).

Ahora echemos un vistazo a cómo puede usar una Transformación 3D en una animación.

GIRO ANIMADO
En el ejemplo anterior, combinó Transformaciones CSS y Animación. Por supuesto, fue una
Transformación 2D, pero aquí usará una Transformación 3D. Esto significa que solo funciona
en navegadores WebKit, por lo que el código solo se dirigirá a esos navegadores.
Para este ejemplo, utilizará elrotar3d()transformación mencionada anteriormente. Una vez
más, primero debe definir la función Fotogramas clave que definirá los marcos de tiempo
para la animación. Usando el zumbido de los engranajes de la imaginación, llamemos a este
girar:
@-webkit-keyframes girar {
0% {
- webkit-transform:rotate3d(0,0,0,0deg);
}
25% {
}
50% {
}
75% {
}
100% {
}
}

FIGURA 7.18Un pobre intento Nuevamente, define cinco marcos de tiempo diferentes, cada uno girando el elemento en el eje Y
de mostrarte un video giratorio
en un ángulo de grado diferente.
en Safari 5.1 a través de
imágenes estáticas. Luego vincula esta función con el video:flotarExpresar:
- webkit-animation: spin 5s infinito lineal;

}
¡Y listo! gira (Figura 7.18)!

Pongamos en práctica lo que has aprendido.

EXTENDIENDO LA PORTADA DE VIDEO ANIMADO A 3D
Usando el ejemplo de portada de video animado que viste anteriormente, puedes aplicar el rotar3d
transforme a la animación de portada para navegadores WebKit en lugar de la más simple girar
transformar.
Para hacer esto, todo lo que necesita hacer es definir la animación Keyframes apropiada
removecover función para WebKit y asignarlo a la animación división clase:
@-webkit-keyframes removecover {
0% {
- webkit-transform: traducir (0,0) rotar 3d (0,0,0,0 grados);
índice z: 3;
}
50% {
- webkit-transform:translate(-180px,-180px)
pags rotar3d(1,1,1,-180grados);
índice z: 3;
}
100% {
- webkit-transform: traducir (0,0) rotar 3d (0,0,0,0 grados);

índice z: 1;
}
}
div.animar {
- webkit-animation:removecover 2s 1 linear forwards;
}

FIGURA 7.19 ¡Usando esa Tenga en cuenta que la rotación 3D está asignada para girar alrededor de los tres ejes
maravillosa imaginación tuya,
porque produce un mejor efecto de giro cuando se mueve (Figura 7.19).
observa cómo la cubierta gira y
rota en 3D alejándose y detrás La información incluida en esta sección solo se sumerge en las animaciones CSS porque
del video! se podría escribir un libro completo sobre ellas. Pero te muestra lo que puedes hacer con las
animaciones y que todo lo que puedes hacer con ellas en otros elementos, también lo puedes
hacer paraaudioyvideoelementos.

ENVASEARRIBA
Las transformaciones, transiciones y animaciones de CSS3 son adiciones poderosas a la caja

de herramientas del desarrollador web, y es útil saber de lo que son capaces.
Aunque actualmente la compatibilidad con navegadores es esporádica, las transiciones y
las transformaciones 2D son lo suficientemente compatibles como para que considere leer
más sobre ellas, familiarizarse con ellas y usarlas en sus sitios cuando corresponda. La
moderación es clave, así que no se exceda y abrume a sus usuarios.
Lo más probable es que sea solo cuestión de tiempo antes de que las transformaciones 3D y la animación
completa sean totalmente compatibles con todos los navegadores, así que esté atento a su desarrollo también.
A continuación, se alejará del mundo del estilo y pasará a funciones completamente

diferentes pero muy útiles para video HTML5 en particular: subtitulado de video y otras
capacidades de accesibilidad.
TERMINANDO171
8
MULTIMEDIAY
ACCESIBILIDAD
Hasta ahora, ha aprendido lo simple que puede
ser entregar audio y video a través de Internet
a sus usuarios finales de forma nativa.
HTML. ¡Tal poder! Pero con este poder viene la responsabilidad.
Debe dar un paso atrás y pensar en sus usuarios finales. Es posible que no
todos puedan acceder a los medios como usted pretendía. Algunos pueden
tener una discapacidad sensorial; es posible que otros no entiendan el
idioma en el que se entregan sus medios. ¿Qué puede hacer para brindarles
a estos usuarios acceso a los medios que desea entregar?
En este capítulo, aprenderá cómo HTML5 le ayuda a proporcionarle varias
formas de presentar su contenido multimedia a los usuarios. Como resultado,
aumentará la disponibilidad de sus medios para usuarios con diferentes
necesidades y requisitos, haciéndolos más accesibles.
173
MEDIOS DE COMUNICACIÓNY POTENCIAL
PROBLEMAS DE ACCESIBILIDAD
Al pensar en los usuarios que intentarán ver su contenido multimedia, puede

hacer una serie de suposiciones:
- Los usuarios verán su contenido en una computadora de escritorio, computadora portátil, tableta o teléfono.
- Los usuarios tendrán alguna forma de escuchar el audio de su contenido, ya sea a través de
auriculares o altavoces.
- Los usuarios podrán entender el idioma en el que entrega los medios.
- Los usuarios podrán descargar y reproducir con éxito sus medios.
Todas son suposiciones bastante razonables y probablemente cubran a la gran mayoría de los
usuarios que querrán acceder a su contenido. Puede estar satisfecho con que su contenido sea
accesible solo para estos usuarios; después de todo, la mayoría gobierna, ¿no es así?
Bueno, le recomiendo encarecidamente que piense en hacer que su contenido sea accesible para los
usuarios que no se encuentran en la categoría de las suposiciones que se acaban de enumerar. ¿Quiénes son
estos espectadores? Incluyen:
- Usuarios que tienen una discapacidad sensorial que les impide escuchar el
audio de su contenido o ver videos.
- Usuarios que no entienden el idioma en el que se entregan los medios.
- Usuarios que usan dispositivos como lectores de pantalla y/o usan teclados para acceder a
contenido multimedia en la web.
- Usuarios que no pueden escuchar o ver correctamente su contenido debido al entorno en el que se
encuentran o debido a las limitaciones del dispositivo.
Debido a que la mayoría del contenido de los medios generalmente incluirá algo de audio, no
poder escuchar o comprender el audio que contiene es un gran obstáculo para comprender el
mensaje y la información del contenido.
Del mismo modo, poder acceder al contenido a través de un dispositivo como un lector de
pantalla pero luego no poder usarlo debido a que los controles de medios no están configurados
correctamente (por ejemplo, para el acceso al teclado) molestaría a cualquier usuario.
Explorará la accesibilidad de los controles multimedia más adelante en este capítulo. También
echará un vistazo a lo que HTML5 trae a la mesa en un intento de abordar el problema de los usuarios
que no pueden ver, escuchar o comprender su contenido multimedia. Pero primero, echemos un
vistazo rápido a lo que condujo al intento de HTML5 de enfrentar este problema de accesibilidad: SRT.
174 CAPÍTULO 8 MULTIMEDIA Y ACCESIBILIDAD

A MIRADA BREVE EN SRT
SRT es un formato de archivo existente para contener subtítulos de video y sus tiempos. Un archivo
SRT a menudo se produce automáticamente usando un programa de Windows llamado SubRip
(http://zuggy.wz.cz), que usa el reconocimiento óptico de caracteres (OCR) para obtener los subtítulos
de la fuente de video especificada.
El formato de archivo SubRip es un archivo de texto básico con la extensión .srt-fiextensión de archivo que
sigue un formato básico:
Número de subtítulo
hh:mm:ss,msmsms --> hh:mm:ss,msmsms
Texto del subtítulo (una o más líneas)
...
Cada conjunto de subtítulos comienza con un número de subtítulo único, seguido de las marcas
de tiempo de inicio y finalización del tiempo que representa el subtítulo en una línea separada, que
luego es seguida por una o más líneas de texto de subtítulo. Cada conjunto de subtítulos
subsiguientes está separado por una línea en blanco. El formato de marca de tiempo
hh:mm:ss,msmsmsespecifica las horas, minutos, segundos y milisegundos del tiempo en cuestión.
Tenga en cuenta que el separador de milisegundos es una coma.

A continuación se muestra un ejemplo de un archivo de este tipo:
1
00:00:10,500 --> 00:00:13,000
El sueño del elefante
2
00:00:15,000 --> 00:00:18,000
A la izquierda podemos ver...
El formato de archivo SRT es bastante popular y, a menudo, es el formato en el que se publican

los subtítulos de video. Este formato de archivo no se usa actualmente como parte del intento de
HTML5 de abordar la accesibilidad, aunque al principio lo era, pero ahora se ha ampliado y se le ha
dado un nuevo nombre, WebVTT.
UNA BREVE MIRADA A SRT175

PRESENTANDOWEBVTT
WebVTT (Web Video Text Tracks) es un formato de archivo diseñado para marcar pistas
de texto externas. Inicialmente era parte de las especificaciones WHATWG y W3C
HTML5, y era una extensión de SRT llamada WebSRT (Web Subtitle Resource Tracks).
Pero al W3C le preocupaba que HTML5 fuera independiente de cualquier formato de
subtítulos elegido y, por lo tanto, se eliminó de esa especificación.
NOTA:Aunque SRT en WebSRT significa Pistas de recursos de subtítulos,

el acrónimo original no significaba nada y simplemente reflejaba la extensión de
archivo utilizada. WebSRT es un "retroónimo"; Las pistas de recursos de subtítulos
se calzaron con calzador en las tres letras para que realmente significaran algo.
La presencia de WebVTT es actualmente una de las principales diferencias entre la

especificación HTML5 de WHATWG y la especificación W3C.
Aunque actualmente ningún navegador es compatible con WebVTT, los principales
proveedores de navegadores han indicado que implementarán soporte para WebVTT en el
futuro. Esta indicación ha llevado a la creación de un Estatuto del Grupo de Trabajo WebVTT
(www.w3.org/2011/05/google-webvtt-charter.html) en el W3C, cuya misión es:
“crear una especificación W3C a partir del lenguaje WHATWGWebVTT (Web Video Text
Tracks) y solidificarlo mediante la creación de un conjunto de pruebas WebVTT y
mediante la creación de asignaciones semánticas de otros formatos de subtítulos
hacia o desde WebVTT para facilitar la implementación y el mercado del navegador.
adopción."
Se espera que esta promesa de soporte del proveedor a su vez conduzca eventualmente a
una estandarización formal de la especificación WebVTT en el W3C. Con el soporte del
navegador y el del W3C, puede estar seguro de que WebVTT llegó para quedarse y está
destinado a convertirse en el método de facto para marcar pistas de texto dentro del
contenido de audio y video en la web.
Entonces, ¿qué es el formato de archivo WebVTT y cómo puede ayudarlo a que su contenido sea
accesible? sigue leyendo
¿QUÉ PUEDE HACER WEBVTT?
Utilice el formato de archivo WebVTT para definir archivos WebVTT. Uno de los usos
principales de estos archivos es proporcionar subtítulos al contenido de video, aunque el
formato del archivo no indica para qué se usan sus contenidos.
176CAPÍTULO 8 MULTIMEDIA Y ACCESIBILIDAD

El formato WebVTT también le permite proporcionar una descripción textual del
contenido del video, que luego puede ser utilizada por varios dispositivos de accesibilidad
(que pueden leer las descripciones en voz alta) para describir el contenido del video a quienes
no pueden verlo. Usted informa al navegador del archivo WebVTT y de su propósito utilizando
el marcado HTML; descubrirá cómo se hace esto más adelante en este capítulo cuando lea
sobre elpistaelemento.
Echemos un vistazo al formato de archivo WebVTT con más detalle.
FORMATO DE ARCHIVO WEBVTT
Un archivo WebVTT es un archivo de texto simple con la extensión .vttextensión que debe
seguir un formato específico, que verá en breve. El archivo debe estar codificado comoUTF-8
y etiquetado con el tipo MIMEtexto/tt.Los terminadores de línea dentro del archivo solo pueden ser \r
(un retorno de carro), \n (una nueva línea), o \r\n (un retorno de carro seguido de una nueva línea).
También debe contener un cuerpo de archivo WebVTT, que consta de lo siguiente:
WEBVTT
[señal]
[señal]
...
ElWEBVTTcadena en la parte superior identifica el contenido como un archivo WebVTT y luego debe ir
seguido de al menos una línea en blanco, que luego es seguida por cualquier número deseñales,cada uno de
los cuales está separado por una línea en blanco.
A señalSe define como:
[cadena de identificación]
[hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [configuración de entrada]
TextLine1
TextLine2
...
cadena de identificaciónes un identificador único dentro del archivo que identifica la señal. Puede
constar de uno o más caracteres que no contengan la subcadena “-->” ni ninguno de los
terminadores de línea mencionados anteriormente.
PRESENTANDO WEBVTT 177

[hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms indica el rango de marca de tiempo
dentro del archivo de video para el que se especifica la entrada. [hh:]mm:ss.msmsms es una marca de
tiempo simple; la parte de la hora es opcional (dependiendo de la duración del video en cuestión, por
supuesto).
NOTA:Los separadores de milisegundos

son puntos, no comas como en SRT.
ajustes de señal permitirle especificar el posicionamiento del texto; leerá más sobre
ellos en un momento.
TextLineN es el texto real en el archivo de video que representa el rango de marca de tiempo en
la entrada. El contenido puede estar todo en una línea o presentarse en cualquier número de líneas
separadas. Cualquier línea estará contenida dentro de la entrada hasta que se encuentre una línea
en blanco, lo que indica el final de esa entrada en particular.
Echemos un vistazo rápido a un archivo WebVTT de muestra que contiene dos rangos de marcas de
tiempo:
WEBVTT
1
00:00:10.500 --> 00:00:13.000
2
00:00:15.000 --> 00:00:18.000
Este ejemplo define dos señales: la primera comienza a los 10 segundos y 500
milisegundos del video y finaliza a los 13 segundos, y la segunda comienza a los 15 segundos
del video y finaliza 3 segundos después. El texto de los subtítulos para cada señal se
proporciona debajo de su marca de tiempo.
El uso de señales es relativamente sencillo y puede ver cómo se puede construir el archivo
con varias señales para cubrir la duración de un video completo. También puede especificar
algunos ajustes por señal. Estos afectan el posicionamiento de la señal en

FIGURA 8.1 Cómo puede aparecer una
señal de subtítulos en un video sin una
configuración de señal especificada.
el vídeo relacionado. Puede tener varios valores de configuración, y una configuración de entrada
puede contener uno o más valores, cada uno separado por un espacio. Los distintos ajustes se
enumeran enTabla 8.1.
Si no ajustes de señal se especifican, el texto se alineará en el medio, en la parte inferior

del cuadro de video (Figura 8.1).
CUADRO 8.1 Ajustes de señal de WebVTT
SIGNIFICADO FORMATO VALORES EFECTO
Dirección del texto D:valor vertical Verticales de derecha a izquierda.
vertical-lr Verticales de izquierda a derecha.
Posición de la línea L: valor 0–100% Porcentaje de posición de la señal en relación con el cuadro de video.
[-]número Número de línea en el que se mostrará.
Alineación del texto Un valor comienzo Texto alineado al inicio de la línea.
medio Texto alineado a la mitad de la línea.
fin Texto alineado al final de la línea.
Posición del texto T: valor 0-100% Porcentaje de posición del texto de referencia en relación con el cuadro de video.
Tamano del texto S: valor 0-100% El tamaño porcentual del texto de la señal.

FIGURA 8.2 Cómo puede aparecer un
subtítulo de entrada en un video con una
configuración de entrada de Un inicio.
Agreguemos algunas de estas configuraciones al ejemplo usado anteriormente:
WEBVTT
1
00:00:10.500 --> 00:00:13.000 Un inicio
2
00:00:15.000 --> 00:00:18.000 A: final L: 10%
El texto en la primera entrada se alineará a la izquierda del video (de la misma manera
que la regla CSS alineación de texto: izquierda obras) (Figura 8.2).
La segunda señal tiene dos configuraciones aplicadas: El texto se alineará al final de la
línea (similar a alineación de texto: derecha en CSS) y se colocará en la línea 10 por ciento hacia
abajo desde la parte superior del video (Figura 8.3).
Además de especificar la configuración de la señal para controlar la posición y la alineación del
texto de la señal, también hay una serie de estilos en línea que puede aplicar al texto. Estos se ven y
actúan de la misma manera que los elementos HTML. Contienen una etiqueta de inicio y una de
finalización, y el formato se aplica al texto intermedio. Estas etiquetas se enumeran enTabla 8.2.

FIGURA 8.3Cómo puede aparecer un
subtítulo de entrada en un video con una
configuración de entrada de A: final L: 10%.
TABLA 8.2Etiquetas de texto WebVTT
NOMBRE DE LA ETIQUETA DESCRIPCIÓN
C Define el texto de clase que permite agregar un nombre de clase de estilo CSS a la etiqueta, por ejemplo, <c.nombreDeClase>.
I Pone en cursiva el contenido del texto.
B Pone en negrita el contenido del texto.
tu Subraya el contenido del texto.
v Define el contenido de voz que permite agregar un nombre de voz a la etiqueta, por ejemplo, <v.Altavoz1>, que
luego se puede diseñar a través de CSS.
rubí Define el contenido ruby (tramos breves de texto junto con el texto base, a menudo utilizados en documentos de Asia oriental
para indicar la pronunciación o proporcionar anotaciones breves. Consulte www.w3.org/TR/css3-ruby para obtener más
información).
[hh:]mm:ss.msmsms Define una marca de tiempo en la que se activa una determinada parte del contenido dentro del texto de
referencia. Similar al texto estilo karaoke, que aparece paso a paso.
Tenga en cuenta que no hay una etiqueta final; el texto después de la marca de tiempo aparecerá a menos que encuentre
otra marca de tiempo o sea el final de la señal.
Ampliemos el ejemplo aún más y usemos algunas de las etiquetas de texto para formatear el texto de
referencia:

FIGURA 8.4Texto de señal de video
con un estilo definido usando CSS y
WebVTTCetiqueta de texto
WEBVTT
1
00:00:00.000 --> 00:00:14.999
de elefante<c.sueño>Sueño</c>
2
00:00:15.000 --> 00:00:18.000 A: final L: 10%
En el<yo>izquierda</i>podemos<segundo>ver</b>...
3
00:00:18.167 --> 00:00:22.000
A la derecha<00:00:20.000>podemos ver el...
Con la primera señal, se ha agregado un nombre de clase de "sueño", un estilo que puede
definir dentro de su archivo HTML de la misma manera que crearía cualquier regla de estilo
CSS. EnFigura 8.4, la clase CSS "sueño" se ha definido con texto rojo y texto en mayúsculas.
NOTA:Cualquier nombre de clase CSS que pueda usar dentro de sus definiciones
de subtítulos WebVTT se puede definir en el archivo HTML contenedor o en un
archivo CSS externo de la misma manera que especificaría cualquier otra clase CSS.

FIGURA 8.5Texto de señal de video
que usa elIyBetiquetas de texto
FIGURA 8.6Este texto de señal de video muestra el texto en etapas.
La segunda señal ahora tiene etiquetas que mostrarán la palabra "izquierda" en cursiva y "ver" en
negrita (Figura 8.5).
Se agrega una pista adicional a este ejemplo para mostrar cómo se usa la marca de tiempo para
mostrar el texto "estilo de karaoke". Cuando comience la señal, aparecerán primero las palabras "A la
derecha". Luego, el texto "podemos ver..." se mostrará en la marca de tiempo apropiada (Figura 8.6).
NOTA:Si desea que los caracteres &, < y > aparezcan en el texto de una señal
de video, debe escaparlos con&amperio; <y>respectivamente.

WEBVTTFUTURODESARROLLOS
Vale la pena señalar que debido a que el formato de archivo WebVTT es relativamente nuevo
en la especificación y con la reciente creación de la Carta del grupo de trabajo WebVTT, es
probable que se agreguen a la especificación.
Si desea mantenerse al tanto de cualquier cambio en esta especificación, esté atento

al sitio de la Carta del grupo de trabajo (www.w3.org/2011/05/google-webvtt
- charter.html) y el blog de Silvia Pfeiffer (http://blog.gingertech.net) quien actualmente es editora
de la Carta del Grupo de Trabajo. Silvia también escribe regularmente en blogs sobre temas de
accesibilidad relacionados con HTML5.
Puede ver cómo se puede agregar la narración completa en un video a un archivo

de texto WebVTT con formato y estilo.
Pero, ¿cómo conecta un archivo WebVTT con un video en particular? Aquí es donde el
nuevo HTML5pistainterviene el elemento.

EL PISTA ELEMENTO
Elpistaelement es uno de los nuevos elementos de HTML5. Su propósito es permitir que

se especifiquen pistas de texto externas para elementos multimedia, comoaudioyvideo.
ElpistaEl elemento no representa nada por sí mismo y debe usarse junto con un
elemento multimedia y como elemento secundario.
Elpistaelemento toma una serie de atributos, que se enumeran en Tabla 8.3.
TABLA 8.3 Seguimiento de atributos de elementos
origen Contiene la URL de los datos de la pista de texto (por ejemplo, un archivo WebVTT).
amable Define el tipo de contenido la definición de la pista (y la fuente definida enorigen)se va a utilizar para.
Puede tener varios valores:
subtítulos Una transcripción o traducción del diálogo del elemento multimedia; adecuado para cuando el audio
está disponible para el usuario pero no lo entiende.
subtítulos Similar asubtitulos,pero también contiene efectos de sonido, pistas musicales y otra información de
audio relevante; adecuado para cuando la banda sonora no está disponible para el usuario.
descripciones Descripciones textuales del componente de video del recurso de medios; adecuado para cuando el
componente visual no está disponible.
capítulos Títulos de capítulo destinados a navegar por el recurso multimedia. Esto podría mostrarse a los
usuarios para que elijan de una lista para saltar al capítulo con el nombre apropiado en el video.
metadatos Pistas destinadas a ser utilizadas desde el script. El navegador normalmente no los mostrará al
usuario. Los dispositivos podrían usar estos datos para determinar cosas como si pueden
mostrarlos o no.
srclang Especifica el idioma al que apuntan los datos de la pista de texto enorigenestá adentro. Debe estar presente siamablese establece en
subtítulos
etiqueta Proporciona un título legible por el usuario para la pista, que se puede mostrar a los usuarios cuando se les pide
que elijan, por ejemplo, entre subtítulos en inglés o alemán.
defecto Si este atributo está presente, indica que esta pista es la que se utilizará como predeterminada si el usuario
no indica una preferencia.
rubí Define el contenido ruby (tramos breves de texto junto con el texto base, a menudo utilizados en documentos de Asia oriental para
indicar la pronunciación o proporcionar anotaciones breves. Consulte www.w3.org/TR/css3-ruby para obtener más información).
[hh:] mm: ss. Define una marca de tiempo en la que se activa una determinada parte del contenido dentro del texto de referencia. Similar al
msmsms texto estilo karaoke, que aparece paso a paso.
Tenga en cuenta que no hay una etiqueta final; el texto después de la marca de tiempo aparecerá a menos que encuentre otra marca
de tiempo o sea el final de la señal.
EL ELEMENTO DE PISTA185
El siguiente ejemplo muestra cómo unpistaEl elemento puede usarse en conexión con un
video para proporcionar subtítulos:
<fuente src=”video-file.mp4” type=”video/mp4”>

<fuente src=”video-file.webm” type=”video/webm”>
<track src=”en.vtt” kind=”subtitles” srclang=”en” label=”Inglés pags
subtítulos”>
</vídeo>
Elpistaelemento en el ejemplo especifica que eles.vtt ficontiene subtítulos en

inglés (como eletiquetadice) en el idioma inglés (srclangse establece enes)de
tipo: subtítulospara el entornovideoelemento. A partir de este ejemplo, puede ver lo fácil
que sería agregar un segundo archivo de subtítulos que podría estar en un idioma
diferente:

subtítulos”defecto>
<track src=”de.vtt” kind=”subtitles” srclang=”de” label=”Alemán pags
subtítulos”>
</vídeo>
Aquí, otropistase ha añadido una definición que apunta a unade.vtt file que contiene
subtítulos en alemán;srclangse establece enDelaware.
Note que eldefectoEl atributo se ha agregado a la definición de subtítulos en inglés, marcándolo
como el conjunto de subtítulos predeterminado que se utilizará si el usuario no selecciona uno
específicamente.

Si quisiera ampliar el ejemplo aún más y agregar una lista de capítulos en
cada idioma (inglés y alemán), haría lo siguiente:

subtítulos” predeterminado>
<track src=”de.vtt” kind=”subtitles” srclang=”de” label=”Alemán pags

subtítulos”>
<pista src=”ch-en.vtt” kind=”capítulos” srclang=”en” pags
label=”Lista de capítulos en inglés” por defecto>
<pista src=”ch-de.vtt” kind=”capítulos” srclang=”de” pags

label=”Lista de capítulos en alemán”>
</vídeo>
Una vez que se han creado los diversos archivos WebVTT con el contenido que
desea, agregarlos al video apropiado es un proceso bastante simple.
Todo lo que acaba de leer sobre WebVTT suena bastante prometedor; sin embargo,
aunque algunos navegadores admiten lapistaelemento hasta cierto punto, actualmente
ningún navegador admite el formato de archivo WebVTT.
NOTA:En el momento de escribir este artículo, la versión nocturna de WebKit (en la

que se basan Chrome y Safari) tiene cierta compatibilidad con WebVTT.
Sin embargo, no todo está perdido, porque hay varias bibliotecas de JavaScript disponibles que le
permiten comenzar a usar WebVTT hoy.
EL ELEMENTO DE PISTA187
UTILIZANDO WEBVTTY EL
ELEMENTO DE PISTAAHORA
Un pequeño número de navegadores admiten lapistaelemento hasta cierto punto. Los

navegadores WebKit más recientes (p. ej., Chrome 12 y Safari 5.0.5) reconocen el elemento
pero no hacen nada con él. La versión actual de Firefox (5) analiza el elemento pero tampoco
hace nada con él. Aunque estos navegadores están dando pasos en la dirección correcta, en
realidad no lo ayudan a implementar WebVTT ahora.
Afortunadamente, cuatro bibliotecas de JavaScript le permiten definir el pistaelemento
con archivos WebVTT en su documento web que entregará lo que desea:
- jugador http://www.delphiki.com/html5/playr Admite:
subtítulos, capítulos, algunas configuraciones de entrada
Navegadores: Opera, Chrome, Safari, Firefox
- Reproductor LeanBack. http://dev.mennerich.name/showroom/html5_video
Admite: subtítulos
Navegadores: todos los principales navegadores con respaldo a Flash si es necesario
- Subtitulador. https://github.com/cgiffard/Captionator
(versión CaptionCrunch)
Admite: subtítulos, todas las configuraciones de entrada
Navegadores: Opera, Chrome, Safari, Firefox, IE9
- MediaElementJS.http://mediaelementjs.com Admite: subtítulos (el formato
de tiempo usa el formato SRT) Navegadores: Todos los principales
navegadores con respaldo a Flash si es necesario
SRTAPOYO
Aunque solo un puñado de reproductores de JavaScript admiten WebVTT, varios de ellos admiten archivos de subtítulos
SRT. Los reproductores que admiten WebVTT (Playr, LeanBack, Captionator y MediaElementJS) también admiten SRT,
además de los siguientes que solo admiten SRT:
- js_videosub.https://bitbucket.org/tagawa/jscaptions
- jscaptions.http://www.storiesinflight.com/js_videosub
- Kaltura.http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library

Ninguna de estas bibliotecas ofrece soporte para todos los diferentes valores para elamable
atributo de lapistaelemento: Solo soportan elsubtitular(Playr también es compatible con
elcapítulovalor). Como los subtítulos son uno de los valores más importantes, es un
buen comienzo. Este soporte también le permite comenzar a agregar subtítulos a sus
videos ahora y verlos en acción.
Veamos cómo puede usar la biblioteca JavaScript de Playr para agregar subtítulos y
capítulos a un video.
EJEMPLO DE JUGADOR
Para usar Playr, primero debe descargarlo del sitio web de descargas de Playr en
https://github.com/delphiki/Playr. Una vez descargado, debe incluir el archivo CSS de
Playr y JavaScript en su documento web:
<enlace rel=”hoja de estilo” href=”playr.css” />

<secuencia de comandos src=”playr.js”></secuencia de comandos>
Al definir su video, simplemente agregue la clase CSS "playr_video" a su

videoy Playr se usará automáticamente para ese video.
Una muestra de Playr con un cortometraje animado llamado Elephant's Dream (©
copyright 2006, Blender Foundation, Netherlands Media Art Institute, www.elephants
dream.org) está disponible en el sitio web del libro en www.html5multimedia.com.
El código utilizado para este video es el siguiente:
Controles <video class=”playr_video” preload=”metadata”

pags poster=”sueño-de-elefantes.title.jpg”>
<source src=”elephants-dream-medium.mp4” type=”video/mp4”>
<fuente src=”elephants-dream-medium.webm” type=”video/webm”>
<track label=”Subtítulos en inglés” kind=”subtítulos” srclang=”en” pags

src=”elephants-dream-subtitles-en.vtt” predeterminado>
<track label=”Subtítulos en alemán” kind=”subtítulos” srclang=”de”

pags src="elephants-dream-subtitulos-de.vtt">
<track label=”Capítulos” kind=”capítulos” srclang=”en” pags
src=”elefantes-sueño-capitulos-es.vtt”>
</vídeo>
USO DE WEBVTT Y EL ELEMENTO DE PISTA AHORA189

FIGURA 8.7El reproductor de
video Playr con Elephant's Dream.
Figura 8.7muestra cómo se vería este video y la definición de la pista en el reproductor de

video Playr.
Además, trespistalos elementos se utilizan para señalar subtítulos en inglés y alemán, y
capítulos en inglés.
NOTA:Playr actualmente no admite varios archivos de capítulos o

eldefectoatributo, pero lo hará en una versión futura.
Figuras 8.8mediante8.11mostrar cómo Playr muestra las diferentes opciones. Playr es un

práctico reproductor de video y su capacidad para mostrar subtítulos y capítulos es muy útil.
Soporte para los otros tipos depistalos contenidos de los elementos están planificados, por lo que, al
igual que otros reproductores de video disponibles, seguirá mejorando.
Otra parte importante para hacer que el contenido multimedia sea accesible son los controles. A
continuación, aprenderá qué tan accesibles son los reproductores predeterminados y qué puede hacer para
que sus propios controles personalizados sean más accesibles.

FIGURA 8.8El menú de Playr permite
a los espectadores elegir subtítulos
en inglés y alemán, además de
capítulos.
FIGURA 8.9 Los subtítulos se han colocado un 6 por ciento desde la parte superior FIGURA 8.10 El mismo video con subtítulos en alemán elegido.
(usando largo: 6%) y en negrita con <b>.
FIGURA 8.11 Una muestra de cómo se

ve la selección de capítulos en Playr.
USO DE WEBVTT Y EL ELEMENTO DE PISTA AHORA191

CONTROLES DE MEDIOS Y
ACCESIBILIDAD
Como se mencionó anteriormente, es muy importante para la accesibilidad que se pueda acceder a
los controles multimedia desde el teclado. Los navegadores tienen su propio conjunto de controles
para los elementos multimedia, pero ¿qué tan accesibles son desde el teclado? Desafortunadamente,
por el momento, la respuesta no es muy. Opera parece ser el único navegador cuyo conjunto de
controles predeterminado es inmediatamente accesible desde el teclado. Puede pasar fácilmente de
un control a otro, usar la tecla Retorno para alternar el botón Reproducir/Pausar y usar las teclas de
flecha para controlar la barra de búsqueda y el control de volumen.
Por lo tanto, si desea que su contenido multimedia sea totalmente accesible en todos los
navegadores modernos, debe implementar sus propios controles personalizados. En el Capítulo 5,
aprendió cómo agregar controles personalizados, y son estos controles personalizados los que ahora
ampliará para hacerlos más accesibles.
MEJORAR LA ACCESIBILIDAD DE LOS CONTROLES ADUANEROS
Ya has usado el HTML botón elemento para implementar casi todos los controles. Utilizandobotón
elementos aumenta inmediatamente la accesibilidad de los controles porque el botón El elemento es
automáticamente accesible desde el teclado. Ese solo hecho hace que el teclado de controles
personalizados sea accesible. Debido a que los controles también se enumeran en el mismo orden en
que aparecen en el reproductor, su orden de tabulación también está prácticamente en el orden
lógico requerido. Sin embargo, es posible que desee cambiar el orden de tabulación de la barra de
progreso y el botón Reproducir/Pausar. Lo más probable es que los usuarios quieran reproducir el
video primero, por lo que ese botón debería ser el primer control al que puedan acceder.
Puede especificar el orden de tabulación de los controles HTML utilizando el tabindex

atributo. El orden especificado por este atributo es el que el navegador le indicará al teclado
que siga. Así que aplicas untabindexde 1 al botón Reproducir/Pausar y 2 a la barra de
progreso, y luego aplicar las subsiguientesíndices de tabulaciónen el orden en que aparecen
en la fuente:

<div id=”controles”>
<div id=”barra de progreso”><span id=”reproducido” tabindex=”2”></span>
pags </div>
<button id=”reproducir pausa” alt=”reproducir” title=”reproducir” tabindex=”1”> pags

reproducir</botón>
<button id=”detener” alt=”detener” title=”detener” tabindex=”3”>detener

pags </botón>
<button id=”rebobinar” alt=”rebobinar” title=”rebobinar” tabindex=”4”>

pags «</botón>
<button id=”ffwd” alt=”avance rápido” title=”avance rápido” pags

tabindex=”5”>»</botón>
<button id=”bajar volumen” alt=”disminuir volumen” title=”-” pags
tabindex=”6”>botón>
<button id=”subir volumen” alt=”aumentar volumen” title=”+”

pags tabindex=”7”>+</botón>
<button id=”silencio” alt=”silencio” title=”silencio” tabindex=”8”>silencio

pags</botón>
</div> NOTA:En esta lista de códigos, el al hacer clic()

Los eventos se han omitido por brevedad.
EL RANGO ELEMENTO
En el Capítulo 5, se mencionó que HTML5 rango El elemento no se usó en el conjunto de

control de medios personalizado debido a su soporte limitado en los navegadores
HTML5.
Elrango El elemento sería ideal para usar como una barra de progreso si el soporte
fuera mejor porque también proporciona automáticamente acceso al teclado, y la
barra de búsqueda funcionaría a través del teclado (las teclas arriba y abajo
alternarían la búsqueda cuando el elemento tiene el foco) sin más requisitos
CONTROLES DE MEDIOS Y ACCESIBILIDAD 193

Debido a que los botones brindan acceso al teclado automáticamente, todo lo que necesita
abordar ahora es la barra de progreso, que utiliza un división y un lapso.
Al igual que en el Capítulo 5, debe agregar un detector de eventos para elpulsación de teclaevento, que se
dispara cuando se presiona una tecla, y luego actuar en consecuencia. Solo le interesa presionar una tecla en
la barra de progreso, por lo que el evento se agrega solo a la barra de progreso:
ProgressBar.addEventListener(“pulsación de tecla”, función(e) {
checkKey(e.keyCode);
}, falso);
La función que se llama cuando se detecta una pulsación de tecla se llamaclave de verificación ()
con un parámetro que indica el código numérico de la tecla que se presionó:
función checkKey(código) {
si (código == 38) {//tecla de flecha arriba
video.tiempoActual += 0.5;
}
más si (código == 40) {//tecla de flecha hacia abajo
video.tiempoActual -= 0.5;
}
}
Elclave de verificación ()La función simplemente verifica el código de la tecla para ver si es la tecla
de flecha hacia arriba (código 38) o la tecla de flecha hacia abajo (código 40). Dependiendo de qué
tecla sea, el videotiempo actualel atributo se aumenta o disminuye en 0.05 (un valor de tiempo
arbitrario, pero parece un buen paso para mover el video hacia adelante o hacia atrás).
Y eso es. Ahora se puede acceder a las capacidades de búsqueda de la barra de progreso a través del
teclado con las teclas de flecha hacia arriba y hacia abajo cuando está enfocada. El resultado final hace que sus
controles personalizados de medios sean mucho más accesibles de lo que hubieran sido.

ENVASEARRIBA
Con respecto a la accesibilidad, HTML5 ha avanzado y se ha expandido desde su definición inicial del
formato de archivo WebSRT a WebVTT. Dado que los proveedores de navegadores planean admitir
este formato, se formó un nuevo grupo de trabajo W3C con la intención de formalizar la
especificación WebVTT para que los navegadores comiencen a admitir. Entonces, con suerte, la
compatibilidad con el navegador es solo cuestión de tiempo.
Aunque el soporte nativo actualmente es irregular, ahora puede usar las bibliotecas de
JavaScript existentes para agregar subtítulos a sus videos. Estas bibliotecas, sin duda,
aumentarán su funcionalidad y capacidades en el futuro.
También puede hacer que los controles de medios personalizados que creó en el Capítulo 5 sean más
accesibles a través del teclado.
En general, la accesibilidad es un objetivo en el que debe pensar cuando ofrece contenido

multimedia a sus usuarios. Cuantos más usuarios puedan acceder a tu contenido, mejor, ¿no?
El próximo capítulo se aleja de la accesibilidad y explora cómo los elementos multimedia de
HTML5 pueden interactuar con una de las características más emocionantes de HTML5, el lienzo.
TERMINANDO195
9
UTILIZANDO VIDEO
CONLIENZO
Además de la multimedia nativa, una
de las capacidades más comentadas
que HTML5 trae a la mesa web es
habilidad para dibujar y manipular gráficos usando JavaScript a través del
nuevolienzoelemento. EllienzoEl elemento define un área en una página
web en la que puede dibujar usando una API de JavaScript.
Canvas y su API correspondiente tienen muchos usos, desde copiar
medios y dibujar gráficos simples hasta rellenar colores, manipular
píxeles directamente y crear juegos complejos que se juegan dentro del
navegador sin necesidad de un complemento de terceros.
También puede usar elementos multimedia en interacciones con canvas y la
API. Este capítulo explora brevemente algunas de estas interacciones simples,
con, como siempre, ejemplos completamente explicados.
197
EL LIENZOELEMENTO
La breve introducción del capítulo le dijo lo que puede usar ellienzoelemento para y que
en realidad es bastante inútil por sí solo. Sin embargo, es muy fácil de usar y solo tiene
dos atributos posibles, que se enumeran enTabla 9.1.
TABLA 9.1Atributos del elemento Canvas
ancho Define el ancho del área de dibujo del lienzo.
altura Define la altura del área de dibujo del lienzo.
¡Eso es, de verdad! Por supuesto, también puede definir las dimensiones del lienzo usando
CSS o JavaScript. Y al igual que cualquier otro elemento HTML, la posición, los bordes, etc. del
lienzoEl elemento se puede definir a través de CSS.
Definición de unlienzoelemento en su documento web es tan simple como esto:
<ancho del lienzo=”500” alto=”500”></lienzo>
PROPINA:Siempre debe especificar el ancho y alto de su lienzo

elemento utilizando los atributos, CSS o JavaScript. si no lo haces,
las dimensiones del elemento serán por defecto de 300 × 150 píxeles.
Por supuesto, dejarlo así no genera absolutamente nada de interés en la página

web, por lo que probablemente no vería nada porque se mostraría como un espacio en
blanco. Puede agregarle un borde a través de CSS para poder verlo cuando esté
experimentando.
El lienzo es una cuadrícula bidimensional y, como tal, tiene dos ejes, X e Y. Para definir una
posición dentro del lienzo, especifique dos coordenadas en esta cuadrícula (X,Y). La posición de
la esquina superior izquierda de la cuadrícula se considera "casa" y tiene las coordenadas (0,0).
NAVEGADORAPOYO
Soporte del navegador para ellienzoEl elemento y la API que lo acompaña son bastante buenos: todos los principales
navegadores los admiten. Internet Explorer 8 y versiones anteriores, por supuesto, no los admiten, pero puede usar la
biblioteca de JavaScript ExplorerCanvas de Google (http://code.google.com/p/explorercanvas) para brindar compatibilidad con
lienzo y API a esos navegadores.
198 CAPÍTULO 9 USO DE VÍDEO CON CANVAS

Pero para hacer algo realmente útil con el lienzoelemento, debe invocar la API de
JavaScript 2D, que es lo que hará a continuación.
EL API 2D
Aunque el lienzoelemento es parte de la especificación HTML5, la API 2D que usa
para dibujar en él era, pero ya no es, parte de la especificación. Se movió a su
propia especificación en el W3C (http://dev.w3.org/html5/2dcontext).
La API 2D tiene una gran cantidad de funciones y funcionalidades diferentes, que
están más allá del alcance de este capítulo. Sin embargo, aprenderá y usará algunas de
estas funciones en los ejemplos a lo largo del capítulo. Por supuesto, lo alentamos a
buscar uno (o más) de los muchos libros sobre el tema.
El lienzo contiene un contexto de dibujo, que es donde tiene lugar el dibujo real. Por
el momento, solo existe un contexto 2D, pero la especificación de HTML5 menciona que
es probable que haya un contexto 3D disponible en el futuro (¡no se indica la fecha, por
supuesto!).
Para utilizar el contexto de dibujo 2D, debe controlarlo. Pero primero necesitas
manejar ellienzoelemento, que se hace fácilmente usando uno de los
funciones estándar de JavaScript selector de consulta() o getElementById():
var canvas = document.querySelector('canvas');
Para controlar el contexto del dibujo 2D, utilice elgetContext()función, que

acepta un argumento y por el momento sólo puede tener el valor2d.
var contexto = lienzo.getContext('2d');
Y ahí tienes tu identificador de contexto, que puedes usar para dibujar en el lienzo.
Lo harás a continuación usando elllenarRect()función.
El llenarRect(x, y, w, h)La función dibuja un rectángulo simple en el lienzo y toma
cuatro argumentos: las coordenadas X e Y donde se colocará el rectángulo (su
esquina superior izquierda) y el ancho y alto del rectángulo.
LA API 2D199
FIGURA 9.1Un rectángulo simple
dibujado en el elemento de lienzo
usando elllenarRect()función.
El siguiente código dibuja un rectángulo negro (el color predeterminado) de 150 × 100
píxeles en las coordenadas X e Y (20,20):
contexto.fillRect(20, 20, 150, 100);
Figura 9.1muestra el rectángulo resultante.

El llenarRect()La función es una de las funciones más básicas de la API 2D y la usará
con bastante frecuencia. Otras funciones le permiten dibujar líneas y círculos, pero
debido a que no las necesita para los ejemplos principales que siguen, no se tratan aquí.
PROPINA:Para obtener una buena base de los conceptos básicos de lienzo de
HTML5, consulte http://dev.opera.com/articles/view/html-5-canvas-the-basics.
Ahora que usted tiene una comprensión de lalienzoelemento y una comprensión

básica de la API 2D, pasemos a un ejemplo que le permite tomar capturas de pantalla de
un video HTML5.
200CAPÍTULO 9 USO DE VÍDEO CON CANVAS

TOMAR UNACAPTURA DE
PANTALLA DE UNAVÍDEO HTML5
Digamos, por ejemplo, que desea permitir que los usuarios tomen capturas de pantalla de su
video mientras se reproduce y mostrarlas en otro lugar, por ejemplo, en la página web al lado
del video. Puedes usar unlienzocomo la superficie de dibujo en la que colocar la imagen de la
captura de pantalla.
¿Suena un poco complicado? Bueno, no lo es. Solo necesita usar dos de las
funciones de la API de JavaScript:llenarRect()y otro sobre el que leerá en un momento.
Antes de tomar la captura de pantalla, primero debe configurar el video y un botón para tomar
la captura de pantalla, así como completar algunas otras tareas de inicialización.

En primer lugar, configure el HTML para el vídeo, botón, ylienzoelementos:
<source src=”elephants-dream-medium.mp4” type=”video/mp4”>
<fuente src=”elephants-dream-medium.webm” type=”video/webm”>
</vídeo>
<lienzo></lienzo>
<button id=”snap”>Tomar captura de pantalla</button>
Fíjate que no hay ancho yaltura especificado en el lienzoelemento todavía; eso se hará a
través de JavaScript más adelante, ¡así que no te preocupes! También agregará una función al
al hacer clicevento de labotónelemento; de nuevo, esto sucederá un poco más adelante.
Ahora vamos a algo de JavaScript. Recuerde que necesita controlar el contexto de

dibujo 2D dellienzoelemento. También necesita obtener un mango para elvideo
elemento porque lo necesitará más adelante:
var video = document.querySelector('video');

var canvas = document.querySelector('canvas');
var contexto = lienzo.getContext('2d');
var w, h, relación;
También se definen algunas otras variables para su uso posterior: por ejemplo, elw (ancho) yh (
altura), cuyos nombres hacen que los datos que contendrán sean bastante obvios.
En este ejemplo, creará capturas de pantalla más pequeñas que el video. Esto demuestra
que es posible trabajar con capturas de pantalla que tienen un tamaño diferente al del video
original.
TOMAR UNA CAPTURA DE PANTALLA DE UN VÍDEO HTML5201

Se mencionó anteriormente que las dimensiones de lalienzoEl elemento debe
definirse si desea anular las dimensiones predeterminadas de 300 × 150, lo que hace
aquí. Por lo tanto, debe calcular la relación entre el ancho del video y su altura (de ahí el
proporcióndefinida en el fragmento de código anterior). También puede hacer esto solo
cuando el video esté realmente disponible para que el navegador pueda verificar las
dimensiones del video. Por lo tanto, debe esperar hasta que las dimensiones del video
estén disponibles. ¿Y como haces esto? Al escuchar elmetadatos cargados
Evento API que puede recordar del Capítulo 5:
video.addEventListener('metadatos cargados', function() {

relación = video.videoWidth / video.videoHeight;
w = video.anchura de video - 100;
h = parseInt(w/proporción, 10);
lienzo.ancho = w;
lienzo.altura = h;
}, falso);
Cuando elmetadatos cargados se genera el evento, se calcula la proporción del video. Elw la
variable se configura para que sea (arbitrariamente) 100 menos que el ancho real del video, y
el h la variable se establece en cualquier proporción que el valor en w es a la proporción del
video. Ellienzoelementos ancho yaltura luego se ajustan a los valores calculados en w yH.
Luego debe definir la función real que tomará la captura de pantalla y la

adjuntará al botón. al hacer clicevento. Pero antes de hacerlo, echemos un vistazo
rápido a la otra función API 2D que necesitará aquí,dibujarImagen().
El dibujarImagen(imagen, x, y, w, h) La función puede tomar varios parámetros, pero
solo usará cinco de ellos en este ejemplo. Como su nombre indica, esta función le
permite dibujar una imagen en el lienzo. El primer parámetro es la imagen a dibujar, y
los siguientes cuatro son los mismos que enllenarRect(): las coordenadas X e Y de la
esquina superior izquierda de la imagen dibujada, y su ancho y alto.
PROPINA:Para obtener más información sobre eldibujarImagen()función y los

diversos parámetros que puede tomar, consulte www.whatwg.org/specs/web-
apps/current-work/multipage/the-canvas-element.html#drawimage.

El imagenEl parámetro puede ser uno de los siguientes elementos HTML:
lienzo, o video.Sí elvideoEl elemento se puede pasar a esta función, y
automáticamente creará una imagen del cuadro actual del video en cuestión y
la dibujará en el lienzo.
A continuación, define la funciónquebrar()para tomar la captura de pantalla real y
adjuntarla a labotónelemento:
<botón id=”ajustar”onclick=”snap()”>Tomar captura de pantalla</botón>
Yquebrar()Se define como:
función ajustar() {
context.fillRect(0, 0, w, h);
context.drawImage(video, 0, 0, w, h);
}
¡Dos líneas es todo lo que se requiere! Primero se define el rectángulo del

lienzo que se rellenará; en este caso, es todo ellienzoelemento—y luego usas
dibujarImagen()para dibujar la imagen del video.
PROPINA:Puede borrar lo que esté en unlienzo elemento

simplemente redefiniendo el ancho y la altura del lienzo,
lo que lo restablece de manera efectiva.
TOMAR UNA CAPTURA DE PANTALLA DE UN VÍDEO HTML5203

A
FIGURA 9.2El lienzoEl elemento de la
derecha (A) está vacío para empezar
hasta que se hace clic en el botón
"Tomar captura de pantalla", que
dibuja una imagen fija del video como
una imagen en el lienzo (B).
Eso es todo lo que se necesita para tomar una captura de pantalla del video. Mientras se reproduce el
video, puede seguir haciendo clic en el botón "Tomar captura de pantalla" y se tomará una nueva captura de
pantalla del video en cualquier punto en el que se encuentre (Figura 9.2).
La mayor parte del esfuerzo de codificación consistió en configurar elvídeo, botón, ylienzo
elementos, mientras que el trabajo real solo tomó dos líneas, que es la mayor ventaja delienzoy
es un poco genial.
A continuación, ampliará este ejemplo copiando el video completo en ellienzo
elemento mientras se reproduce.

HACIENDO UNCOPIARDE UNREPRODUCCIÓN DE VÍDEO
En el ejemplo anterior, vio lo fácil que es tomar capturas de pantalla de un video mientras se
reproduce. Pero, ¿qué pasaría si quisiera ir un poco más allá y actualizar la imagen copiada
automáticamente mientras se reproduce el video principal, en efecto, creando una copia
exacta del video, pero más pequeña? Todo lo que necesita hacer es usar el mismo código del
ejemplo anterior y agregar oyentes para varios eventos que actualizan la imagen en ellienzo
elemento.
Recuerde del Capítulo 5 los eventos que se generan cuando un video se está reproduciendo, pausando,
deteniendo o finalizando. Son estos eventos, más específicamente elreproducción, pausa,yterminado
eventos, que usted necesita para utilizar.
Para lograr la copia de video, debe usar el estándarestablecerIntervalo()función, que

le permite especificar que una función particular de JavaScript debe llamarse a intervalos
específicos. Cuando el video comienza a reproducirse, escuchas y captas eltocar
evento y usando elestablecerIntervalo()función, configure elquebrar()función que definió
anteriormente para ser llamada cada 33 milisegundos:
establecerIntervalo(“ajustar()”, 33);
}, falso);
HACER UNA COPIA DE UN VIDEO EN REPRODUCCIÓN 205

A
FIGURA 9.3El lienzo El elemento de la
derecha se actualiza automáticamente
a medida que se reproduce el video,
manteniéndolo sincronizado con el
video (A y B).
Este código hace que elquebrar()función para actualizar automáticamente el contexto de dibujo
del lienzo con una nueva captura de pantalla del video, lo que hace que parezca que realmente se
está reproduciendo (Figura 9.3).
También debe escuchar cuándo se detuvo o finalizó el video (usando el

en pausayterminadoeventos) para que pueda detener elquebrar()la función sea llamada
en los intervalos definidos. Para borrar un intervalo, llame al JavaScript estándar
funciónclaroIntervalo():
video.addEventListener('en pausa', función() {

claroIntervalo();
}, falso);
video.addEventListener('terminado', function() {
claroIntervalo();
}, falso);

A
FIGURA 9.4El video permanece
sincronizado (A) incluso cuando usa el
control de búsqueda para avanzar en el
video (B).
Y eso es todo lo que hay que hacer. Cuando reproduzca el video, actualizará la imagen en
el lienzo mientras se reproduce, incluso si salta hacia adelante (Figura 9.4). Y cuando lo pausa
o finaliza, la imagen del lienzo dejará de actualizarse.
En una línea similar, pero un poco más complicada, a continuación, hará que la copia de
video aparezca en escala de grises, a diferencia del color original. Para hacer esto, debe
manipular los píxeles reales del video, lo que, una vez más, no es tan complicado como podría
parecer.
HACER UNA COPIA DE UN VIDEO EN REPRODUCCIÓN 207

JUGANDO EL COPIA DE VÍDEO EN ESCALA DE GRISES
Otra cosa útil que puede hacer con los objetos dentro del contexto del dibujo del lienzo es
alterar los píxeles individuales. Eso es precisamente lo que hará en este ejemplo modificando
los píxeles del vídeo para que aparezcan grises en lugar de en color.
Construirá sobre el código creado en el primer ejemplo de este capítulo. Entonces, lo
primero que debe hacer es definir un segundo lienzo para que se realicen las
manipulaciones. Esto se usa como un lienzo de fondo, que usará para trabajar antes de
dibujar el resultado final en el lienzo de visualización real. El lienzo de fondo solo existirá
dentro del código JavaScript, no como un elemento HTML en la página y, por lo tanto, el
usuario no lo verá.
Para hacer esto, simplemente crea una nueva instancia dellienzoelemento usando el
estándarcrearElemento()Función JavaScript:
var bgCanvas= documento.createElement('lienzo');
Una vez que se ha creado esta instancia, también necesita un controlador para su contexto de
dibujo 2D para poder usarlo:
var bgContext = bgCanvas.getContext('2d');
En el ejemplo anterior, establece el ancho y la altura del lienzo de visualización a través de

JavaScript, y también debe establecer el lienzo de fondo en las mismas dimensiones:
video.addEventListener('metadatos cargados', function() {

relación = video.videoWidth / video.videoHeight;
w = video.anchura de video - 100;
h = parseInt(w/proporción, 10);
lienzo.ancho = w;
lienzo.altura = h;
bgCanvas.ancho = w;
bgCanvas.altura = h;
}, falso);

Antes de modificar los píxeles, debe cumplir con dos funciones nuevas que
usar:getImageData(x, y, w, h)yputImageData(imageData, x, y).El
getImageData(x, y, w, h)función devuelve unDatos de imagenobjeto para el rectángulo
especificado por los parámetros:Xyyespecificar la esquina superior izquierda del
rectángulo yw yh son el ancho y la altura del rectángulo.
El Datos de imagenobjeto que se devuelve, como sugiere su nombre, contiene los datos de
imagen para el rectángulo especificado en la llamada getImageData(). La información que
contiene este objeto devuelto se enumera en Tabla 9.2.
TABLA 9.2 Contenido del objeto ImageData
ancho El ancho del rectángulo de datos de imagen devuelto.
altura La altura del rectángulo de datos de imagen devuelto.
datos Una matriz bidimensional que contiene la información de píxel real para
cada píxel. Cada píxel tiene cuatro entradas enumeradas secuencialmente;
los valores para los píxeles son rojo, verde, azul y canal alfa.
Por ejemplo, si el primer píxel es blanco, contendría la

información:
datos[0][0] = 255 // canal rojo

datos[0][1] = 255 // canal verde
datos[0][2] = 255 // canal azul
datos[0][3] = 1 // canal alfa (opacidad)
Como probablemente habrás adivinado, será a través de la datos atributo que podrá
modificar la información de píxeles de la imagen.
La otra función,ponerImagenDatos(imagenDatos, x, y),pinta los datos de píxeles
especificados endatos de imagenen las coordenadas indicadas porXyy.Usando esta
información, ¡hagamos el video gris!
REPRODUCCIÓN DE LA COPIA DE VÍDEO EN ESCALA DE GRISES209

Definir la funciónhazlo gris(),que hará todas las travesuras requeridas:
function hacer que sea gris() {
bgContext.drawImage(video, 0, 0, w, h);
var pixelData = bgContext.getImageData(0, 0, w, h);
for (var i = 0; i < pixelData.data.length; i += 4 ) {
var r = pixelData.datos[i];
var g = pixelData.datos[i+1];
var b = pixelData.data[i+2];
var color medio = (r + g + b) / 3;
pixelData.data[i] = promedioColor;
pixelData.data[i+1] = promedioColor;
pixelData.data[i+2] = promedioColor;
}
context.putImageData(pixelData, 0, 0);
}
Repasemos el código, comenzando con el contexto de fondo:
bgContext.drawImage(video, 0, 0, w, h);
Al igual que en el ejemplo anterior, debe tomar una instantánea del video y
dibujarla en el lienzo. Haga lo mismo aquí, pero esta vez dibuje la imagen en el
contexto de fondo en lugar del contexto de visualización.
A continuación, obtiene los datos de píxeles de la imagen del contexto de fondo que
acaba de dibujar. Estarás manipulando los datos devueltos en elpixelData objeto:
var pixelData = bgContext.getImageData(0, 0, w, h);
A continuación, debe recorrer cada elemento en el pixelDatas matriz de datos, que contiene la
información real de cada píxel. Como se menciona en la Tabla 9.2, la matriz de datos es una matriz
bidimensional con cuatro elementos de datos para cada píxel. Es por esta razón que el contador de
bucles está configurado para agregar 4 por cada iteración:

for (var i = 0; i < pixelData.data.length; i += 4 ) {
...
}
Para cada píxel, debe extraer la información roja, verde y azul relevante para ese
píxel. Los datos del canal alfa no son necesarios en este ejemplo, por lo que puede
ignorarlos con seguridad:
var r = pixelData.datos[i]; // canal rojo

var g = pixelData.datos[i + 1]; // canal verde
var b = pixelData.datos[i + 2]; // canal azul
Ahora que tiene esta información, necesita convertirla a gris. Hay varios
métodos disponibles para hacer esto, el más simple de los cuales es calcular el
color promedio en los tres valores:
var color medio = (r + g + b) / 3;
Luego configura cada valor rojo, verde y azul para cada uno de los píxeles para que sea este
nuevo color promedio:
pixelData.data[i] = promedioColor;
pixelData.data[i + 1] = promedioColor;
pixelData.data[i + 2] = promedioColor;
Finalmente, debe escribir la imagen recién manipulada y sus datos en el contexto

real del lienzo de visualización:
context.putImageData(pixelData, 0, 0);
PROPINA:Si está creando este ejemplo a medida que avanza, no funcionará a

menos que lo ejecute a través de un servidor web. Un archivo local se considerará
de "origen cruzado" (es decir, de otro sitio web), por lo que la API le prohibirá
obtener una imagen de él y manipular sus píxeles. Esta política de seguridad de
origen cruzado existe para evitar que los archivos de un dominio accedan a la
información de un archivo de otro dominio y la modifiquen sin permiso.
REPRODUCCIÓN DE LA COPIA DE VÍDEO EN ESCALA DE GRISES211

FIGURA 9.5 Una copia en escala de Por supuesto, en este momento este código no hace nada: debe asegurarse de que el
grises del video original se muestra
hazlo gris() la función realmente se llama.
en la lienzoelemento de la derecha.
Imitando lo que hizo en el segundo ejemplo, la función puede configurarse simplemente para
ser llamada a intervalos de 33 milisegundos usando el establecerIntervalo()función cuando el video
está configurado para reproducirse:
setInterval(“hacerlogris()”, 33);
}, falso);
Y listo, la copia de video se muestra en el lienzo, pero esta vez en escala de grises (
Figura 9.5).
Hay mucho más que puede hacer con el lienzo y la manipulación de píxeles. Este
capítulo proporcionó solo una pequeña idea de lo que puede lograr. Si lo que ha leído
ha despertado su interés, hay muchos buenos tutoriales en línea (p. ej.,
www.html5rocks.com/en/tutorials/#canvas) y libros disponibles con los que puede hacer
un seguimiento, y lo animo a que lo haga. . ¡Ve y juega!

ENVASE ARRIBA
El lienzoelement y la API de JavaScript 2D tienen mucho potencial y, de hecho, muchos

juegos y bibliotecas de JavaScript están comenzando a utilizarlos en todo su potencial.
Debido a que puede dibujar un video directamente en un lienzo, le permite realizar tareas
simples como tomar capturas de pantalla y mantener una copia de un video en reproducción
sincronizado con una versión en el lienzo. También puede manipular los píxeles obteniendo los datos
de la imagen y luego volviéndolos a dibujar en el lienzo.
El próximo capítulo también se enfoca en video e imágenes, pero esta vez con otro
formato que existía antes de HTML5 pero que parece haber pasado a primer plano desde que
HTML5 se ha vuelto más popular. Los gráficos vectoriales escalables (SVG) son los siguientes.
TERMINANDO213
10
UTILIZANDOVIDEO
CONSVG
Scalable Vector Graphics (SVG) es un
lenguaje que le permite definir gráficos
vectoriales bidimensionales para
mostrar en sus documentos web. Escrito en XML y compatible con todos los
principales navegadores, puede usarlo para describir formas vectoriales, texto
e imágenes en las que también puede aplicar filtros específicos.
SVG ha existido por un tiempo, pero parece haber escapado a la atención
de la mayoría de los desarrolladores web. Esto ha cambiado con la llegada
de HTML5 y laSVGelemento y el hecho de que ahora es compatible con
Internet Explorer 9. A medida que la gente se interesó más en el lienzo
(sobre el que leyó en el Capítulo 9) y sus capacidades, también comenzaron
a prestar más atención a SVG y lo que podría ser capaz de hacer. .
Este capítulo explora brevemente SVG y cómo puede usarlo para lograr una
serie de efectos con elementos multimedia HTML5, más específicamente el
videoelemento.
215
UNA BREVEINTRODUCCIÓNASVG
La especificación SVG no forma parte de HTML5, pero ha estado en desarrollo con el W3C desde 1999
como un estándar abierto. La versión 1.1 es la recomendación actual desde 2001. Una nueva versión,
la 1.2, es un borrador de trabajo reciente, pero es la versión 1.1 la que se discutirá principalmente en
este capítulo.
Como se mencionó en la introducción del capítulo, SVG está escrito en XML y el navegador
usa esta definición XML para representar la forma, el texto o la imagen requeridos. En efecto,
el archivo XML contendrá instrucciones de dibujo para que el navegador las interprete y utilice
para representar los gráficos requeridos, por ejemplo, coordenadas de puntos para dibujar
líneas, texto para incluir y diferentes curvas y formas. Por supuesto, esto significa que los
únicos datos que el navegador debe descargar para mostrar los gráficos en cuestión son un
archivo de texto XML en lugar de archivos de imagen potencialmente más grandes.
Otra ventaja de SVG es que los gráficos producidos son gráficos vectoriales en lugar de
gráficos rasterizados, por lo que el navegador escalará la imagen limpiamente dentro del
espacio disponible en caso de que sea necesario.
RASTERYGRÁFICOS VECTORIALES
Una imagen de gráficos de trama, o mapa de bits, es una estructura de datos que contiene
información de píxeles para un gráfico. Debido a que el gráfico definido por esta
información de píxeles depende de toda la información de píxeles disponible, depende de la
resolución en la que se creó la imagen original. Por esta razón, no se amplía muy bien
porque no tiene suficiente información de píxeles. para el nuevo tamaño, lo que conduce a
una pérdida de calidad. Los gráficos de trama también dan lugar a archivos de gran tamaño
porque contienen información sobre cada píxel de la imagen.
Los gráficos vectoriales, por otro lado, se definen a través de información geométrica,
como puntos, curvas, líneas, formas, etc., todo lo cual se basa en ecuaciones matemáticas.
La herramienta que dibuja la imagen, en este caso un navegador web, utiliza esta
información geométrica para volver a dibujar el gráfico, lo que le permite crear la imagen
de mejor calidad posible dada la resolución de la pantalla. Los archivos de gráficos
vectoriales tienen un tamaño más pequeño que los archivos de gráficos de trama porque
solo contienen fórmulas para crear las formas requeridas en lugar de información de
píxeles individuales.
FIGURA 10.1La diferencia de calidad
entre los gráficos de trama (arriba) y Figura 10.1ilustra la diferencia entre gráficos rasterizados y vectoriales cuando
los gráficos vectoriales (abajo) se amplía una imagen.
cuando se amplían.
216CAPÍTULO 10USO DE VÍDEO CON SVG

También puede aplicar funciones como efectos de filtro y trazados de recorte a gráficos
SVG y animarlos también. Verá ejemplos de algunas de estas funciones adicionales más
adelante en el capítulo.
La especificación SVG es bastante grande y un resumen de todas sus capacidades
está fuera del alcance de este capítulo. Puede ver la última especificación, versión 1.1,
en el W3C en www.w3.org/TR/SVG11. Aquí solo se describirán las características y los
elementos que se utilizan en los ejemplos de este capítulo.
Veamos qué tan bien soportado está SVG entre los principales navegadores.
SOPORTE DEL NAVEGADOR
Debido a que existe desde hace mucho tiempo, y con Internet Explorer finalmente uniéndose con la versión 9,
SVG ahora es compatible con las últimas versiones de los principales navegadores. Sin embargo, como se
mencionó anteriormente, la especificación SVG es enorme, por lo que diferentes partes son compatibles con
diferentes navegadores.
Jeff Schiller, copresidente del W3C SVG Interest Group en

www.codedread.com/svg-support-table.html (puede ver una versión
condensada en www.codedread.com/svg-support.php). En general, las
funciones principales son compatibles con Firefox, Safari, Chrome, Opera
e Internet Explorer 9 y versiones posteriores.
Hay una advertencia sobre este soporte con respecto a los medios HTML5. Las
"características principales" de SVG que son ampliamente compatibles se relacionan con las
que usaría al dibujar imágenes y texto dentro de un documento web. El soporte no está tan
extendido con respecto a los filtros o el enmascaramiento, o cualquier cosa que este capítulo
le muestre con respecto a las interacciones de SVG con videos HTML5. Actualmente, solo
Firefox y Safari admiten las funciones SVG que verá en este capítulo.
Las definiciones XML SVG suelen estar contenidas en un archivo XML externo con
una .SVGextensión, que luego se incrusta en un documento web a través de elementos
tales comoempotraryobjeto.HTML5 cambia el requisito de un archivo externo con la
introducción de laSVGelemento, que le permite definir definiciones SVG dentro de un
documento web HTML5.
EL ELEMENTO SVG
El SVGEl elemento es parte de la especificación HTML5 y le permite definir formas, texto

y gráficos SVG dentro de un documento web sin tener que incrustar un archivo SVG
externo.
UNA BREVE INTRODUCCIÓN A SVG 217

FIGURA 10.2Representación de texto
simple en SVG en Firefox 5 (izquierda)
y Safari 5.1 (derecha).
También puede utilizar elSVGpara definir el código SVG que se usará en otras partes del
documento para funciones como enmascaramiento y animación. Verá que se usa de esta
manera más adelante en algunos ejemplos de este capítulo.
Las últimas versiones de todos los principales navegadores actualmente admiten laSVG
elemento, a excepción de Opera, que lo admitirá en la versión 12. Puede ver una tabla de
soporte de navegador actualizada para elSVGelemento en http://caniuse.com/svg-html5.
Echemos un vistazo rápido a algunos de los elementos SVG más simples que están disponibles
para su uso.
NOTAS:Si desea que se muestre una definición SVG en Opera 11.50, puede incrustarla como un archivo
SVG externo y funcionará bien, como lo hará en todos los demás navegadores principales.
Puedes leer más sobre elSVGelemento en http://dev.w3.org/html5/spec/Overview.html#svg-0.
TEXTO SVG
El SVGtextoelemento le permite especificar un elemento gráfico que consta de texto. Puede

tomar varios atributos, una lista completa de los cuales está disponible en www.w3.org/TR/
SVG11/text.html#TextElement. Pero aquí solo usará algunos de los atributos.
En este ejemplo, mostremos las letras SVG usando un SVGtextoelemento. El código
SVG requerido para esto es el siguiente:
<svg>
<texto x=”0” y=”50” tamaño de fuente=”50” familia de fuentes=”Georgia” pags

relleno=”#cd0000” trazo=”negro” ancho de trazo=”1”>SVG</texto>
</svg>
Este código define la posición del texto usando valores X e Y, y también usa elllenar atributo para
establecer el color del texto en un color rojizo. El tamaño y la familia de la fuente se establece
mediante eltamaño de fuenteyFamilia tipográficaatributos, respectivamente. También se agrega un
contorno negro de ancho 1 al texto a través de lacarrerayanchura del trazo
atributos
Figura 10.2muestra cómo se representa el texto resultante en Firefox y Safari.

FIGURA 10.3Un círculo dibujado en
SVG en Chrome 13 (izquierda) y
Firefox 5 (derecha).
CÍRCULO SVG
Una de las formas más simples que podría querer dibujar a través de SVG es un círculo. Esto
es relativamente fácil porque SVG proporciona lacirculo elemento para su conveniencia:
<altura svg=”200”>
<circule cx=”100” cy=”100” r=”100” fill=”#0e8c3a” />
</svg>
Este código define la posición del círculo usando las coordenadas X e Y pero esta
vez usando el cx ycy atributos El radio del círculo se establece en 100 usando el
r atributo. Una vez másllenar se utiliza para especificar el color del círculo, en este caso un
tipo de verde.
Figura 10.3 muestra cómo se ve el círculo en un navegador.
UNA BREVE INTRODUCCIÓN A SVG 219

FIGURA 10.4 Una elipse azulada en
Safari 5.1 (izquierda) y Chrome 13
(derecha).
SVG ELIPSE
También puede dibujar una elipse, que es un círculo alargado en una dirección. Para
dibujar una elipse, además de las posiciones X e Y de la forma, también debe especificar
el ancho y la altura del radio:
<altura svg=”200”>
<elipse cx=”100” cy=”100” rx=”100” ry=”50” fill=”#0276fd” />
</svg>
El llenar el color aquí se establece en un tono de azul, y el ancho y la altura del radio
ahora se definen usando elrecetayryatributos respectivamente.
Nota: Por supuesto, podría utilizar elelipseelemento para dibujar un círculo si
establece elrecetayryatributos al mismo valor, pero obviamente es mejor usar elcirculo
elemento porque para eso está!
Puedes ver cómo se representa esta elipse simple enFigura 10.4.
Los ejemplos anteriores muestran solo una pequeña muestra de cómo puede
dibujar formas y texto usando SVG. Hay mucho más que puede hacer con SVG, por lo
que lo animo a que busque más información y juegue con ella.
PROPINA:Para obtener algunos recursos SVG en línea, vaya a http://

www.learnsvg.com y http://my.opera.com/tagawa/blog/learning-svg.
A continuación, utilizará este conocimiento básico de SVG para interactuar con HTML5video
elemento.

UTILIZANDOSVGCONVÍDEO HTML5
En la sección anterior, se le presentaron algunas de las características más simples de

dibujar texto y formas SVG. En esta sección, aprenderá a usar esas definiciones simples
de texto y forma junto con HTML5videoelemento como máscaras, y también aplicará
algunos filtros ingeniosos a su video que también proporciona SVG.
NOTA:Todos los ejemplos enumerados en este capítulo están disponibles

en el sitio web complementario del libro en www.html5multimedia.com.
AGREGAR UNA MÁSCARA DE TEXTO A UN VIDEO
En el Capítulo 6, aprendió cómo agregar una máscara sobre un video en los navegadores WebKit
usando el:webkit-mask-box-imagenPropiedad CSS. Bueno, también puedes agregar máscaras sobre
video a través de SVG. Simplemente defina un gráfico SVG como máscara y úselo en su video.
Nota: El uso de SVG en línea (es decir, con la definición de SVG dentro del documento web a
través delSVGelement) para enmascarar elementos actualmente solo funciona en Firefox.
Para este primer ejemplo, agregará una máscara de texto sobre el video. El video que se está
reproduciendo solo será visible donde exista el texto.

Para estos ejemplos, usemos nuevamente el video de los coloridos loros:
<controles de reproducción automática de video>

</vídeo>
Para definir una máscara en SVG, simplemente enciérrela dentro del máscaraelemento. Además,
dale lamáscaraelemento un identificador único de "vmask", porque deberá hacer referencia a él más
adelante:
<svg>
<id de máscara=”vmask”>
<texto x=”10” y=”140” tamaño-fuente=”200” familia-fuente=”Verdana”

pagsfont-weight=”negrita” fill=”#fff”>H5</text>
</máscara>
</svg>
USO DE SVG CON VÍDEO HTML5 221

FIGURA 10.5 La máscara de texto
H5 sobre el video del loro en
Firefox 5.
En el ejemplo de código anterior, dentro del máscaraelemento, un textoelemento se

define mediante el texto “H5” con varios atributos, el más destacable es el llenar
atributo. Cuando está definiendo una máscara, debe usar el blanco como elllenar color
para el elemento al que se aplica la máscara para que sea completamente visible a
través de la máscara.
PROPINA:Una gran ventaja de SVG es que los elementos que define dentro
de él están disponibles a través del DOM (Document Object Model) para
referenciarlos y usarlos más tarde en SVG y por JavaScript o CSS.
Para que el código realmente haga algo, debe aplicar la máscara al videoelemento,
lo que haces a través delmáscarapropiedad en la definición de CSS para el video
elemento:
video {
máscara:url('#vmask');
el valor elmáscarapropiedad está establecida en es el identificador único que asignó a la

máscaraelemento anterior, en este caso “vmask”.
Puedes ver cómo se representa esto en Firefox 5 enFigura 10.5.
Desafortunadamente, este ejemplo solo funciona en Firefox porque usa SVG en línea para definir
la máscara. Pero puede hacer que funcione en Safari si coloca la definición de máscara en un archivo
SVG externo y hace referencia a eso.
El archivo externotexto.svgse define así de la siguiente manera:

<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PÚBLICO “-//W3C//DTD SVG 1.1//EN” pags“http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg versión=”1.1” xmlns=”http://www.w3.org/2000/svg”

pagsxmlns:xlink=”http://www.w3.org/1999/xlink”>
<definiciones>
<máscara>
<id de texto = "texto" x = "10" y = "140" tamaño de fuente = "200" pags
font-weight=”negrita” font-family=”Verdana”
pags
fill=”blanco”>H5</text>
</máscara>
</defs>
<usar xlink:href=”#texto” />
</svg>
Debido a que este archivo SVG es un archivo XML, coloca el encabezado XML en la parte superior:
El ser únicoatributo se establece enNo,indicando que el documento XML no es

independiente y depende de una DTD definida externamente.
QUÉA¿DTD?
Una definición de tipo de documento (DTD) es un conjunto de declaraciones de

marcado que define la estructura de un documento de marcado. La DTD define los
elementos y atributos legales que puede contener el documento de marcado.

La siguiente línea es el SVGtipo de documentodeclaración, que indica que el
contenido del documento sigue la DTD SVG 1.1:

El SVGLuego aparece el elemento, indicando la versión y el espacio de nombres XML

(en este caso, SVG) e incluyendo una referencia alxenlacedefinición del documento, que
se requiere un poco más abajo en el archivo XML (donde se explicará):

El defsEl elemento se usa para contener cualquier definición de SVG que no se representará
inmediatamente en la pantalla, pero que se puede usar más adelante.
El máscaraytextolas definiciones de elementos contienen el mismo código que las mismas
definiciones SVG en línea del ejemplo anterior; la única excepción es que eltextoelemento recibe el
identificador único "texto". Este identificador se utiliza en la siguiente línea del archivo:
<usar xlink:href=”#texto” />
Esta línea, que hace uso de laxenlacedefinición de documento vinculada anteriormente,

informa al documento que al cargar para utilizar el recurso señalado en el
enlace x: hrefatributo, en este caso eltextodefinición de elemento.
PROPINA:Utilizando elusarelemento conenlace x: hreftambién le permite

reutilizar código dentro del archivo SVG sin tener que duplicarlo.
A continuación, debe hacer referencia a la externatexto.svg fiarchivo del archivo HTML5

original. En la definición de CSS para el video, usó la propiedad específica de WebKit
– máscara de webkitpara apuntar al archivo SVG:
video {
máscara:url('#vmask');
- máscara-webkit:url('texto.svg');

FIGURA 10.6La máscara de texto H5
como se muestra en Safari 5.1.
FIGURA 10.7La implementación

bastante rota del enmascaramiento de
texto en Chrome 13.
Y listo, la máscara de texto ahora también funciona en Safari 5.1 (Figura 10.6)! Debido a que
Chrome también es un navegador WebKit, probablemente se esté preguntando si esta máscara
de texto funciona con Chrome. Desafortunadamente, no funciona correctamente; el texto
simplemente se escribe sobre el video (Figura 10.7). Con suerte, esto se solucionará en una versión
futura del navegador.
Ahora que aprendió cómo aplicar una máscara de texto a un video HTML5, puede usar los
mismos principios para aplicar otra máscara SVG, esta vez usando una forma.
NOTA:En los ejemplos provistos, puede notar que los controles de video
todavía están disponibles para hacer clic debajo de la máscara SVG (¡si
puede adivinar dónde están ubicados!). Esto podría ser bastante útil
porque puede aplicar la máscara sin tener que implementar
necesariamente su propio conjunto de controles personalizado.

AÑADIR UNA MÁSCARA DE ELIPSE A UN VÍDEO
Anteriormente en este capítulo, aprendió que puede usar SVG para definir y dibujar una
elipse. Al igual que eltextoelemento, también puede utilizar el elipseelemento para definir una
máscara que puede colocar sobre su video HTML5.
Los principios son, por supuesto, los mismos que en el ejemplo de máscara de texto anterior. En
este ejemplo, definirá la máscara de elipse en un archivo SVG externo. Vale la pena aprender a hacer
referencia a un archivo de este tipo tanto para Firefox como para Safari.
El video que usará en este ejemplo es el mismo que el ejemplo anterior:
<controles de reproducción automática de video>

</vídeo>
Usted define la máscara SVG en el archivo XML SVG externoelipse.svg—cuya

definición es muy similar al ejemplo de máscara de texto, pero reemplaza eltexto
elemento con unelipsedefinición de elemento:


<definiciones>
<máscara id=”eMask”>
<elipse id=”elipse” cx=”150” cy=”80” rx=”150” ry=”80” pags

relleno=”blanco” />
</máscara>
</defs>
<usar xlink:href=”#elipse”/>
</svg>

El máscaraEl elemento tiene un identificador único de "eMask" porque lo necesitará FIGURA 10.8La máscara de elipse
renderizada en Firefox (izquierda) y
para hacer referencia. La elipse tiene un identificador único de "elipse" y se define con
Safari (derecha).
coordenadas X e Y, un radio de 150 en el eje X y un radio de 80 en el eje Y. Elllenar el
color es blanco, como se requiere para las máscaras.
El usarenlaces de elementos a laelipseelemento contenido en elmáscara
elemento.
En el archivo HTML de llamada, la declaración CSS usa el –webkit-mask-box-imagen

propiedad para apuntar a navegadores WebKit. Para Firefox, usas elmáscarapropiedad y asegúrese
de queURLEl valor también hace referencia al identificador de la máscara, "eMask", así como al
archivo SVG:
video {
máscara:url('elipse.svg#eMask');
- webkit-máscara-caja-imagen:url('elipse.svg');
}
Y eso es. Puedes ver cómo se representa esto en Firefox y Safari enFigura 10.8.
Como puede imaginar, puede definir cualquier forma en SVG y luego usarla como
una máscara para un video HTML5 si desea mostrar solo parte del video para lograr el
efecto deseado.
Una vez que haya definido su máscara, es posible que también desee animarla para obtener un efecto adicional.
NOTA:Para los navegadores que no admiten máscaras SVG, el

video simplemente se mostrará normalmente.

ANIMACIÓN DE UNA MÁSCARA DE VÍDEO SVG
SVG también le permite definir animaciones en los gráficos que ha definido y, dado que
las máscaras son simplemente gráficos, también puede aplicarles animaciones.
NOTA:Los ejemplos de animación también podrían usar SVG en línea para definir las
máscaras SVG, pero solo funcionarían para Firefox. Por lo tanto, todas las definiciones de
SVG se declaran en archivos externos para que funcionen en Firefox y Safari.
La misma declaración de video utilizada en los dos ejemplos anteriores se utiliza nuevamente
para este ejemplo, por lo que el código no se repetirá aquí.

Las principales áreas de interés son el archivo SVG, que se llamaelipse animada.
SVGaquí, y cómo se define la animación:


<definiciones>
<máscara id=”eMask”>
<elipse id=”elipse” cx=”150” cy=”80” rx=”100” ry=”80” pags

relleno=”blanco”>
<nombre del atributo animado = "rx" dur = "3s" pags
valores=”100;150;100” repetirCuenta=”5” />
</elipse>
</máscara>
</defs>
<usar xlink:href=”#elipse”/>
</svg>
Una vez más, todo se declara dentro de unmáscaraelemento, y elelipse

La declaración del elemento es básicamente la misma que la del ejemplo anterior, excepto que el
radio a lo largo del eje X ahora se define como 100.

A B C
También hay unanimarelemento, que, por supuesto, define la animación utilizada: FIGURA 10.9El radio X de la
máscara de elipse se anima de 100
<nombre del atributo animado = "rx" dur = "3s" valores = "100; 150; 100" (A) a 150 (C) a través del estado de
pagsrepetirCuenta=”5” /> transición de animación

representado por la imagen B.
La animación en este caso simplemente cambia el radio de la elipse de 100 a 150 y

viceversa. ElanimarEl elemento se utiliza para animar un solo atributo o propiedad
durante un período de tiempo determinado.
El Nombre del AtributoEl atributo identifica el atributo de la elipse que se animará, en este
caso el radio X, por lo que se establece enrecetaEl dur El atributo indica cuánto tiempo tomará
la animación, la duración, que se establece en 3s (3 segundos). Elvalores
El atributo es una lista separada por punto y coma de los valores desde y hacia los que
se animará la animación, de 100 a 150 y de nuevo a 100. YrepetirCuentase refiere a
cuantas veces se repetirá la animación, en este caso 5.
NOTA:Puedes leer más sobre elanimarelemento en

www.w3.org/TR/SVG11/animate.html#AnimateElement.
Con el archivo SVG definido, lo único que queda por hacer es asignarlo al video utilizando
las propiedades CSS que ya ha utilizado, a sabermáscaray -webkit-máscara-caja-imagen:
video {
máscara:url('animar-elipse.svg#eMask');
- webkit-mask-box-image:url('animate-ellipse.svg');
}
Figura 10.9le da una idea aproximada de cómo podría funcionar esta animación en
la práctica. Llevemos esta animación un paso más allá y veamos cómo puede crear
una animación que anime la máscara de una posición a otra en lugar de animar una
forma estática.

MOVER UNA MÁSCARA DE VÍDEO SVG
El ejemplo anterior le mostró cómo se pueden animar los atributos de una máscara
SVG. También puede animar toda la máscara, moviéndola a lo largo de una ruta
predefinida, que es lo que hará en este ejemplo.
Usarás el mismo código de video en este ejemplo y, una vez más, solo funcionará en
Firefox y Safari.
La máscara en este ejemplo es un círculo pequeño, y la animación moverá la máscara
circular desde la cabeza del primer loro hasta la cabeza del otro loro en un movimiento lineal,
mostrando cada uno por turno.
Entonces, una vez más, el archivo SVG,círculo-animado-movimiento.svg, es donde ocurre la
acción:


<definiciones>
<máscara id=”cMáscara”>
<ruta id=”ruta” d=”M 0 0 L 130 0” />

<circle id=”circle” cx=”85” cy=”30” r=”40” fill=”white”>
<animateMotion begin=”0s” dur=”2s” fill=”freeze”>
<mpath xlink:href=”#ruta” />
</animateMotion>
</circulo>
</máscara>
</defs>
<usar xlink:href=”#círculo”/>
</svg>
Como siempre, todo está contenido dentro de un máscaraelemento, que tiene un

identificador de "cMask".
230 CAPÍTULO 10USO DE VÍDEO CON SVG

La siguiente línea es algo nuevo, un sendero definición de elemento.
<ruta id=”ruta” d=”M 0 0 L 130 0” />
usas el sendero elemento para definir una ruta predeterminada para la animación. Este en
particular tiene un identificador de "ruta" y elDEl atributo contiene los datos de ruta reales. Los datos
de la ruta pueden contener una serie de definiciones para la ruta de la ruta, comenzando con un
comando "mover", que usaMETROpara establecer un nuevo punto para la animación, muy parecido a
levantar un bolígrafo de una página y colocarlo en otro lugar. En este ejemplo, el punto de
"movimiento" se establece en las coordenadas X e Y 0,0.

A continuación, usas el comando “lineto”, que indicas con unL,para definir las coordenadas
X e Y que dibujan una línea hacia y desde el punto actual. En este ejemplo, el comando "línea
a" es 130,0, por lo que la ruta en efecto especifica: "dibuja una línea desde el punto 0,0 hasta el
punto 130,0".
NOTA:El ejemplo de animación utiliza la definición de ruta más simple posible. Puede definir
otras rutas más complicadas que sigan las curvas de Bézier y similares. Puede leer más sobre
los datos de ruta en www.w3.org/TR/SVG11/paths.html#PathData.
El círculo tiene una posición inicial de 85 en el eje X y 30 en el Y, y tiene un radio de 40.

Nuevamente, el llenar el color se establece en blanco.
El circulo El elemento también contiene la definición para el movimiento animado a través de
el animateMotion elemento:
<animateMotion begin=”1s” dur=”4s” fill=”freeze”>

<mpath xlink:href=”#ruta” />
</animateMotion>
El animateMotion elemento aquí tiene una serie de atributos. Elcomenzar atributo especifica
cuándo comenzará la animación; aquí se establece en 1 s, por lo que hay un retraso de 1
segundo antes de que comience la animación. Eldur El atributo indica cuánto tiempo tomará la
animación, en este caso 4 segundos.
El llenar atributo se establece encongelar,que le dice a la animación que permanezca en la
posición en la que terminó cuando se completa la animación.
NOTA:Puedes leer más sobre elanimateMotion elemento en

www.w3.org/TR/SVG11/animate.html#AnimateMotionElement.

FIGURA 10.10La animación tal
como aparece en Safari. La
máscara circular se mueve a través
del video de un loro (A) al otro (C) a
través de un estado de animación A
(B).
El ruta mEl elemento informa al navegador que la ruta que seguirá la animación es
la ruta predefinida con el identificador de "ruta", que es la ruta que definiste
anteriormente.
Todo lo que queda por hacer ahora es asignar el SVG al video:
video {
máscara:url('círculo-animado-movimiento.svg#cMask');
- máscara-webkit:url('círculo-animado-movimiento.svg');
Figura 10.10muestra cómo se vería esto cuando se ve en Firefox o Safari. Hay muchas
cosas que puede hacer con las máscaras SVG, y los ejemplos anteriores muestran solo una
pequeña parte de lo que es posible. Usando los ejemplos anteriores como punto de partida,
asegúrese de experimentar con máscaras SVG e intente mejorar sus videos web.
Antes de dejar de pensar en el video SVG y HTML5, veamos otra interesante
capacidad de los filtros de video SVG y HTML5.

APLICACIÓN DE FILTROS SVG A VÍDEO HTML5
SVG tiene una gran cantidad de filtros que puede aplicar a los elementos gráficos SVG. Aunque
la especificación W3C no lo especifica, Mozilla ha ido un paso más allá y le permite aplicar
filtros SVG también a elementos multimedia HTML5, específicamente elvideoelemento. Esto
puede generar algunos efectos muy interesantes, pero debe usarse con precaución porque los
filtros SVG actualmente solo funcionan en elementos multimedia HTML5 en Firefox. Esto
podría cambiar en el futuro, pero no hay garantía de que así sea.
Debido a que solo Firefox admite estas funciones en elementos multimedia HTML5, los
ejemplos de esta sección usan SVG en línea y se dirigen solo a ese navegador.
NOTA:Los filtros mencionados en esta sección, por supuesto, se

pueden aplicar a cualquier elemento gráfico SVG.
Veamos brevemente dos de los filtros, feColorMatrixyfeGaussianBlur. Puede ver la

lista completa y, de hecho, obtener más información sobre los filtrarelemento, en
www.w3.org/TR/SVG11/filters.html#FilterElement.
EL FILTRO FECOLORMATRIX
El feColorMatrix fiEl filtro le permite aplicar una transformación matricial al objeto gráfico SVG
en cuestión. Estas matrices pueden ser bastante complejas y un poco más allá de mí para ser
honesto, pero hay una serie de configuraciones predefinidas que puede aplicar a través del
escribeatributo. Los siguientes cuatro ejemplos lo guían a través de cada configuración,
mostrándole cómo se aplica y cuál es su efecto.
Cadafiltrarla definición del elemento está contenida dentro de undefselemento dentro de un
SVGelemento, un diseño con el que ya debería estar familiarizado:
<svg>
<definiciones>
<filtro. ....>
..
</filtro>
</defs>
</svg>

FIGURA 10.11Se aplica al vídeo un filtro de saturación con un valor FIGURA 10.12El tono de píxel del video se gira en un ángulo de 50
de 0,2. grados.
SATURACIÓN DE COLOR
La aplicación del filtro de matriz de saturación de color le permite saturar los
colores de su video. Puede proporcionar un valor a lavaloresatributo, que es un
único número real entre 0 y 1 que le permite ajustar la saturación del color:
<filtro id=”saturar”>
<feColorMatrix type=”saturate” valores=”0.2” /> </
filter>
Este código aplica una saturación de 0.2, cuyo resultado se puede ver en
Figura 10.11.
ROTACIÓN DE TONO
Un video usará una cierta cantidad de colores en un espectro de color. Este

espectro de color está dispuesto en un círculo, y es posible moverse de una parte
del espectro de color a otra realizando una rotación de tono girando varios grados
alrededor del espectro de color circular.
El tonalidadRotartipo le permite realizar una rotación de tono en el video por un
ángulo especificado por el valoresatributo, que debe ser un valor de grado válido:
<filtro id=”hueRotate”>
<feColorMatrix type=”hueRotate” valores=”50” />
</filtro>
Este código aplica latonalidadRotartipo con un ángulo de rotación de 50 grados. Puedes

ver el resultado enFigura 10.12.

FIGURA 10.13El vídeo con elluminancia a alfatipo de matriz de color aplicado (izquierda). Las grandes áreas blancas son transparentes, y
una imagen de fondo se vería a través de ellas, como se muestra a la derecha, donde apenas se pueden distinguir los loros y la rama.
LUMINANCIA A ALFA
Aplicando elluminancia a alfaEl tipo de matriz de color convierte los canales rojo, verde y
azul (RGB) de los píxeles de video en un valor de luminancia y luego establece el canal
alfa de salida de cada píxel según el resultado (Figura 10.13). En efecto, esto establece
los valores de transparencia de los píxeles individuales en función de la luminancia o el
brillo relativo de los píxeles. No hay atributos para este tipo:
<filtro id=”luminanceToAlpha”>
<feColorMatrix type=”luminanceToAlpha” />
</filtro>
EN BLANCO Y NEGRO
Para convertir el video a blanco y negro, debe proporcionar los valores reales de la
matriz alfiltrarelemento a través de lavaloresatributo:
<filtro id=”blackAndWhiteMatrix”>
<feColorMatrix type=”matriz” valores=”0.3 0.3 0.3 0 0
0,3 0,3 0,3 0 0
0,3 0,3 0,3 0 0
0 0 0 1 0” />
</filtro>
El resultado de aplicar estos valores de matriz se muestra enFigura 10.14en la página

siguiente.

FIGURA 10.14Se aplica una matriz al video que convierte los FIGURA 10.15Se aplica un desenfoque gaussiano al video. Los
píxeles a sus versiones en blanco y negro. controles también estarían borrosos, por lo que debe eliminarlos y
crear los suyos propios, como se explica en el Capítulo 5.
Utilizando elmatriztype, como se muestra en el ejemplo anterior en blanco y negro, le permite
aplicar su propia transformación de matriz a los píxeles de video. Para usarlo de manera efectiva,
deberá tener una comprensión de la multiplicación de matrices, que me temo hace mucho tiempo
que desapareció de mi cerebro.
NOTA:Puedes leer más sobre elfeColorMatrixfiltro en

www.w3.org/TR/SVG11/filters.html#feColorMatrixElement.
Pasemos a echar un vistazo rápido a otro filtro,feGaussianBlur.
EL FILTRO FEGAUSSIANBLUR
El feGaussianBlur fiEl filtro le permite agregar un desenfoque al video. Se necesita un atributo,
desviación estándar,que puede contener uno o dos números. Si se proporcionan dos

números, el primero indica la desviación estándar a lo largo del eje X y el segundo
número proporciona el valor de la desviación estándar a lo largo del eje Y. Un solo
número proporciona el mismo valor para los ejes X e Y:
<identificación del filtro=”desenfoque”>
<feGaussianBlur stdDeviation=”2” />

</filtro>
Este código aplica un desenfoque gaussiano con un valor de desviación estándar de 2. El
resultado se muestra en Figura 10.15.

También puede fusionar filtros y aplicar más de uno al mismo elemento, lo que, por
supuesto, le animamos a experimentar. De nuevo, ten en cuenta que solo Firefox
permite aplicar estos filtros al HTML5videoelemento, por lo que deben ser tratados
como experimentales mientras esto siga siendo así.
También puede usar video HTML5 dentro de contenido SVG, por ejemplo, dentro de un archivo SVG
externo. Pero eso está estrictamente relacionado con el contenido SVG, no con HTML, por lo que se considera
fuera del alcance de este libro.
ENVASE ARRIBA
Ahora ha tenido una introducción básica a SVG. SVG existe desde hace mucho tiempo y,
afortunadamente, la gente está empezando a darse cuenta de que puede ser beneficioso para
la carga rápida de sus sitios web y, por supuesto, para la reproducción fluida de gráficos
simples.
Aprendió cómo puede usar SVG para interactuar con su video HTML5 como máscaras o filtros.
También debe recordar que no todos los navegadores son totalmente compatibles con esta
interacción y, por lo tanto, debe usar SVG con precaución.
En el próximo capítulo, verá el futuro de HTML5 en relación con la multimedia y qué
otras funciones y API posiblemente estarán disponibles para su uso pronto.
TERMINANDO237
11
FUTUROCARACTERÍSTICAS
Aunque este es el capítulo final del
libro, de ninguna manera es el capítulo
final con respecto a HTML5 y multime
Ha aprendido acerca de muchas funciones de audio y video de HTML5, pero
actualmente se están desarrollando otras especificaciones que contienen algunas
nuevas funciones relacionadas que serán de gran beneficio una vez que estén
terminadas y los proveedores de navegadores comiencen a implementarlas.
En este capítulo se analizan brevemente algunas de estas

especificaciones y su contenido. Aunque no son estrictamente parte de
HTML5, contienen funciones que mejorarán las características existentes
de HTML5. Estas funciones son API de JavaScript que le permitirán crear
y manipular audio, interactuar con dispositivos externos, como cámaras
web y micrófonos, y facilitar las videoconferencias. Aunque la mayoría
de estas funciones aún no están implementadas en los navegadores,
vale la pena saber hacia dónde se dirigen.
239
AUDIO API
A medida que haya leído este libro, probablemente se habrá dado cuenta de que se habló más sobre
el video que sobre el audio. Esta sección trabaja para restaurar ese equilibrio al explorar las API que
afectan solo al audio (aunque la información también se aplica al video, por supuesto, ¡porque el
audio existe en la mayoría de los videos!).
Por el momento, hay disponibles dos API de JavaScript propuestas que le permiten
leer y escribir datos de audio sin procesar. Una es la Web Audio API, que fue creada por
Google y actualmente está siendo discutida por el W3C Audio Working Group. Este
Grupo de Trabajo fue creado en marzo de 2011, y su misión autorizada es:
“desarrollar una API de script del lado del cliente que agregue capacidades de audio más avanzadas
de lo que ofrecen actualmente los elementos de audio. La API admitirá las

funciones requeridas por las aplicaciones interactivas avanzadas, incluida la
capacidad de procesar y sintetizar flujos de audio directamente en script, y
extenderá HTML5 <sonido> y <vídeo> elementos mediáticos”.
Mozilla también ha creado una API de audio, que es más simple que la API de audio web y
la ha enviado con Firefox 4 y versiones posteriores (https://wiki.mozilla.org/Audio_ Data_API).
La API de datos de audio de Mozilla es una extensión de la API de medios HTML5 sobre la que
leyó en el Capítulo 5.
Como probablemente pueda adivinar, debido a que estas API han sido creadas por
diferentes proveedores de navegadores, las partes de sus respectivas API que funcionan
actualmente solo lo hacen en sus respectivos navegadores. Sin embargo, esto no es un gran
problema en este momento, porque solo son API propuestas y aún no se ha decidido nada.
Veamos primero la API de datos de audio de Mozilla.
API DE DATOS DE AUDIO
La API de datos de audio de Mozilla proporciona una extensión para acceder mediante programación y/o
crear datos de audio sin procesar en archivos de audio y video HTML5.
LECTURA DE DATOS DE AUDIO
A medida que se reproduce el audio (ya sea a través de un audio o videoelemento) y decodificados, los datos de
muestra se almacenan en un framebuffer. Cuando este framebuffer tiene datos disponibles para su uso, el
MozAudioDisponible se levanta el evento. Los datos de muestra contenidos en el búfer de fotogramas son
datos de audio sin procesar, que pueden o no haber sido reproducidos en ese momento.
el MozAudioDisponible se levanta el evento.
240 CAPÍTULO 11 CARACTERÍSTICAS FUTURAS

Recuerda el metadatos cargados evento mencionado en el Capítulo 5, que se plantea cuando un
audio o videoEl elemento tiene metadatos útiles cargados. Cuando espera para leer datos de audio,
también puede usar este evento. Una vez que se genera, la API de datos de audio tiene tres nuevos
atributos a los que se puede acceder y que contienen información vital para los datos de audio sin
procesar:
- mozChannels. Indica el número de canales de audio.
- tasa de muestra de moz. Especifica la frecuencia de muestreo de audio por segundo.
- mozFrameBufferLength. Indica el tamaño predeterminado del framebuffer.
Veamos un ejemplo que muestra los datos proporcionados por estos tres atributos.
Primero defines elaudio elemento y un simpledivisión para contener la información de audio:
<id de audio=controles de “audio”>
<fuente src=”piano.ogg” type=”audio/ogg”>

</audio>
<div id=”información”></div>
NOTA:En este ejemplo se usa un archivo de audio Vorbis/Ogg

porque la API de datos de audio solo funciona en Firefox.
Cuando se cargan los datos de audio, accede a los datos mediante la API:
var audio = documento.getElementById(“audio”);

var información = documento.getElementById(“información”);
audio.addEventListener(“metadatos cargados”, getAudioData, false);

función getAudioData() {
tasa de var = audio.mozSampleRate;
var canales = audio.mozChannels;

var longitud = audio.mozFrameBufferLength;
info.innerHTML = “tarifa: “ + tarifa + “<br/>canales: “ + canales

+ “</br>longitud: “ + longitud;
}
API DE AUDIO241
FIGURA 11.1 La frecuencia de
muestreo, los canales y la duración
del búfer del archivo de audio se
muestran en la pantalla en Firefox 6.
En este ejemplo de código, los identificadores del audio ydivisión se obtienen los
elementos. Cuando elmetadatos cargados se genera el evento, los datos en los tres atributos:
mozSampleRate, mozChannels, ymozFrameBufferLength—se lee, y sus datos se muestran en
pantalla en el división (Figura 11.1).

Puede acceder a los datos de framebuffer a través del MozAudioDisponible eventos
framebuffer atributo, que es una matriz de datos de muestra de audio decodificados en formato de
número flotante.
Ampliemos el ejemplo anterior agregando otro división para mostrar los datos de
framebuffer y luego definir una nueva función, obtener datos de búfer, que adjuntas a la
MozAudioDisponible evento. ElgetBufferData La función simplemente muestra el primer
elemento de la matriz de búfer de datos en la pantalla:
<id de audio=controles de “audio”>
<fuente src=”piano.ogg” type=”audio/ogg”>

</audio>
<div id=”información”></div>
<div id=”información del marco”></div>
Y el código JavaScript (que solo muestra las nuevas adiciones) se ve así:
var frameinfo = document.getElementById(“frameinfo”);

audio.addEventListener(“MozAudioAvailable”, getBufferData, false);
función getBufferData(evento) {
frameinfo.innerHTML += “[“ + event.frameBuffer[0] + “]”;
}
242CAPÍTULO 11 CARACTERÍSTICAS FUTURAS

FIGURA 11.2Se muestran los datos de
framebuffer del archivo de audio
en pantalla mientras se
reproduce el audio.
Los datos que se muestran en pantalla son los valores flotantes de los datos de audio, como se
muestra enFigura 11.2.

Puede que esto no parezca muy útil en este momento, pero puede usar estos datos para visualizar el
audio mientras se reproduce en una forma de onda o transformada rápida de Fourier.
También puede utilizar la API de datos de audio para escribir en unaudio elemento.
NOTA:Un ejemplo de los datos de un archivo de audio que se muestra como
una forma de onda se encuentra en el sitio web www.html5multimedia.com.
ESCRIBIR DATOS DE AUDIO

La API de datos de audio proporciona tres métodos que le permiten crear su propio audio:
- mozSetup(canales,tasa de muestra).Establece unaudio elemento con un

número de canales y frecuencia de muestreo especificados.
- mozWriteAudio(búfer).Escribe datos de búfer de audio (una matriz) en unaudio

elemento.
- mozCurrentSampleOffset().Devuelve la posición actual del flujo de audio

actual.
Puede llamar a estos métodos en unaudio elemento, que puede ser un elemento
HTML existente para el que haya obtenido un identificador (como lo hizo en los
ejemplos anteriores), o puede crear uno dinámicamente usando elAudio()constructor.
El siguiente ejemplo genera y reproduce un tono simple cuando el usuario hace clic en el botón
Reproducir:
<button onclick="reproducir()">reproducir</button>
API DE AUDIO243
El tocarentonces la función se declara como:
función reproducir () {
var salida de audio = audio nuevo ();
audioOut.mozSetup(2, 44100);
var muestras de audio = new Float32Array(88200);
for (var i=0; i<audioSamples.length; i++) {

muestras de audio[i] = Math.sin(i/60);
}
salida de audio.mozWriteAudio(muestras de audio);
Este ejemplo de código crea un nuevo audio y luego lo configura para que tenga dos
canales de audio a una frecuencia de muestreo de 44100. Luego se define una matriz
flotante con el doble de muestras, y esta matriz se completa con datos de onda
sinusoidal simple (se eligió el divisor de 60 al azar).
Cuando un usuario hace clic en el botón Reproducir, se produce un solo tono largo. No
tiene sentido intentar mostrarte esto en una imagen, así que tendrás que probar el ejemplo
en Firefox o ir a www.html5multimedia.com y escucharlo.
Aunque es muy simple, este ejemplo le muestra cómo puede generar
datos de audio con la API. También puede leer los datos de unaaudio
elemento, manipúlelo (quizás desee cambiar el tono) y luego escríbalo a otro
audio elemento. Todo esto y más es posible a través de esta sencilla API de
datos de audio.
NOTA:Para obtener recursos adicionales y

demostraciones más detalladas de Audio Data API, vaya a
https://wiki.mozilla.org/Audio_Data_API#Additional_Resources.
Veamos ahora la API de audio web más compleja que actualmente está
considerando el W3C.

API DE AUDIO WEB
El borrador de especificación para Web Audio API es bastante grande y complejo, con
una amplia gama de diferentes interfaces y métodos definidos para brindarle una gran
cantidad de control sobre su audio.
Esta sección solo le brinda una breve introducción a la API, por lo que no leerá
sobre todo lo que la API tiene para ofrecer. Pero puede leer la especificación en https://
dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html.
El objetivo de Web Audio API es admitir las siguientes funciones:
- Procesamiento de fuentes de medios deaudio yvideoelementos
- Enrutamiento modular para arquitecturas de efectos simples o complejas
- Síntesis y procesamiento de flujo de audio
- Audio espacializado para juegos 3D y entornos inmersivos (p. ej., atenuación de

distancia, conos de sonido y desplazamiento Doppler)
- Un motor de convolución para admitir una amplia gama de efectos de reproducción

de sonido lineal, como catedral, sala de conciertos, cueva y anfiteatro.
Esta lista de características no es exhaustiva; puede leer sobre más funciones

compatibles en la especificación. No se preocupe si algunos de los elementos de la lista
no significan nada para usted. Tampoco significan mucho para mí porque no soy
ingeniero de sonido y nunca he trabajado con audio complejo. Otros deberían resultarle
familiares, y puede ver cómo la capacidad de crear diferentes audios espacializados, por
ejemplo, sería beneficiosa para el desarrollo de juegos.
Es bastante difícil probar la API en este momento porque la especificación es muy nueva y
todavía está en desarrollo. Solo los navegadores WebKit admiten pequeños fragmentos. Por
esta razón, esta sección no contiene ningún ejemplo de codificación.
API DE AUDIO245
HABILITACIÓNEL API DE AUDIO WEBEN CROMO
Por el momento, solo Chrome y las compilaciones especiales de Safari admiten bits de Web Audio API. Si desea
jugar con la API, su mejor opción es usar la última versión de Chrome; sin embargo, la API está desactivada de
forma predeterminada.
Para habilitar la API de audio web en Chrome, escribasobre:banderasen la barra de direcciones y navegue a esa página. Busque la lista de
Web Audio y haga clic en elPermitirEnlace. Luego, desplácese hacia abajo hasta la parte inferior de la página y haga clic en el botón
Relanzar ahora.
Una vez que Chrome se haya reiniciado, se habilitará la API de audio web.
Similar al lienzo, sobre el que leyó en el Capítulo 9, la Web Audio API contiene un
contexto para manipular cualquier dato de audio. Es este contexto el que debe crearse
para poder usar la API y se hace a través de laContexto de audio()constructor.
Una de las principales características de la API es la idea de enrutamiento modular, que
permite conexiones arbitrarias entre diferentesnodo de audioobjetos—los bloques de
construcción de unContexto de audioobjeto. Cadanodo de audiopuede tener entradas y/o
salidas, que podrían ser un flujo de datos de audio generados o un archivo de audio. Como se
mencionó anteriormente, unnodo de audiose puede conectar a cualquier otronodo de audio,y
puede llamar a diferentes métodos en los diferentes nodos para procesar los datos dentro de
ellos de diferentes maneras a través de varias interfaces. A través de estas interfaces, puede
cambiar los volúmenes denodos de audio,adjuntarlos aaudio o videoelementos, aplicarles filtros,
aplicarles efectos lineales y/o espacializarlos. De hecho, el procesamiento se realiza a través de
nodos de audioy el procesamiento se hace paraNodos de audio.
No se puede negar que Web Audio API será un compañero útil para HTML5 Media API.
Con suerte, las discusiones del Grupo de Trabajo de Audio del W3C darán como resultado
tomar las mejores características de la API de datos de audio y la API de audio web de Mozilla,
y crear una API de audio aún más poderosa. ¡Probablemente sea la primera vez que la palabra
sinergia viene a la mente en el contexto correcto!
Pasemos del audio al video y veamos cómo se pueden facilitar las
videoconferencias y funciones similares, comenzando con la API getUserMedia.

GETUSERMEDIAAPI
Cuando apareció por primera vez la especificación HTML5, se identificaron una serie de
características como "post-HTML5", lo que significa que eran adiciones que debían tenerse en cuenta
para la próxima generación de desarrollo.
Una de estas características era la capacidad de acceder a dispositivos externos en una
computadora o teléfono (las tabletas no eran realmente de uso general en ese momento, ¡aunque
definitivamente son relevantes ahora!), como una cámara web o un micrófono. La idea inicial que se
planteó fue tener un HTMLdispositivoelemento que podría usarse, probablemente con la ayuda de
una API, para acceder a un dispositivo y permitir la toma de fotografías y conferencias web.
Todo esto cambió en marzo de 2011 cuando eldispositivoSe eliminó el elemento y se

presentó una nueva API, la API getUserMedia, para permitir el acceso a dichos
dispositivos.
NOTA:Puede ver la API getUserMedia actual en WHATWG: www.whatwg.org/
specs/web-apps/current-work/multipage/video-conferencing
- y-comunicación-de-par-a-par.html#obtaining-local-multimedia-content.
La API getUserMedia todavía está en desarrollo, por lo que en realidad hay poco que
mostrar en este momento. En marzo de 2011, Opera implementó una prueba de esta nueva
API, pero se requiere una compilación especial de Opera Mobile para Android para la prueba
(http://my.opera.com/core/blog/2011/03/23/webcam -orientación-vista previa).
Cuando se requiere un dispositivo específico, por ejemplo, una cámara web, para realizar
una determinada tarea, se debe pedir explícitamente al usuario que permita el acceso al
dispositivo (el navegador implementará esto y usará algo así como una ventana emergente
con sí /sin botones).
La API contiene actualmente un método:obtener medios de usuario—que acepta los
siguientes parámetros:
- opcionesUna lista separada por comas de tokens de cadena separados por espacios,
el primer token de los cuales debe ser:
– audio.Los medios deben incluir datos de audio.
– video.Los medios deben incluir datos de video; este token puede ir seguido
de "usuario" o "entorno" para indicar las cámaras preferidas para usar. La
especificación actualmente no está clara en cuanto a cuál podría ser la
diferencia entre las dos cámaras.
API GETUSERMEDIA247
- éxitoDevolución de llamada.Este parámetro especifica la función que se va a llamar con
un parámetro de tipoTransmisión de medios locales (leerá sobre esto en la sección
"Stream API" más adelante en este capítulo) si el usuario acepta la solicitud para
comenzar a usar el dispositivo requerido.
- errorCallback.Este parámetro es opcional e indica la función a llamar

cuando el usuario rechaza la solicitud.
Un ejemplo degetUserMediautilizado para obtener acceso al micrófono de un usuario podría
tener este aspecto:
navigator.getUserMedia('audio', audioRecibido);
function audioRecibido(flujo) {
// hacer cosas con el audio
}
La funciónaudioRecibido está listo para ser llamado devolución de llamada exitosa, que
ocurre cuando se ha concedido acceso al micrófono.
Y un ejemplo de cómo solicitar acceso al micrófono y la cámara web de un usuario para
una videoconferencia podría verse así:
navigator.getUserMedia('audio, usuario de video', audioAndVideoReceived);
function audioAndVideoReceived(flujo) {
// hacer cosas con el audio y el video
}
En este caso, el audio y video recibido la función ha sido configurada para ser llamada
sobre éxitoDevolución de llamada.
Por supuesto, estos ejemplos se basan en la recomendación actual, que aún está en
desarrollo y es probable que cambie en el futuro. Pero te dan una idea de cómo podrías
usar la API. Dicha API será útil para implementar no solo videoconferencias, sino
también grabaciones de audio y cámara web, y transmisión de cámara web en vivo para
usar en la web.
Antes de aprender a usar los datos del dispositivo local, echemos un vistazo
rápido a otra API propuesta, la API PeerConnection.

CONEXIÓN DE PAREJAAPI
La API PeerConnection permite que se realicen conexiones entre diferentes pares (por
ejemplo, navegadores web), lo que a su vez permite enviar audio, video y otros datos
entre los pares conectados. Cualquier conexión entre pares requiere un canal de
comunicación o señalización, que se utiliza para enviar mensajes entre los pares y toma
la forma deXMLHttpRequest-basado oWebSocket-comunicación basada en (más adelante
en este capítulo leerá más sobre WebSockets).
APeerConnectionluego se crea un objeto al queañadirStream()Se puede llamar al
método para agregar cualquier flujo de audio y/o video requerido a la conexión. El
añadirStream()método toma un parámetro de tipoflujo de medios,que representa un flujo de
datos multimedia, como contenido de audio y video de una cámara web, que podría crearse
como resultado de una llamada a ungetUserMedia()llamada de la API getUserMedia.
Una vez más, la especificación no está completa y aún no se ha implementado, pero
puede leer sobre ella en www.whatwg.org/specs/web-apps/current-work/multipage/
videoconferencing-and-peer-to-peer- comunicación.html#conexiones de igual a igual.
Ahora tiene dos posibles métodos para obtener unflujo de mediosobjeto que
contiene datos de audio y/o video. Pero, ¿qué puedes hacer realmente con estos
flujo de medios¿objetos? Aquí es donde entra en juego la Stream API propuesta.
API DE CONEXIÓN DE PAREJA249

ARROYOAPI
El objetivo de Stream API es permitirle transmitir datos de audio y/o video desde una fuente
de medios, ya sea un dispositivo local, como una cámara web o un micrófono, o una URL de
transmisión.
Una vez que se han obtenido los datos del flujo de medios, teóricamente se puede
conectar a un HTML5audio o videoelemento y reproducido para el usuario.
En este momento, ninguno de los navegadores actuales es compatible con Stream API, aunque el
enlace de Opera mencionado anteriormente con getUserMedia API hace uso de una implementación
de prueba de algunas de las API.
El bloque de construcción de Stream API es elflujo de mediosobjeto, sobre el que
aprenderá a continuación.
NOTA:Puede ver la especificación actual de Stream API en

www.whatwg.org/specs/web-apps/current-work/multipage/video
- conferencia-y-comunicación-de-par-a-par.html#stream-api.
EL OBJETO MEDIASTREAM
Anteriormente, se le presentó a laFlujo de medios localesyflujo de mediosobjetos. El

Flujo de medios localesobjeto se deriva de laflujo de mediosobjeto, que define un flujo de
medios. Puede contener cero o más pistas de audio y video, cada una de las cuales puede
contener múltiples canales de datos. Cada una de las pistas individuales dentro del objeto se
puede desactivar. Por ejemplo, si un usuario silencia el sonido del video, la pista de audio se
deshabilitará. Todas las pistas disponibles están habilitadas por defecto.
Aflujo de mediosobjeto tiene una entrada y una salida. si unflujo de mediosEl objeto se crea
como resultado de una llamada a ungetUserMedia()llamada de la API getUserMedia, la entrada
será el dispositivo local, como una cámara web o un micrófono. Si elflujo de medios
se crea un objeto como resultado de una llamada a la API PeerConnection, la entrada
serán los datos recibidos del par remoto.

El flujo de mediosobjeto también tiene un método llamadoregistro(),que se utiliza
para iniciar la grabación del dispositivo adjunto. además, elFlujo de medios localesobjeto
tiene undetener()método, que impide que el dispositivo local transmita y/o grabe.
El siguiente ejemplo muestra cómo la API getUserMedia y la API Stream pueden usarse
juntas para transmitir una cámara web directamente a un HTML5.videoelemento:
<reproducción automática de video></video>
<script>
navigator.getUserMedia('usuario de video', webcamReceived);
function webcamRecibido(webcamStream) {
video.src = webcamStream;
}
</script>
En el código anterior, la llamada agetUserMedia()devuelve unflujo de mediosobjeto, al que

se le ha asignado el nombre de variable (arbitrario)cámara webTransmisióny luego se asigna a
lavideoelementos origenparámetro. Por supuesto, esto le muestra cómo podría funcionar un
ejemplo simple; actualmente no hay posibilidad de probarlo en ninguno de los principales
navegadores.
Una vez más, la API de Stream parece muy prometedora para ofrecer soluciones fáciles de
construir para transmisión de audio y cámara web, grabación de audio y video y
videoconferencia. Entonces, Stream API puede ayudarlo a transmitir datos desde estos
dispositivos, pero primero debe configurar una conexión, posiblemente usando una de las API
mencionadas en la sección anterior. Y recordará que WebSockets se mencionó anteriormente
como un posible método de conexión para la API PeerConnection. Por lo tanto, verá
WebSockets a continuación.
API DE FLUJO251
WEBSOCKETAPI
WebSockets proporciona un método para configurar la comunicación bidireccional entre un

navegador y un servidor, que está "siempre abierto" y se ejecuta directamente en TCP en lugar de
usar HTTP. Los métodos HTTP anteriores usaban "sondeo largo", en el que el navegador sondeaba
constantemente al servidor en un esfuerzo por garantizar que la conexión permaneciera abierta.

Estrictamente hablando, la API de WebSocket no es una "característica futura". De hecho,
puede usar WebSockets ahora, aunque aún no se han estandarizado por completo. La
compatibilidad con los navegadores varía: Safari lo admite desde la versión 5, Chrome desde
la versión 10 y Opera lo admite parcialmente desde la versión 11. Firefox admite una versión
propietaria desde Firefox 4 (con el prefijo "Moz").
Nota: los WebSockets no son en realidad parte de HTML5. Tienen su propia
especificación W3C en http://dev.w3.org/html5/websockets.
PROPINA:Los WebSockets están deshabilitados de forma predeterminada en
Opera 11.50, pero puede habilitarlos escribiendoacerca de: configuraciónen la barra de
direcciones y buscando "WebSockets".
La conexión entre el navegador y el servidor se mantiene abierta; por lo tanto, solo

se envían los datos que deben enviarse, sin gastos generales. Compare esto con las
llamadas Ajax, que configuran una nueva solicitud HTTP e intercambian con cada dato
que debe enviarse.
NOTA:Una sobrecarga en este caso es información adicional además de los

datos reales que se enviarán que HTTP necesita enviar y recibir con cada
solicitud para comunicarse.
LA INTERFAZ WEBSOCKET
La interfaz de WebSocket es realmente bastante simple de usar. AWebSocketconstructor

(MozWebSocketen el caso de Firefox) puede aceptar dos parámetros: elurl que especifica
la URL del servidor WebSocket para conectarse y un opcionalprotocolos
parámetro, que es una cadena o una matriz de cadenas que especifica el protocolo
requerido.
252CHAPTER 11 FUTURE FEATURES

Una vez que se ha realizado una conexión y unaWebSocket se devuelve el objeto,
puede utilizar una serie de métodos y atributos.Tablas 11.1y11.2enumere estos
métodos y atributos.
NOTA:La especificación no es clara en cuanto a qué cadena
valora elProtocolos WebSocket()atributo puede contener:
var con = new WebSocket('wss://echo.websocket.org');
Este código intenta obtener una conexión con el

servidor WebSocket wss://echo.websocket.org.
TABLA 11.1Métodos de WebSocket
MÉTODO DESCRIPCIÓN
enviar datos) Envía los datos especificados a través de la conexión abierta. Los datos pueden ser
uncuerda,unbúfer de matriz,o unGota.
cerca() Cierra la conexión abierta.
TABLA 11.2Atributos de WebSocket
listoestado Contiene el estado actual de la conexión WebSocket, que puede ser uno de
los siguientes (los valores enteros correspondientes se muestran entre
paréntesis):
CONECTANDO (0). La conexión aún no se ha establecido.
ABIERTO (1). La conexión se establece y la comunicación a través

de ella es posible.
CLAUSURA (2). La conexión se está cerrando actualmente.
CERRADO (3). La conexión se ha cerrado o no se ha podido

abrir.
monto almacenado en búfer Contiene el número de bytes que se han puesto en cola usando el
enviar()pero aún no se han enviado a través de la conexión. Esto no
incluye los gastos generales utilizados por el protocolo.
extensiones Contiene las extensiones seleccionadas por el servidor (si las hay).
protocolos Contiene el subprotocolo que el servidor ha seleccionado para su uso (si corresponde).
API WEBSOCKET253
Cuando la conexión WebSocket está abierta, puede usar elenviar()método para
enviar datos a través de la conexión al servidor WebSocket. Por supuesto, debe saber
cuándo está abierta la conexión WebSocket antes de poder hacerlo. Para eso, por
supuesto, debe esperar los eventos. La especificación especifica cuatro de estos
eventos y se enumeran enTabla 11.3.
TABLA 11.3Eventos de WebSocket
EVENTO DESCRIPCIÓN
al abrir Se genera cuando se ha realizado correctamente una conexión WebSocket con el

servidor en cuestión.
enmensaje Se genera cuando se ha recibido un mensaje a través de la conexión

WebSocket abierta.
cerrar Se genera cuando se cierra la conexión WebSocket abierta.
onerror Se genera cuando la conexión WebSocket abierta informa un error.
Y eso es todo para la interfaz WebSocket. La siguiente sección reunirá algunos

de estos métodos, atributos y eventos usando un ejemplo simple.
USO DE WEBSOCKETS
Usando lo que acaba de leer en la sección anterior, construyamos un ejemplo

simple de WebSocket que abre una conexión WebSocket y envía y recibe datos de
un servidor WebSocket.
NOTA:Configurar un servidor WebSocket está fuera del alcance

de este libro, pero puede configurar su propio uso de node.js.
Remy Sharp detalla una cuenta de cómo puede hacer esto en
http://remysharp.com/slicehost-nodejs-websockets.

Para este ejemplo, utilizará el servidor WebSocket wss://echo.websocket.org, que
está disponible gratuitamente y simplemente repite los datos que le envía.
Primero debe configurar algo de HTML que permita abrir y cerrar la conexión y enviar
datos a través de algunos botones simples. También necesitas unentrada ficampo para
ingresar el mensaje a enviar y luego un simpledivisión para mostrar los datos que se enviaron
y recibieron:
<div>
Estado de conexión: <span id=”conStatus”>Cerrado</span>
</div>
<button id=”conectar” onclick=”conectar()”>conectar</button>
<button id=”close” onclick=”closeConnection()”>cerrar</button>
<div>
<label for=”msg”>Mensaje</label>
<entrada id=”mensaje” tipo=”texto” />
<button id=”enviar” onclick=”enviar()”>enviar</button>
</div>
<div id=”pantalla”></div>
Veamos el código JavaScript requerido.

Primero debe definir una variable para almacenar la conexión WebSocket:
var contra;
Ahora echemos un vistazo a laconectar()función:
función conectar() {
con = nuevo WebSocket('wss://echo.websocket.org');
con.onopen = función () {
establecerEstado(“Abierto”);
};
con.onmessage = función (e) {
displayMsg(“Servidor: “ + e.datos);
};
API WEBSOCKET255
con.onclose = función (e) {
setStatus(“Cerrado”);
};
con.onerror = función (error) {
setStatus(“Error” + error);
};
}
Comienza haciendo una llamada al constructor WebSocket para abrir la conexión. Luego asigna
diferentes funciones a cada uno de los eventos mencionados en la Tabla 11.3 para que se llamen
cuando se genere ese evento en particular.
El establecerEstado()la función simplemente cambia el mensaje de estado en el conStatus
lapsodefinido en el HTML:
función establecerEstado(estado) {
document.getElementById('conStatus').innerHTML = estado;
}
Del mismo modo, elmostrarmensaje()la función simplemente agrega la cadena en cuestión a la
pantalladivisión:
función mostrarMensaje(mensaje) {
document.getElementById('display').innerHTML += mensaje + “<br />”;
El conexión cercana()La función comprueba si la conexión está cerrada

(estado de conexión 3), y si no, llama alcerca()método en elWebSocketobjeto:
función cerrarConexión() {
if (con.readyState != 3) con.close();
}

FIGURA 11.3Después de hacer clic en
el botón Conectar y abrir la conexión
(izquierda), se envía un mensaje de
prueba a través del WebSocket
abierto y se repite en la pantalla
(derecha).
Y por último pero no menos importante, elenviar()la función verifica si la conexión está
realmente abierta (estado de conexión 1), lee el valor ingresado en el mensajeaporte
campo, muestra el valor en pantalla y luego lo envía a través de la conexión abierta:
función enviar() {
if (con.readyState == 1) {
var mensaje = documento.getElementById(“mensaje”).valor;
mostrarMensaje(“Cliente: “ + mensaje);
con.send(mensaje);
}
}
El código resultante no tiene mucho que ver, pero muestra claramente lo fácil que es usar
la API de WebSocket para la comunicación bidireccional con un servidor WebSocket.
Figura 11.3muestra cómo se vería el código anterior en acción.
NOTA:El código de este ejemplo está

disponible en www.html5multimedia.com.
API WEBSOCKET257
Entonces, ¿qué tienen que ver los WebSockets con los medios HTML5? Bueno, esa es una
buena pregunta, porque en cualquier aplicación relacionada, la Stream API se usará en el
futuro para transmitir datos de audio y video. Pero en una aplicación que utiliza la transmisión
de audio y video, también es muy posible que sea necesario transferir otros datos. Por
ejemplo, como se mencionó anteriormente, la API PeerConnection podría utilizar WebSockets
para la comunicación entre pares. Además, imagine que tiene una aplicación de chat de video
a la que también desea agregar un chat de texto (en caso de que los usuarios quieran silenciar
el sonido).
Por el momento, hay, por supuesto, una serie de aplicaciones disponibles que
brindan funciones como video y chat de audio, pero son solo eso, aplicaciones.
Necesitan ser instalados.
De manera similar, a través del navegador, también puede usar Flash para proporcionar
la misma funcionalidad, pero nuevamente, eso requiere que se instale algo adicional, en este
caso, un complemento de terceros. Y recuerda que el iPad, por ejemplo, no soporta Flash.
En el futuro, tener toda esta capacidad integrada en el navegador significa que mientras el
navegador sea compatible con estas API (lo que todos los principales navegadores deberían,
eventualmente), no se necesitará nada más para ofrecer la funcionalidad requerida. Simplemente
funcionará. Y eso sí que es un paso en la dirección correcta.
258 CAPÍTULO 11 CARACTERÍSTICAS FUTURAS

ENVASE ARRIBA
Las características futuras que ha aprendido en este capítulo le han dado una
idea de lo que podría necesitar aprender más si está pensando en
implementar algo más que audio y video en su sitio web.
La API de audio propuesta, una vez que esté terminada, le permitirá manipular el audio antes de
reproducirlo para sus usuarios, por ejemplo, aprovechando una configuración de sonido avanzada.
Los desarrolladores de juegos también se beneficiarán de la API extendida porque les permitirá crear
y editar sonido de forma dinámica.
La creación de videoconferencias simples es un paso más hacia la realidad con las

próximas API getUserMedia, PeerConnection y Stream. Estos deberían funcionar bien juntos
para ayudarlo a brindar una solución de transmisión de video y audio a sus usuarios.
Y, por último, la API de WebSocket le permite mejorar sus sitios web y aplicaciones que
usan las otras API que se analizan en este capítulo, lo que permite que los datos se transfieran
de manera eficiente a través de las conexiones web.
Este capítulo final respalda el hecho de que HTML5 multimedia todavía está cambiando y
creciendo. Y aunque la especificación se encuentra actualmente en "Última llamada" (para
cambios), otras especificaciones que ayudarán a mejorar HTML5 seguirán creciendo a partir de
ella.
Nunca dejes de aprender, porque nunca puedes saber lo suficiente o todo.
TERMINANDO259
ÍNDICE
NÚMEROS Reproductor multimedia Adobe Flash, 25–26, 29
en Internet Explorer 8, 57–58

API 2D, 199–200. Ver también lienzoelemento
usando empotrarelemento, 56
contexto de dibujo 2D, usando, 199
todo tipo de medio, 76
Transformaciones 2D. Ver también transforma
carácter de y comercial (&), incluso en video
matriz() función, 153 señales, 183
vídeos giratorios, 150
Soporte de video de Android, 64–65, 80–81
videos de escalado, 148–150
animateMotion elemento, utilizando con SVG
videos sesgados, 151 máscaras de vídeo, 231
apoyo para, 148 animación de máscaras de vídeo SVG, 228–229

traducir videos, 151–153 modo de relleno de animación propiedad, usando,
Equivalentes de X e Y, 153 164–165
Transformaciones 3D. Ver también transforma API. Ver también API de JavaScript
perspectiva propiedad, 154, 156 Datos de audio, 240–244
elementos giratorios, 154, 156–157 API getUserMedia, 247–248
usando, 154–157 Conexión entre pares, 249
W3Definición C, 154 Portada Corriente, 250–251
de video en 3D, 169–170 Audio web, 245–246

WebSocket, 252–258
SÍMBOLOS subprograma elemento, usando con complementos, 28
aplicación/ogg tipo MIME, 62

& (ampersand) carácter, incluso en video
artículo elemento, 10, 13–16
señales, 183
aparte elemento, 18
< (corchete angular izquierdo), incluso en video
compatibilidad con navegador de audio, 49–
señales, 183
51 códecs de audio, definidos, 46 controles
> (paréntesis de ángulo recto), incluso en señales de
video, 183 de audio, 34
API de datos de audio
A acceder a datos, 241
datos de framebuffer, 242–243

Audio AAC (codificación de audio avanzada)
código JavaScript, 242
formato, 48
metadatos cargados evento, 241
navegador compatible con,
mozChannels atributo, 241
49 accesibilidad
mozCurrentSampleOffset() método, 243
audiencia para, 174
mozFrameBufferLength atributo, 241
clave de verificación () función, 194 mejora para
mozSampleRate atributo, 241
controles personalizados, 192–194 barra de progreso,
mozSetup() método, 243
194
mozWriteAudio() método, 243
formato de archivo SRT, 175
tocarfunción, 244
WebVTT (pistas de texto de video web), 176
lectura de datos de audio, 240–243
escritura de datos de audio, 243
260 ÍNDICE
declaración de audio, 34 navegadores
audio elemento compatibilidad, 20
auto-reproducción atributo, 33 codificación de archivos de audio, 50
control S atributo, 33, 52–53 legado, 51
origen cruzado atributo, 33 botónnombre de clase CSS, 10
círculo atributo, 33
grupo de medios atributo, 33 C

apagado atributo, 33
Camen, Kroc, 75
silenciar archivos, 53
lienzoelemento.Ver también API 2D
reproducir archivos de audio, 52
atributos, 198
precarga atributo, 32, 53
soporte del navegador para,
origenatributo, 32
198 borrar contenidos de, 203
uso en multimedia nativa, 32–34 uso
definir, 198
de transiciones con, 143–144 archivos
contexto del dibujo, 199
de audio
llenarRect()función, 199–201
codificación, 50
hacerse cargo, 199
jugando, 52–58
altura atributo, 198
formatos de audio
anulando dimensiones predeterminadas, 202
AAC (codificación de audio avanzada), 48–49
sitio web, 212
compatibilidad con navegador, 49–51
ancho atributo, 198
MP3, 47, 49
Ejes X e Y, 198 Biblioteca JavaScript
MP4, 48–49
Captionator, 188 subtítulos, elemento
MPEG, 47
para, 19
Ogg Vorbis, 46, 49
Hojas de estilo en cascada (CSS).VerCSS
WAV (formato de archivo de audio de forma de onda),
(Hojas de estilo en cascada)
48–49
codificación de caracteres, proporcionando,
9 elemento charset, 9
B Cromo
retrocompatibilidad, 5 habilitar Web Audio API en, Web
Berners-Lee, Tim, 4 API de audio, 246
filtro blanco y negro, aplicación, 235–236 opacidadconsideración, 146
Blender Foundation, 162 tasa de reproducciónatributo, 111
difuminar, agregar al video, 236 soporte de video, 64
brailletipo de medio, circle-animate-motion.svg file, 230
compatibilidad con 76 navegadores códec
formatos de audio, 49–51 definido, 62
lienzoelemento, 198 incluso enescribeatributo, 70
SVG (Gráficos vectoriales escalables), 217 filtro de matriz de saturación de color, aplicación,
formatos de video, 64–66, 114–115 contenedor 234, definido, 62
ÍNDICE261
contenidonombre de clase CSS, 10 CSS3.Ver también Reglas CSS3 específicas de WebKit
controlatributo, utilizando con archivos de vídeo, 67 gradiente, 123–125
controles.Ver también API de JavaScript gradientes lineales, 125
accesibilidad de, 192–194 botón de ajuste de objetopropiedad, 129–131
avance rápido, 110–111 botón de posición del objetopropiedad, 132–134
silencio, 104–107 opacidadpropiedad, 122
Botón de reproducción/pausa, 98–102 esquinas redondeadas, 126–127
barra de progreso, 107–109 sombra, 126–128
eliminación de videos, 100 botón contenido de dimensionamiento,
de rebobinado, 110–111 128–134 especificación, 122
barra de búsqueda, 112–113 Animaciones CSS3
Botón de parada, 98–102 portada de video 3D, 169–170
Botón de volumen, 104–107 definición, 160
copiar reproducir video, 205–207 desde propiedad, 159
derechos de autornombre de clase CSS, 10 Función de fotogramas clave, 158–161
crearElemento()función, utilizando, 208 propiedades, 160
origen cruzado atributo, 36 CSS (hojas girar, 167–168
de estilo en cascada), 118 a propiedad, 159
interpretación, 9 portada de vídeo, 161–166
modo peculiaridades, 9 especificación W3C, 158
modo estándar, 9 Especificación de transiciones CSS3, 147
nombres de clases CSS tiempo actual configuración, captura, 108–109
botón, 10 controles personalizados. Ver también API de JavaScript
contenido, 10 accesibilidad de, 192–194 botón de
derechos de autor, 10 avance rápido, 110–111 botón de
pie de página, 10 silencio, 104–107
encabezamiento, 10 Botón de reproducción/pausa, 98–102
menú, 10 barra de progreso, 107–109
navegación, 10 eliminación de videos, 100 botón
pequeña, 10 de rebobinado, 110–111
texto, 10 barra de búsqueda, 112–113
título, 10 Botón de parada, 98–102
Estilo CSS Botón de volumen, 104–107
división para título de video, 119–
120 título agregado al video, 119 D

ejemplo de video, 118–121
Reproductor multimedia DirectShow, 25
Transiciones CSS, estilo con, 144–145. Ver
división elemento, 13
además transiciones
elemento DOCTYPE, 7–8
sitio web CSS2, 75
262 ÍNDICE
descargas Versitios web máscara de elipse
dibujarImagen()función, usando, pantalla agregando al video, 226–227

tiro, 202 máscaraelemento, 227
sombra paralela, agregando al video, 144–145, 155 usarelemento, 227

DTD (Definición de tipo de documento), empotrarelemento, usando con complementos, 28
definido, 223
en relievetipo de medio, 76
Proyecto de película abierta Durian, 162
codificadores para audio
Conversor de medios, 50
mi Miro Video Converter, 50 subtítulos
elementos en inglés, especificando, 186
detector de eventos, agregando parapulsación de teclaevento, 194

subprograma,28
artículo,13–16 eventos en la API de JavaScript
aparte,18 abortar,93
Poder jugar,93
juego de caracteres, 9
juego de caracteres,9
puede jugar,94
cambio de duración,94
DOCTIPO, 8–9
empotrar,28
vaciado,93
terminó,94
título de la figura,19
figura,19 error,93
pulsación de tecla,194
pie de página, 11
escuchando, 102–104
h,dieciséis
datos cargados,89, 93
encabezamiento, 11
metadatos cargados,93, 202

grupo h,12
inicio de carga,93
nombrar, 10
al hacer clic,106, 110
navegación, 17
pausa,94, 104
objeto,28
pausaytocar,102–103
parámetro,30
tocar,94
para complementos, 28
jugando,94
rango,104
Progreso,93
valet, 20
cambio de tasa,94
sección,13–16
buscado,94
svg,217–218
buscando,94
modo w,30
estancado,93
suspender,93
subtítulo de entrada, 180–181
cambio de tiempo,95
Reproductor de video Playr, 190
actualización de tiempo,94–95
entrada de subtítulos, 179
cambio de volumen,94
actualizandolienzoelemento, 206
espera,94
texto de señal de video, 182–183
Lenguaje de marcado extensible (XML), 4
ÍNDICE 263
F tocar(),96–97, 101
reproduce el video(),96
botón de avance rápido, adición, 110–111
ponerImagenData(),209
feColorMatrix fifiltro, 233
establecerIntervalo()función, 205
feGaussianBlur fifiltro, aplicar, 236
establecerPosiciónJuego(),112–113
figcaptionelemento, 19
alternar silenciar(),106
figuraelemento, 19
alternarReproducir(),101, 103
llenar atributo, ajuste acongelar,231
usando, 96
llenarRect()función, usando con lienzo,
199–202
filtrardefinición de elemento, 233–237 GRAMO
Firefox Gasston, Peter, 80

soporte de audio, 49 Desenfoque gaussiano, aplicación a video, 236
soporte de vídeo, 64 subtítulos en alemán, especificación, 186
Flash fallback, uso con archivos de video, 73 getImageData() función, usando, 209
Reproducción de archivos Flash, 55 Flash API getUserMedia, 247–248
Player, 25–26, 29 audio parámetro, 247
en Internet Explorer 8, 57–58 errorCallback parámetro, 248
usando empotrarelemento, 56 acceso al micrófono, 248
Flash Player 10.2 opciones parámetro, 247
falta de apoyo para, 27 éxitoDevolución de llamada parámetro, 248
vulnerabilidad en, 27 videoparámetro, 247

pie de páginaelemento, 10–11 Google Chrome
patente Fraunhofer, 47 habilitar Web Audio API en, Web
funciones en la API de JavaScript API de audio, 246
agregarEventListener(), 102 opacidadconsideración, 146
agregarPistaTexto(), 97 tasa de reproducciónatributo, 111
puedePlayType(), 97 soporte de video, 64
cambiar la velocidad de reproducción (), 110 gradientes
cambiarVolumen(), 105 uso en CSS3, 123–125 uso con video,
borrarIntervalo() función, 206 123–125 video en escala de grises,
crearElemento(), 208 reproducción, 208–212
dibujarImagen(), 201
llenarRect(), 201–202 H
encontrarPos(), 113
h elemento, utilizando en encabezamiento,
getImageData(), 209
16 formato de vídeo H.264 (MP4), 63
carga(), 97
codificador de video de freno de mano,
Matemáticas.piso(), 105
descargando, 66
pausa(), 97, 101
264 ÍNDICE
Mano tipo de medio, 76 html5shimguión, descarga, filtro de
encabezamiento elemento, 10–11 rotación de 20 tonos, aplicación, 234
hgrupo elemento, 12
Hickson, Ian, 6, 10 I
HTML (lenguaje de marcado de hipertexto), 4 controles
enlaces de imagen, uso con archivos de video, 72–75
HTML, especificando el orden de tabulación de, 192 HTML5
Datos de imagencontenido del objeto
datos atributo, 209

disponibilidad de, 7
altura atributo, 209
compatibilidad con versiones
ancho atributo, 209
anteriores, 5 frente a HTML4.01, 4
HTML interno,ajuste, 20
progresión de, 4–6
interiorShivscript, descarga, 20 Internet
rangoelemento, 193
Explorer 9, multimedia nativa en, 42
tabindexatributo, 192–193
Internet Explorer (IE), 5
soporte de video, 65
compatibilidad del navegador, 20
Especificación W3C, 4–6
Especificación WHATWG, 4–6
compatibilidad con vídeo de iOS, 64
elementos HTML5
subprograma,28
artículo,13–16 j
aparte,18 API de JavaScript.Ver también API; personalizado
juego de caracteres,9 control S
DOCTIPO, 7–8 atributos de audio, 87–91
empotrar,28 pistas de audioatributo, 90
título de la figura,19 auto-reproducción atributo, 87
figura,19 amortiguadoatributo, 89
pie de página, 11 comprobación de vídeo en bucle, 92
h,dieciséis controladoratributo, 90
encabezamiento, 11 control S atributo, 88
grupo h,12 origencruzatributo, 88

nombrar, 10 fuente actualatributo, 88
navegación, 17 tiempo actual atributo, 90, 92, 95, 101
objeto,28 por defecto silenciadoatributo, 90
parámetro,30 tasa de reproducción predeterminadaatributo, 90
para complementos, 28 duraciónatributo, 87
rango,104 terminadoatributo, 87
valet, 20 getElementsByTagName()función, 92
sección,13–16 asa de agarre para objeto de video, 92
svg,217–218 altura atributo de vídeo, 91
modo w,30 tiempo inicial atributo, 90
ÍNDICE265
API de JavaScript (continuado) inicio de carga,93
círculo atributo, 88 al hacer clic,106, 110
grupo de medios atributo, 90 pausa,94, 104

apagado atributo, 88 pausaytocar,102–103
estado de la red atributo, 88 tocar,94
en pausaatributo, 87 jugando,94
tasa de reproducciónatributo, 87 Progreso,93
jugó atributo, 90 cambio de tasa,94
póster atributo de vídeo, 91 buscado,94

precarga atributo, 89 buscando,94
listoestado atributo, 89 estancado,93
buscable atributo, 90 suspender,93
buscando atributo, 89 cambio de tiempo,95
origenatributo, 88 actualización de tiempo,94–95
startOffsetTime atributo, 90 cambio de volumen,94
hora de inicio atributo, 88 espera,94

pistas de texto atributo, 90 Métodos de la API de JavaScript
Intervalo de tiempo objeto, 91 agregarEventListener(), 102

título atributo, 101 agregarPistaTexto(), 97
tutoría, 86 puedePlayType(), 97
atributos de vídeo, 87–90 cambiar la velocidad de reproducción (), 110
videoAltura atributo de vídeo, 91 cambiarVolumen(), 105
videopistas atributo, 90 borrarIntervalo() función, 206

ancho de video atributo de vídeo, 91 crearElemento(), 208
volumen atributo, 87 dibujarImagen(), 201
audio web, 240 llenarRect(), 201–202

ancho atributo de video, 91 encontrarPos(), 113
eventos de la API de JavaScript getImageData(), 209

abortar,93 carga(), 97
Poder jugar,93 Matemáticas.piso(), 105
puede jugar,94 pausa(), 97, 101

cambio de duración,94 tocar(),96–97, 101
vaciado,93 reproduce el video(),96
terminó,94 ponerImagenData(),209
error,93 establecerIntervalo()función, 205
pulsación de tecla,194 establecerPosiciónJuego(),112–113
escuchando, 102–104 alternar silenciar(),106
datos cargados,89, 93 alternarReproducir(),101, 103
metadatos cargados,93, 202 usando, 96
266 ÍNDICE
Bibliotecas JavaScript Media Converter, descarga, 50, 66 reproductores
Subtitulador, 188 multimedia. Ver también complementos
Reproductor LeanBack, 188 Flash de Adobe, 25–26
MediaElementJS, 188 Reproductor multimedia Adobe Flash,
jugador, 188 29 DirectShow, 25
jQuery, usando, 20 complementos, 27
js_videosub, descargando, 188 Tiempo rápido, 26
jscaptions, descargando, 188 JW RealAudio, 24

Player, descargando, 55 problemas de seguridad, 27
onda de choque, 25
k Reproductor de Windows Media, 25–26
consultas de medios
Kaltura, descarga, función de
relación de aspectocaracterística del dispositivo, 77
188 fotogramas clave
colorcaracterística del dispositivo, 77
quitar la tapa,165, 169
Indice de colorfunción del dispositivo, 77
usando, 158–161
combinación con tipos de medios, 77
usando con portada de video, 164
funciones del dispositivo, 77
pulsación de teclaevento, agregando detector de eventos para, 194
relación de aspecto del dispositivocaracterística, 77
altura del dispositivocaracterística, 77
L ancho del dispositivocaracterística, 77
Etapa “Última llamada”, 6 redcaracterística del dispositivo, 77
Biblioteca JavaScript de LeanBack Player, 188 altura característica del dispositivo, 77
paréntesis angular izquierdo (<), incluso en video monocromocaracterística del dispositivo, 77
señales, 183 orientacióncaracterística del dispositivo, 77
comando lineto, usando con video SVG resolucióncaracterística del dispositivo, 77
máscaras, 231
escanearcaracterística del
“Enlaces y anclas”, 5 dispositivo, 77 especificación, 76
metadatos cargados evento, usando, 202

probando con, 79
luminancia a filtro alfa, aplicando, 235 usando, 75–78, 80
ancho característica del dispositivo,
METRO 77 tipos de medios
todo,76
Reproductores multimedia Macromedia, 25
braille,76
hazlo gris() función
combinar con media queries, 77
llamando, 212
en relieve, 76
definición, 210
Mano, 76
máscarasVer también vídeo SVG mascarillas
impresión, 76
agregar sobre video, 136–137 aplicar a
proyección, 76
videoelemento, 222–223 definición en
pantalla, 76
SVG, 221
ÍNDICE267
tipos de medios (continuado) Complementos de Microsoft, 26
habla, 76 MIDI (interfaz digital de instrumentos musicales)
probando con, 79 formato, 24
tty, 76 MIME (correo de Internet multipropósito

Ampliación), 29, 47
televisión, 76
aplicación/ogg tipo, 62
usando, 75–78, 80
vídeo/mpeg tipo, 63
Biblioteca de JavaScript MediaElementJS, 188
video/webm tipo, 63
grupo de medios atributo, 36
Miro Video Converter, descargando, 50, 66
flujo de mediosobjetos
Biblioteca de detección Modernizr,
entrada y salida, 250
descargando, 115
Flujo de medios localesobjeto, 251
Mozilla Firefox
obtener, 249
soporte de audio, 49
registro() método, 251
soporte de vídeo, 64
usando, 250–251
API de datos de audio de Mozilla
menú Nombre de clase CSS, 10
acceder a datos, 241
métodos en la API de JavaScript
datos de framebuffer, 242–243
agregarEventListener(), 102
código JavaScript, 242
agregarPistaTexto(), 97
metadatos cargados evento, 241
puedePlayType(), 97
mozChannels atributo, 241
cambiar la velocidad de reproducción (), 110
mozCurrentSampleOffset() método, 243
cambiarVolumen(), 105
mozFrameBufferLength atributo, 241
borrarIntervalo() función, 206
mozSampleRate atributo, 241
crearElemento(), 208
mozSetup() método, 243
dibujarImagen(), 201
mozWriteAudio() método, 243
llenarRect(), 201–202
tocarfunción, 244
encontrarPos(), 113
lectura de datos de audio, 240–243
getImageData(), 209
escritura de datos de audio, 243
carga(), 97
formato de audio MP3, 47, 49 MP4
Matemáticas.piso(), 105
(H.264), 48
pausa(), 97, 101
compatibilidad con navegador, 49, 64–65
tocar(),96–97, 101
codificación de reproducción retrasada, 66
reproduce el video(),96
formato de video, 63
ponerImagenData(),209
MPEG (Grupo de expertos en imágenes en movimiento), 47, 63
establecerIntervalo()función, 205
multimedia. Verreproductores multimedia; nativo
establecerPosiciónJuego(),112–113
multimedia
alternar silenciar(),106
Botón de silencio, adición, 104–107
alternarReproducir(),101, 103
apagado atributo, configuración, 67
usando, 96
silenciar archivos, 53
268 ÍNDICE
Botón Reproducir/Pausar, agregar, 98–102 biblioteca
norte
Playr JavaScript, 188–191 complementos. Ver
multimedia nativa
también reproductores multimedia
audio elemento, 32, 52
subprograma elemento, 28
beneficios, 31
empotrarelemento, 28
en Internet Explorer 9, 42
objeto elemento, 28
en Safari, 42
parámetro elemento, 30
fuente elemento, 38–39
uso con reproductores multimedia, 27
pista elemento, 40–41
modo w elemento, 30
videoelemento, 35–37
impresión tipo de medio, 76
navegación elemento, 10, 17
barra de progreso
sitio web node.js, 254
agregando, 107–109
agregando para accesibilidad, 194

O progreso de actualización() función, 108–109
objeto elemento, uso con complementos, 28–29 utilizando rangoelemento como, 193
Formato de audio Ogg Vorbis, 46, 49 proyección tipo de medio, 76 Aplicación
soporte de navegador para, 49 ProtoFluid, descarga, 79

usando, 52 ponerImagenData() función, utilizando, 209
opacidadvalor
desvanecimiento, 146–147 q
usando en CSS3, 122 Soporte de
Reproductor multimedia QuickTime, 26
video de Opera, 64, 133 Algoritmo
modo peculiar, 9
de esquema, 16
R
PAGS
rangoelemento, usando como barra de progreso,
parámetro elemento, usando con complementos, 30
193 gráficos rastar, 216
sendero elemento, utilizando con vídeo SVG
Reproductor de audio real, 24
máscaras, 231
reflexión, especificando en elementos HTML,
API de conexión de pares, 249
135–136
perspectiva propiedad, usando con 3D
botón de rebobinado, adición, 110–
Transforma, 154
111 canales RGB, conversión, 235
Pfeiffer, Silvia, 184
corchete de ángulo recto (>), incluso en video
pixelData objeto, manipulación de datos en,
señales, 183
210–211
girar transformar, usando, 150, 164
píxeles, ajuste de transparencia para, 235
rotar3d() transformar, usando, 167–168 esquinas
reproducir video, copiar, 205–207. Ver también
redondeadas, usando en CSS3, 126–127
copia de vídeo
ÍNDICE 269
S sitios (continuado)
Fundación Blender, 162

Safari
Diseño Camen, 75
soporte de audio, 49
conceptos básicos de lienzo, 200, 212
multimedia nativa en, 42
Biblioteca JavaScript Captionator, 188 CSS2, 75
tasa de reproducciónatributo, 111
Gradientes lineales CSS3, 125
Gráficos vectoriales escalables (SVG)
Especificación CSS3, 122
ventajas, 216–217, 222
Especificación de transiciones CSS3, 147
soporte del navegador, 217
dibujarImagen()función, 202
circulo elemento, 219
Durian Open Movie Project, 162
elipseelemento, 220
API getUserMedia, 247
llenar atributo para el color del texto, 218
freno de mano, 66
textoelemento, 218
Esquemas de documentos HTML5, 16
escalatransformar, usando, 148–150
html5shimguion, 20
pantallatipo de medio, captura
interiorShivguion, 20
de pantalla 76
Tutorial de JavaScript, 86
dibujarImagen()función, 202–203
js_videosub, 188
llenarRect()función, 201–202
jscaptions, 188
metadatos cargados evento API, 202
Jugador JW, 55
proporciónvariables, 202
Calatura, 188
quebrar()función, 203
Biblioteca JavaScript de LeanBack Player,
toma de video HTML5, 201–204
188 “Enlaces y anclajes”, 5
valeelemento t, 20
máscarapropiedad, 137
secciónelemento, 13–16
Conversor de medios, 50, 66
barra de búsqueda, agregando, 112–113
consultas de medios, 76
sombras, usando en CSS3, 126–128 Sharp,
Biblioteca de JavaScript MediaElementJS, 188
Remy, 20, 254
Miro Video Converter, 50, 66
onda de choque, 25
Biblioteca de detección Modernizr, 115 MPEG (Grupo de
Sintelanimación de portada de video, 162
expertos en imágenes en movimiento), 63 node.js, 254
sitios
API 2D, 199

ajuste de objetopropiedad, 134
Transformaciones 2D, 153
posición del objetopropiedad, 134
Transformaciones 3D, 154, 157
API PeerConnection, 249
Soporte de video Android, 80
Biblioteca Playr JavaScript,
animarelemento, 229
188 Aplicación ProtoFluid, 79
animateMotion elemento, 231
reflejarpropiedad, 137
estado-de-reproducción-de-animaciónpropiedad, 160
Sintelanimación de portada de video, 162
API de datos de audio, 244
Stream API, 250
270 ÍNDICE
programa SubRip, 175 elipseelemento, 220
filtros SVG, 233 llenar atributo para el color del texto, 218
SVGtextoatributos de los elementos, 218 textoelemento, 218
Theora Ogg, 62 Vídeo SVG y HTML5, 220.Ver también vídeos

transforma, 157 adición de máscaras de elipse, 226–227
propiedades de transición, adición de máscaras de texto, 221–225
142 API WebSocket, 252 SVGelemento, 217–218, 224

Servidores WebSocket, 254 filtros SVG
Estatuto del grupo de trabajo de WebVTT, 176 aplicación a video HTML5, 233–237
Estatuto del grupo de trabajo, 184 blanco y negro, 235–236
Fundación Xiph.Org, 62 matriz de saturación de color, 234
sesgartransformar, usando, 151 matriz de colores fe,233
pequeñanombre de clase CSS, 10 desenfoque fegaussiano,236
quebrar()función rotación de tono, 234
uso con captura de pantalla, 203 uso luminancia a alfa, 235

con copia de video, 205–206 fusión, 237
fuente elemento SVGtextoatributos de los elementos,llenar atributo
medios de comunicaciónatributo, 39
para el color del texto, 218
origenatributo, 39 Máscaras de vídeo SVG.Ver también mascarillas
escribeatributo, 39 animarelemento, 229
hablatipo de medio, 76 animateMotion elemento, 231
girarFunción de fotogramas clave, definición, 167–168 animando, 228–229
Formato de archivo SRT, 175, 188 Nombre del Atributoatributo, 229
modo estándar, 9 circulo elemento, 231
Botón Detener, agregar, 98–102 circle-animate-motion.svg file, 230

Stream API, 252 defselemento, 224
objetivo de, 250 tipo de documentodeclaración, 224
flujo de mediosobjeto, 250–251 elipseelemento, 228
programa SubRip, descarga, 175 llenar atributo, 231
subtítulos linea de mando, 231
Agregar a videos, 189–191 en movimiento, 230–233
Inglés, 186 ruta melemento, 232
alemán, 186 sendero elemento, 231
usando, 175 texto.svg file, 224
SVG (gráficos vectoriales escalables) xenlacedefinición de documento, 224
ventajas, 216–217, 222 formato de archivo SWF, 25
soporte del navegador, 217
circulo elemento, 219
ÍNDICE271
T tu
orden de tabulación, especificación de controles, 192–193 Codificación de caracteres UTF-8, 9
textonombre de clase CSS, 10
máscara de texto, agregando al video, 221–225 V

Formato de compresión de video Theora Ogg, 62,
gráficos vectoriales, 216
64–65, 69
versión, determinación, 7–8
título nombre de clase CSS, 10
compatibilidad con navegador de video, 64–66, 114–115
pista elemento
controles de video, 37
atributos, 185
copia de vídeoVer también reproduciendo video
listados de capítulos, 187
borrarIntervalo() función, 206
defectoatributo, 41, 185–186
getImageData() función, 209
Subtítulos en inglés, 186
hazlo gris() función, 210, 212
[hh:]mm:ss.msmsmsatributo, 185
pixelData objeto, 210–211 jugando
amable atributo, 41, 185
en escala de grises, 208–212
etiqueta atributo, 41, 185
establecerIntervalo()función, 205, 212 configuración
propósito, 185
del lienzo de fondo, 208 configuración de los valores
rubí atributo, 185
rojo, verde y azul, 211
origenatributo, 41, 185
quebrar()función, portada de
srclang atributo, 41, 185 uso con
video 205–206
WebVTT, 188–191 ejemplo de
animación, 161–166
subtítulos de video, 186
divisiones,162–163
transforma Ver también Transformaciones 2D; 3D
Transforma extendiéndose a 3D, 169–170 Función de
definido, 148 fotogramas clave, 164 señales de video,
girar, 164 caracteres especiales en, 183
rotar3d(), 167–168 videoelemento
traducir, 164 agregandocontrol S atribuir a, 99
transiciones Ver también Transiciones CSS auto-reproducción atributo, 35
crear, 141–143 control S atributo, 35
desvanecimiento, 146–147 origen cruzado atributo, 36
propiedades, 141 altura atributo, 36

Uso con audio, 143–144 círculo atributo, 35
Uso con video, 143–144 grupo de medios atributo, 36
Definición W3C, 140 apagado atributo, 35
traducir transformar, usando, 151–153, 164 póster atributo, 35
transparencia, configuración para píxeles, 235 precarga atributo, 35
tty tipo de medio, 76 origenatributo, 35
televisión tipo de medio, 76 utilizando fuente elemento en, 70
272 ÍNDICE
usando transiciones con, 143–144 desvanecimiento, 146–147
ancho atributo, 36 girar con transformaciones 2D, 150 escalar
archivos de video con transformaciones 2D, 148–150 sesgar con
aplicar máscaras a, 136–137 transformaciones 2D, 151 tomar capturas de
auto-reproducción atributo, 67, 70 pantalla, 201–204 traducir con
imágenes cambiantes, 71 transformaciones 2D, 151–153
controlatributo, 67–68 video/webm Tipo MIME, 63 Botón de
empotrarelemento, 73–74 volumen, adición, 104–107
codificación, 65–66 . vttextensión, usando con WebVTT, 177
Flash alternativo, 73
altura atributo, 67 W
enlace de descarga de imágenes, 74–75
W3C (World Wide Web Consortium), 4 WAV (formato
enlaces de imágenes, 72–73
de archivo de audio de forma de onda), 48–49 API de
respaldo heredado, 72–75
audio web, 240
círculo atributo, 67, 70
Contexto de audio()constructor, 246
puesta a disposición, 75
nodo de audioobjetos, 246
objeto elemento, 73–74
Habilitación en Chrome, 246
ajuste de objetopropiedad, 129–131
objetivo de, 245
posición del objetopropiedad, 132–134
enrutamiento modular, 246
reproducción de varias fuentes, 69–75
Formularios web 2.0, 5
reproducción, 67–68
Tecnología de aplicación de hipertexto web
póster atributo, 71
Grupo (WHATWG), 5–6
precarga atributo, 68
Reglas CSS3 específicas de WebKit.Ver también CSS3
quitando controles, 68
máscara-caja-imagenpropiedad, 136–137
eliminar controles predeterminados de, 100
reflejarpropiedad, 135–136
restaurar controles predeterminados, 68
archivos WebM, reproducción, 67
escribeatributo, 70
formato de video WebM, 63–65
usando sombra paralela con, 144–145
sitios web
usando degradados con, 123–125
API 2D, 199
ancho atributo, 67
Transformaciones 2D, 153
formatos de video
Transformaciones 3D, 154, 157
MP4 (H.264), 63
Soporte de video Android, 80
Teora Ogg, 62
animarelemento, 229
WebM, 63
animateMotion elemento, 231
vídeo/mpeg tipo MIME, 63
estado-de-reproducción-de-animaciónpropiedad, 160
vídeosVer también Vídeo SVG y HTML5
API de datos de audio, 244
agregando desenfoque a, 236
Blender Foundation, 162
agregando sombras paralelas a, 155
Camen Design, 75
agregando subtítulos a, 189–191
ÍNDICE 273
sitios web(continuado) SVGtextoatributos de los elementos, 218
conceptos básicos de lienzo, 200, 212 Theora Ogg, 62
Biblioteca JavaScript Captionator, 188 CSS2, 75 transforma, 157
propiedades de transición,
Gradientes lineales CSS3, 125 142 API WebSocket, 252
Especificación CSS3, 122 Servidores WebSocket, 254
Especificación de transiciones CSS3, 147 Estatuto del grupo de trabajo de WebVTT, 176
dibujarImagen()función, 202 Estatuto del grupo de trabajo, 184
Durian Open Movie Project, 162 Fundación Xiph.Org, 62

API getUserMedia, 247 API WebSocket, 252–258
freno de mano, 66 monto almacenado en búferatributo, 253
Esquemas de documentos HTML5, 16 cerca()método, 253

html5shimguion, 20 habilitar WebSockets, 252
interiorShivguion, 20 errorevento, 254
Tutorial de JavaScript, 86 extensionesatributo, 253

js_videosub, 188 cerrarevento, 254
jscaptions, 188 enmensajeevento, 254
Jugador JW, 55 al abrirevento, 254
Calatura, 188 gastos generales, 252
Biblioteca JavaScript de LeanBack Player, protocolosatributo, 253

188 “Enlaces y anclajes”, 5 listoestado atributo, 253
máscarapropiedad, 137 enviar()método, 253–254
Conversor de medios, 50, 66 Conexión WebSocket, almacenamiento, 255
consultas de medios, 76 WebSocketconstructor

Biblioteca de JavaScript MediaElementJS, 188 protocols parámetro, 252
Miro Video Converter, 50, 66 url parameter, 252
Biblioteca de detección Modernizr, 115 MPEG (Grupo de Servidor WebSocket
expertos en imágenes en movimiento), 63 node.js, 254 instalación, 254
usando, 255
ajuste de objetopropiedad, 134 WebSockets

object-position property, 134 close() método, 256
PeerConnection API, 249 closeConnection() función, 256
Playr JavaScript library, 188 connect() función, 255–256
ProtoFluid application, 79 displayMsg() function, 256
reflect property, 137 div para visualización de datos,
Sintel video cover animation, 162 255 HTML para conexión, 255
Stream API, 250 input ficampo, 255 código
SubRip program, 175 JavaScript, 255–256
SVG filters, 233 send() función, 257
274INDEX
setStatus() función, 256 etiquetas de texto, 181
usando, 254–258 TextLineN,178

WebVTT (pistas de texto de video web), características rangos de marca de tiempo, 178–179 etiqueta
de, 176–177 de marca de tiempo, 181
Formato de archivo WebVTT T:valorajuste de entrada, 179
Un valorajuste de entrada, 179 tuetiqueta de texto, 181
Betiqueta de texto, 181

etiqueta de subrayado, 181
etiqueta en negrita, 181

usando conpista elemento, 188–191
Cetiqueta de texto, 181
vetiqueta de texto, 181
texto de clase, 181 etiqueta de contenido de voz, 181
nombres de clases CSS, 182 . vttextensión, 177

ajustes de señal,178 WHATWG (aplicación de hipertexto web)
ajustes de entrada, 179–180 Grupo de Tecnología), 5–6
D:valorestablecimiento de señales, Reproductor de Windows Media, 25–26
179 desarrollos futuros, 184 modo w elemento, uso con complementos,
[hh:]mm:ss.msmsmsetiqueta de texto, 181 30 Sitio web de Working Group Charter, 184
Ietiqueta de texto, 181 World Wide Web Consortium (W3C), 4
cadena de identificación,177
etiqueta en cursiva, 181

X
ajuste de cue de posición de línea, 179
XHTML
L:valorajuste de entrada, 179
Estricto, 4–5
rubí etiqueta de texto, 181
Transicional, 4–5
caracteres especiales, 183 señal
Sitio web de la Fundación Xiph.Org, 62 XML
de subtítulo, 179
(lenguaje de marcado extensible), 4
S: valorconfiguración de entrada, 179
configuración de entrada de texto, 179
ÍNDICE275
Acceso en línea ilimitado a todos los videos y
libros de Peachpit, Adobe Press, Apple
Training y New Riders, así como a contenido
de otras editoriales líderes, que incluyen:
O'Reilly Media, Focal Press, Sams, Que, Total
Training, John Wiley & Sons, Course
Tecnología PTR, Class on Demand, VTC y más.
¡No se requiere compromiso de tiempo

ni contrato! Regístrese por un mes o un
año.Todo por $19.99 al mes
REGÍSTRATE HOY
peachpit.com/creativeedge
Disfruta el
Semilla de durazno
¡EQUIPO DE AFILIADOS!
Te encantan nuestros libros y tu

Me encanta compartirlos con tus colegas y amigos...
¡por qué no ganar algo de dinero haciéndolo!
Si tienes un sitio web, un blog o incluso una página de Facebook,

puedes empezar a ganar dinero poniendo un enlace de Peachpit
en tu página.
Si un visitante hace clic en ese enlace y compra algo en

peachpit.com, ¡usted gana comisiones* en todas las ventas!
Cada venta que traigas a nuestro sitio te hará ganar una

comisión. Todo lo que tienes que hacer es publicar un anuncio y
nosotros nos encargamos del resto.
¡APLICA Y EMPIEZA!
Es rápido y fácil de aplicar. Para
conocer más ingresa a:
http://www.peachpit.com/afiliados/
* Válido para todas las ventas de libros, libros electrónicos y videos en www.Peachpit.com

HTML5 Multimedia Develop and Design (Traducido)

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML5 Multimedia Develop and Design (Traducido)

Cargado por

Copyright:

Formatos disponibles

Traducido del inglés al español - www.onlinedoctranslator.

Prensa de hueso de melocotón

1249 Octava Calle

Encuéntrenos en la Web en: www.peachpit.com

Impreso y encuadernado en los Estados Unidos de América

Tá daoine a shiúlann inár saolta agus shiúlann amach astu go luath

fágann dijo rianta a gcos ar ár gcroíthe Agus

casann ár n-anamacha port nua go deo deo

CAPÍTULO 1 UNA INTRODUCCIÓN A HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 ¿Qué es

<sección>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 <navegación>

<figcaption>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 <guion>

CAPITULO 2 ELEMENTOS MULTIMEDIA HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 Historia de la

Web Multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 Reproductores

elemento de sonido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 El

audio y formatos de archivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 Ogg Vorbis

navegador para formatos de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Codificación

de su archivo de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50 respaldo

Ejemplos de uso del elemento de audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52

Reproducir un archivo de audio con diferentes fuentes. . . . . . . . . . . . . . . . . . . . . . . . .54

Reproducción de un archivo de audio con diferentes fuentes y respaldo heredado. .55

CAPÍTULO 4 USO DE VÍDEO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Códecs de video y

formatos de archivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62 Teora Ogg

navegador para formatos de video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64 Codificación de

sus archivos de video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .sesenta y cinco Uso

archivo de video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

Reproducción de un archivo de video con diferentes fuentes y respaldo heredado . . . .72

Dirigirse a dispositivos con diferentes archivos de video usando tipos de medios y

¿Qué es JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86

Adición de botones de reproducción/pausa y parada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99

Adición de botones de volumen y silencio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104 Adición de

una barra de progreso. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107

Adición de botones de avance rápido y rebobinado. . . . . . . . . . . . . . . . . . . . . . . . . .110

CAPÍTULO 6 ESTILIZAR ELEMENTOS DE MEDIOS CON CSS . . . . . . . . . . . . . . . . . . . . . . .116

redondeadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126 Sombra

su contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128 Reglas CSS3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Girar un video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150 Sesgar un video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Traducir un video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Jugando con transformaciones

3D. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154 Trabajar con animaciones

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158 @fotogramas clave

animado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161 giro animado

Ampliación de la portada de vídeo animado a 3D . . . . . . . . . . . . . . . . . . . . . . . . . .169

CAPÍTULO 8 MULTIMEDIA Y ACCESIBILIDAD . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Introducción a WebVTT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 ¿Qué

puede hacer WebVTT? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 Formato

Uso de WebVTT y Track Element ahora. . . . . . . . . . . . . . . . . . . . . . .188

Hacer una copia de un video en reproducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206

Reproducción de la copia de video en escala de grises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208

CAPÍTULO 10 USO DE VÍDEO CON SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214 Una breve

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 SVG Elipse

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 Uso de SVG con

video HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 Agregar una máscara de

mueven constantemente, pero afortunadamente, por lo general en dirección hacia adelante.

PARA QUIEN ES ESTE LIBRO

EL SITIO WEB DE ESTE LIBRO

Si desea ponerse en contacto conmigo, puede hacerlo en info@html5multimedia.com.

ANTES DE QUE EMPIECES

lenguaje en el que se muestra prácticamente

todo el contenido de Internet.

HTML5 cambia la forma de pensar sobre el lenguaje de marcado HTML.

Además de introducir nuevos elementos de marcado en la especificación,

desarrolladores una forma más profunda y consistente de acceder a la