® UNIVERSITAT

POLITÉCNICA
DE VALÉNCIA

Resumen:

En este objeto has aprendido a utilizar la etiqueta <vídeo> para insertar

vídeos en una página HTML, así como también a utilizar correctamente
sus principales atributos para personalizar su presentación en la página.
poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

<video>
<source src="videos/BigBuckBunny_320xl80.mp4 " type="v¡deo/mp4"/>
</video>

<v¡deo width="50%" poster="paisaje_400x267.jpg">

<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="v¡deo/mp4"/>
</video>

0•

CO n «i r »* nmt< rrt .*—

poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

<video>
<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="video/mp4"/>
</video>

cvideo width="50%">
<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="video/mp4"/>
</video>
0■
 ► • <)

poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

<video>
<source src="v¡deos/BigBuckBunny_320xl80.mp4 " type="video/mp4"/>
</video>
1

<v¡deo width="640">
<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="video/mp4"/>
</video>
B Focrr_A*>d»o_y_ Video h X

C (D We///C AJ**rVF*fn*ndo/D*iktop/Poim*dai2017/F<XTn_Aud»ojf.V»d*o html

► tto/tM •------------------- o —•
 ► •••/»» •-------------------------------------- o ----------- •

poliMedia

UPV
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

• Video BigBuckBunny_320xl80.mp4 y Chrome

<video>
<source src="videos/BigBuckBunny_320xl80.mp4 " type="video/mp4"/>
</video>

<v¡deo controls>
<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="video/mp4"/>
</v¡deo>

<video controls autoplay >

<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="v¡deo/mp4"/>
</video>
poliMedia

UPV
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

• Video BigBuckBunny_320xl80.mp4 y Chrome

<video>
<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="video/mp4"/>
</video>

<v¡deo controls>
<source src="videos/B¡gBuckBunny_320xl80.mp4 " type="video/mp4"/>
</video>
poliMedia

UPV

ua

r*1
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

• Video BigBuckBunny_320xl80.mp4 y Chrome

<video>
<source src="videos/BigBiickBunny_320xl80.mp4 " type="v¡deo/mp4"/>
</v¡deo>
poliMedia
K UNIVERSITAT
F POLITÉCNICA
/ DE VALÉNCIA

3. Atributos de la etiqueta <video>.

Principales atributos

- width y height: Indica la anchura y altura del vídeo, en píxeles (px) o porcentaje (%).
- controls: activa la barra de control del vídeo (play, stop, volumen...).
o ''
- autoplay: Indica que el vídeo aparecerá por defecto reproduciéndose.

- loop: Reproducción en bucle: al acabar el vídeo, la reproducción volverá a empezar

una y otra vez.

- muted: sin audio

- preload: indica si y cómo el autro cree que el video debería ser cargado cuando se á

carga la página web. (auto/metadata/none). /A -

 póster: establece una imagen (jpg, gif, png) como foto inicial del video, mientras
carga el vídeo o hasta que el usuario pulse Play. Aconsejable en galerías de vídeo^

- src: especifica la URL del vídeo a reproducir. y

11

poliMedia
 UNIVERSITAT

• POLITÉCNICA
DE VALÉNCIA

3. Atributos de la etiqueta <video>.

Principales atributos

width y height: Indica la anchura y altura del vídeo, en píxeles (px) o porcentaje (%).

- controls: activa la barra de control del vídeo (play, stop, volumen...).

autoplay: Indica que el vídeo aparecerá por defecto reproduciéndose.

loop: Reproducción en bucle: al acabar el vídeo, la reproducción volverá a empezar

una y otra vez.

muted: sin audio

preload: indica si y cómo el autro cree que el video debería ser cargado cuando se
carga la página web. (auto/metadata/none).
 p ster: establece una imagen (jpg, gif, png) como foto inicial del video, mientras
ó carga el vídeo o hasta que el usuario pulse Play. Aconsejable en galerías de vídeo

poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

2. Etiqueta <video>

• Se pueden especificar múltiples fuentes de archivos usando el elemento

<source> para proporcionar vídeo codificado en diferentes formatos para
diferentes navegadores:

<video>

<source src="v¡deo.ogv" type="video/ogg"/>

<source src="video.mov" type="video/mp4"/>

<source src="video.webm" type="video/webm"/>

í <p>Tu navegador no soporta HTML5</p>

</video>

\
 Cualquier texto entre las etiquetas <video>
y </video> será visualizado en navegadores
que no soporten el elemento <video> >, es
decir, que no soportan HTML5.

poliMedia

UPV
¿X UNIVERSITAT
pi POLITÉCNICA
g/ DE VALÉNCIA

2. Etiqueta <video>

• Se pueden especificar múltiples fuentes de archivos usando el elemento

<source> para proporcionar vídeo codificado en diferentes formatos para
diferentes navegadores:

<video>

<source src="video.ogv" type="video/ogg"/>

<source src="video.mov" type="video/mp4"/>

<source src="video.webm" type="video/webm"/>

<p>Tu navegador no soporta HTML5</p>

</video>
poliMedia

UPV
 UNIVERSITAT
r-i POLITÉCNICA
g/ DE VALÉNCIA

2. Etiqueta <video>

La etiqueta <video> es nueva en HTML5 y permite insertar contenido de vídeo

muy fácilmente en la página web, como, por ejemplo, un vídeo clip, película o
flujo de vídeo.

Ejemplo de código sencillo para un único formato:

<video src="video.ogv" type="video/ogg"/> </video>

Formato MIME-type

Tipos MIME para los 3 formatos de vídeo admitidos:

MP4 video/mp4
 WebM video/webm

Ogg video/ogg

poliMedia
® UNIVERSITAT
POLITÉCNICA

DE VALÉNCIA

2. Etiqueta <video>

• La etiqueta <video> es nueva en HTML5 y permite insertar contenido de vídeo

muy fácilmente en la página web, como, por ejemplo, un vídeo clip, película o
flujo de vídeo.

• Ejemplo de código sencillo para un único formato:

cvideo src="video.ogv" type="video/ogg"/> </video>

poliMedia

UPV
 UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA
f

1. Introducción

• En las siguientes páginas web se pueden encontrar vídeos con diferente formato:

• Vídeos OGV http://clips.vorwaerts-gmbh.de/big buck bunny.ogv

• Pulsar el botón derecho sobre el vídeo que aparecerá.
• Selecciona 'Guardar video como'.
• Guardar el video en el disco duro.

• Vídeos MP4 y WEBM ->http://www.webmfiles.org/demo-files/

WebM Files

Demo Files
ara wr » r th« f oranat t laU WH»H Playo*
 »ou carr'crt ptj. thaaa »oc may ftrd furttia» aiformatlor at Hcw to •'•at** »lat

(lo tha web* i Mr to rour computa» ngM tbcfc ard Mtact uv» at ')

I &X / M
Downlotd Trilir ts WrtM Ft* ■ Downlotd Trilif as MP4 / h2M

poliMedia
UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

1. Introducción

• En las siguientes páginas web se pueden encontrar vídeos con diferente formato:

• Vídeos OGV http://clips.vorwaerts-gmbh.de/big buck bunny.ogv

• Pulsar el botón derecho sobre el vídeo que aparecerá.
• Selecciona 'Guardar video como'.
• Guardar el video en el disco duro.

• Vídeos MP4 y WEBM ->http://www.webmfiles.org/demo-f¡les/

Demo Files
*<• wr• éMK> r WrLM I om«at t t©tf KX-i PU»rf

■ vou pU* tMa© «m v w m©» Und fwtftar m#onn©ti©n K Maw to Mo* WOftM FIm
 ft© Mr© th© WrbM l «r to vour comput» ngM <bck ©nd »toct u»© n *)

poliMedia
Insertar vídeos en HTML5. La etiqueta <video> 11 UPV o*

1. Introducción

Tabla de los diferentes formatos de vídeo aceptados por las últimas

versiones de los diferentes navegadores

MP4 WebM
Navegador Ogg
Internet Explorer Sí NO NO
Chrome Sí Sí Sí
F i refox Sí Sí Sí
Safari Sí NO NO

Opera Sí Sí Sí

MP4 = ficheros MPEG 4 files con códec H264 para vídeo y códec AAC para audio.
WebM = ficheros WebM con códec VP8 o VP9 para vídeo y códec Vorbis u Opus para audio.
Ogg = ficheros Ogg con códec Theora para vídeo y códec Vorbis para audio.

Al menos, se tendrá que utilizar mp4 y alguno de los otros dos (ogg o
 WebM) para poder abarcarlos a todos los navegadores antiguos.

poliMedia

II ►! 4) 2:36/9:56

"ir
JL
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

1. Introducción

Tabla de los diferentes formatos de vídeo aceptados por las últimas

versiones de los diferentes navegadores

MP4 WebM
Navegador Ogg
Internet Explorer Sí NO NO
Chrome Sí Sí Sí
F i refox Sí Sí Sí
Safari Sí NO NO

Opera Sí Sí Sí

MP4 = ficheros MPEG 4 files con códec H264 para vídeo y códec AAC para audio.
WebM = ficheros WebM con códec VP8 o VP9 para vídeo y códec Vorbis u Opus para audio.
Ogg = ficheros Ogg con códec Theora para vídeo y códec Vorbis para audio.
poliMedia
 UNIVERSITAT
Sr POLITÉCNICA
V DE VALÉNCIA

1. Introducción

HTML5 introduce soporte integrado (sin plug-ins) para el contenido multimedia gracias a
los nuevos elementos <audio> y <video>, ofreciendo la posibilidad de insertar
contenido multimedia en documentos HTML -> En este caso nos centraremos en VIDEO

Existen 3 estándares principales de vídeo que utilizan codees diferentes y que vienen
impulsados por grandes empresas.

El formato MP4 (ficheros con extensión .mp4 o ,mov) que bajo licencia utiliza el
códec H264. Impulsado por Apple y Microsoft.

El formato OGG (ficheros con extensión .ogv) que utiliza los codees VP8 y VP9, es
gratuito. Impulsado por Mozilla, Opera y Firefox.

El formato WebM (ficheros con extensión .webm) también es gratuito e impulsad

por los mismos que apoyan el formato OGG (Mozilla, Opera y Firefox).
poliMedia
UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

1. Introducción

HTML5 introduce soporte integrado (sin plug-ins) para el contenido multimedia gracias a
los nuevos elementos <audio> y <video>, ofreciendo la posibilidad de insertar
contenido multimedia en documentos HTML -> En este caso nos centraremos en VIDEO
poliMedia
 UNIVERSITAT

• POLITÉCNICA
DE VALÉNCIA

INDICE

1 . Introducción.

2 . Etiqueta <video>.

3 . Atributos de la etiqueta <video>.

4. Ejemplos.
poliMedia
% UNIVERSITAT
<-| POLITÉCNICA
¿7 DE VALÉNCIA

Insertar vídeos en HTML5.

La etiqueta <video>

OBJETIVO:

Tras el aprendizaje de los contenidos que te muestro a continuación sabrás

cómo utilizar la etiqueta <vídeo> para insertar vídeos en una página HTML,
así como también a utilizar correctamente sus principales atributos para
personalizar su presentación en la página.
poli Media
 UNIVERSITAT

• POLITÉCNICA
DE VALÉNCIA

Insertar vídeos en HTML5.

La etiqueta <video>

Autor.- Fernando Boronat Seguí

UPV - Campus de Gandía
poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

Resumen:

En este objeto has aprendido a utilizar la etiqueta <audio> para insertar

fragmentos de audio en una página HTML, así como también a utilizar
correctamente sus principales atributos para personalizar su
reproducción.
poliMedia

UPV
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

<audio autoplay controls loop>

<source src="aud¡o/campanas.mp3" type="audio/mpeg"/>
<source src="audio/campanas.ogg" type="audio/ogg"/>
<source src="aud¡o/campanas.wav" type="audio/wav"/>
<p> Tu navagador no soporta HTML5 </p>
</audio>

> 0:15/0:52

Chrome Internet
Explorer
poliMedia
 UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

4. Ejemplos

<audio autoplay controls loop>

<source src="aud¡o/campanas.mp3" type="audio/mpeg"/>
<source src="audio/campanas.ogg" type="aud¡o/ogg"/>
<source src="aud¡o/campanas.wav" type="aud¡o/wav'7>
<p> Tu navagador no soporta HTML5 </p>
</audio>

> 0:15/0:52 4)

Chrome Internet
Explorer
poliMedia
¿X UNIVERSITAT
MR POLITÉCNICA
g/ DE VALÉNCIA

4. Ejemplos

<audio autoplay controls loop>

<source src="aud¡o/campanas.mp3" type="audio/mpeg"/>
<source src="aud¡o/campanas.ogg" type="audio/ogg"/>
<source src="audio/campanas.wav" type="aud¡o/wav"/>
<p> Tu navagador no soporta HTML5 </p>
</audio>
poliMedia
 UNIVERSITAT
[j'l POLITÉCNICA
gZ DE VALÉNCIA

4. Ejemplos

<audio src="audio/campanas.mp3" type="audio/mpeg"/> </audio>

-> Se inserta el elemento pero no se reproduce nada

Posteriormente, con JS

<audio src="audio/campanas.mp3" autoplay type="aud¡o/mpeg"/> </audio>

-> Se inserta el elemento y se escucha el audio pero no se

visualiza nada en la página (ej. para sonido de fondo)

<audio src="audio/campanas.mp3" controls autoplay type="audio/mpeg"/> </audio>

-> Se inserta el elemento y se escucha el audio

 Se visualiza la barra de control en la página.

> 0:15/0:52 —•---------------------------- —•

poliMedia
 UNIVERSITAT
K-i POLITÉCNICA
<7 DE VALÉNCIA

4. Ejemplos

<audio src="audio/campanas.mp3" type="audio/mpeg"/> </audio>

-> Se inserta el elemento pero no se reproduce nada

Posteriormente, con JS

<audio src="audio/campanas.mp3" autoplay type="audio/mpeg"/> </audio>

Se inserta el elemento y se escucha el audio pero no se

visualiza nada en la página (ej. para sonido de fondo)
poliMedia
 UNIVERSITAT
K-i POLITÉCNICA
<7 DE VALÉNCIA

4. Ejemplos

<audio src="audio/campanas.mp3" type="audio/mpeg"/> </audio>

-> Se inserta el elemento pero no se reproduce nada

Posteriormente, con JS
poliMedia
 UNIVERSITAT
h'-l POLITÉCNICA
g/ DE VALÉNCIA

3. Atributos de la etiqueta <audio>.

- controls: Indica si se deben mostrar los controles de reproducción del audio

(play, stop, volumen...) o no

- autoplay: Indica si el audio se inicia automáticamente al cargar la página html,

en cuanto esté disponible el contenido.

- loop: Reproducción en bucle: al acabar el audio, la reproducción volverá

empezar una y otra vez.

- preload: Indica si el audio se empieza a cargar cuando el navegador carga I

página html. Poner'="none" 'en galerías de audios.

- muted: sin audio

 - src: especifica la URL del audio a reproducir.

poliMedia
 UNIVERSITAT
h'-l POLITÉCNICA
g/ DE VALÉNCIA

Productividad 3. Atributos de la etiqueta <audio>.

Agregadas recientemente

Intel® Power
<►) CyberLink Gai 19 (64-bit)
PowerDVD

¿¿7 Speccy

Correo

- controls: Indica si se deben mostrar los controles de reproducción del audio

I xpandir v

se inicia automáticamente al cargar la página html,

4K Video
do.

Accesibilidad de

M icrosoftisoftStore Tu TeléfonoTelél
Accesorios de Win-k v* '
D
©
Access
s
A C
c
r
o •1^ ILiL-Idf
n
i Ac Adobe After Effects CC 2019
s

io a reproducir.
A
c
r
o
n
i
s
T
r
u
e
I
m
a
(Z ■
g CrystalDisklnfo Microsoft
e

A
d
o
b
e
A
c
r
o
b
a
t
D
C

A
d
o
b
e
A
c
r
o
b
a
t
D
i
s
t
i
ü
e
r
D
-» a.> esp g
¿X UNIVERSITAT
MR POLITÉCNICA
X/ DE VALÉNCIA

2. Etiqueta <audio>

Se pueden especificar múltiples fuentes de archivos usando el elemento

<source> para proporcionar audio codificado en diferentes formatos para
diferentes navegadores:

<audio>

<source src="audio.ogg" type="audio/ogg"/>

<source src="audio.mp3" type="audio/mpeg"/>

<source src="audio.wav" type="audio/wav"/>

<p>Tu navegador no soporta HTML5</p>

</audio>
poliMedia

UPV
 UNIVERSITAT
[j'l POLITÉCNICA
gZ DE VALÉNCIA

2. Etiqueta <audio>

Se pueden especificar múltiples fuentes de archivos usando el elemento

<source> para proporcionar audio codificado en diferentes formatos para
diferentes navegadores:
poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

2. Etiqueta <audio>

• La etiqueta <audio> es nueva en HTML5 y permite insertar contenido de audio

muy fácilmente en la página web, como, por ejemplo, un clip de audio, música
o flujo de audio.

• Ejemplo de código sencillo para un único formato:

<audio src="aud¡o.ogg" type="audio/ogg"/> </audio>

Format MIME-type

Tipos MIME para los 3 formatos de audio admitidos:

MP3 audio/mpeg
 Ogg audio/ogg

Wav audio/wav

poliMedia

UPV
 UNIVERSITAT
L-l POLITÉCNICA
g/ DE VALÉNCIA

2. Etiqueta <audio>

La etiqueta <audio> es nueva en HTML5 y permite insertar contenido de audio

muy fácilmente en la página web, como, por ejemplo, un clip de audio, música
o flujo de audio.

Ejemplo de código sencillo para un único formato:

<audio src="audio.ogg" type="audio/ogg"/> </audio>

poliMedia
 UN1VERSITAT

• POLITÉCNICA
DE VALÉNCIA

2. Etiqueta <audio>

• La etiqueta <audio> es nueva en HTML5 y permite insertar contenido de audio

muy fácilmente en la página web, como, por ejemplo, un clip de audio, música
o flujo de audio.
poliMedia
 UNIVERSITAT
K-i POLITÉCNICA
<7 DE VALÉNCIA

1. Introducción

• En la siguiente páginas web se pueden encontrar ficheros de audio con formatos

MP3yOGG:

http://recursostic.educacion.es/bancoimagenes/web/
poliMedia
® UN1VERSITAT
POLITÉCNICA
DE VALÉNCIA

1. Introducción

Tabla de los diferentes formatos de audio aceptados por las últimas

versiones de los diferentes navegadores

Wav
Navegador MP3 Ogg
Internet Explorer Sí NO NO
Chrome Sí Sí Sí

F i refox Sí Sí Sí

Safari Sí Sí NO

Opera Sí Sí Sí

Al menos, se tendrá que utilizar mp3 y alguno de los otros dos (ogg o
 Wav) para poder abarcarlos a todos los navegadores antiguos.

poliMedia
 UN1VERSITAT

• POLITÉCNICA
DE VALÉNCIA

1. Introducción

Tabla de los diferentes formatos de audio aceptados por las últimas

versiones de los diferentes navegadores

Navegador MP3 Wav Ogg

Internet Explorer
Sí NO NO
Chrome Sí Sí Sí

F i refox Sí Sí Sí

Safari Sí Sí NO

Opera Sí sí Sí
poli Media
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

1. Introducción

Tabla de los diferentes formatos de audio aceptados por las últimas

versiones de los diferentes navegadores

Navegador MP3 Wav Ogg

Internet Explorer Sí NO NO
Chrome Sí Sí Sí

F i refox Sí Sí Sí

Safari Sí Sí NO

Opera Sí sí Sí
poliMedia
 UNIVERSITAT
h'-l POLITÉCNICA
g/ DE VALÉNCIA

1. Introducción

HTML5 introduce soporte integrado (sin plug-ins) para el contenido multimedia gracias a
los nuevos elementos <audio> y <video>, ofreciendo la posibilidad de insertar contenido
multimedia en documentos HTML -> En este caso nos centraremos en AUDIO

Existen 3 estándares principales de audio que utilizan codees diferentes y que vienen
impulsados por grandes empresas.

• El formato MP3 (ficheros con extensión .mp3). Abarca a la mayoría de navegadores.

Aunque está ampliamente arraigado, está sujeto a patentes.

El formato OGG (ficheros con extensión .ogg) con códec Opus o FLAC. Es gratuito.

El formato Wav (ficheros con extensión .wav) con códec PCM de audio. Es gratuito.
poliMedia

UPV
 1. Introducción

• HTML5 introduce soporte integrado (sin plug-ins) para el contenido multimedia gracias a
los nuevos elementos <audio> y <video>, ofreciendo la posibilidad de insertar contenido
multimedia en documentos HTML -> En este caso nos centraremos en AUDIO
Insertar audio en HTML5. La etiqueta <audio> 1| UPV
DE VALENCIA

ÍNDICE

1 . Introducción.
2 . Etiqueta <audio>.
3 . Atributos de la etiqueta <audio>.
4. Ejemplos.
poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

1. Introducción
poliMedia
 UNIVERSITAT
K-i POLITÉCNICA
<7 DE VALÉNCIA

Insertar audios en HTML5.

La etiqueta <audio>

OBJETIVO:

Tras el aprendizaje de los contenidos que te muestro a continuación sabrás

cómo utilizar la etiqueta <audio> para insertar fragmentos de audio en una
página HTML, así como también a utilizar correctamente sus principales
atributos para personalizar su reproducción.
poliMedia
® UNIVERSITAT
POLITÉCNICA
DE VALÉNCIA

Insertar audio en HTML5.

La etiqueta <audio>

Autor.- Fernando Boronat Seguí

UPV - Campus de Gandía
poliMedia