31/7/2017 Agregar un control de vdeo HTML5 a la pgina web (Windows)

Agregar un control de vdeo HTML5 a la

pgina web
Windows Internet Explorer9 comenz a admitir el vdeo HTML5.Con el vdeo HTML5, puedes insertar un reproductor de
vdeo completamente funcional en tu pgina web sin necesidad de complementos de terceros ni JavaScript.

Por dnde empiezo?

Qu atributos puedo usar con un elemento video?
Cmo puedo admitir ms de un formato?
Qu sucede con los exploradores ms antiguos?
Puedo aadir algo de estilo?
Y ahora, adnde?
Referencia de API
Ejemplos y tutoriales
Demostraciones de la versin de prueba de InternetExplorer
Publicaciones de IEBlog
Especificacin
Temas relacionados

Por dnde empiezo?

En su forma ms bsica, la adicin de un reproductor de vdeo a una pgina web con el elemento HTML5 video se realiza
con una sola lnea de HTML. Agrega el atributo controls para que los usuarios puedan controlar la reproduccin del vdeo.
Otros atributos permiten establecer el archivo de origen, agregar una imagen de marcador de posicin o comenzar a
reproducir el vdeo automticamente. Al igual que la mayora de los elementos HTML, puedes usar las Hojas de estilo CSS
para dar estilo y ajustar la posicin del elemento.

La sintaxis del elemento HTML5 es:

HTML

<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video>

Con una sola lnea de cdigo, este ejemplo permite realizar varias tareas. El atributo src seala el archivo de vdeo que se va
a reproducir. El atributo src ofrece una de las dos maneras posibles de especificar contenido para el elemento video. Para
reproducir el vdeo, asigna el atributo src a la URL de un archivo de vdeo.

El atributo controls indica al explorador que muestre los controles de reproduccin integrados. La funcin y el aspecto de
los controles integrados pueden variar de un explorador a otro. Como mnimo, vers los controles Reproducir y Pausa, una
barra de progreso o botones que saltan hacia adelante y hacia atrs en el vdeo, y un contador de tiempo. Durante la
reproduccin de un vdeo, los controles suelen estar ocultos y vuelven a aparecer cuando el usuario desliza el mouse por el
reproductor.

Por ltimo, autoplay es un atributo booleano que hace que el vdeo se reproduzca en cuanto se carga.

Qu atributos puedo usar con un elemento video?

El elemento video admite varios atributos para controlar la reproduccin y presentacin del vdeo. Esta tabla destaca los
atributos bsicos de video. Los atributos booleanos se consideran "true" cuando estn presentes y "false" cuando estn

https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx 1/7
31/7/2017 Agregar un control de vdeo HTML5 a la pgina web (Windows)

ausentes como atributos del elemento video.

Atributo Descripcin

src Cadena que representa una URL que seala a un archivo de vdeo.

controls Atributo booleano que activa un conjunto de controles de reproduccin integrados. Normalmente
incluye reproduccin, pausa, buscar y ajustar volumen. Internet Explorer10 tambin muestra un control
para elegir varias pistas de audio y texto.

poster Cadena que representa una imagen de marcador de posicin y que se muestra en el reproductor de
vdeo. La imagen de pster solo se muestra cuando un vdeo no est disponible, bien porque el origen
no est en ese punto o porque el contenido an se est cargando.

loop Atributo booleano que reproduce el vdeo repetidamente hasta que se presiona el botn de pausa en
los controles, o se llama al mtodo pause desde un script.

muted Atributo booleano que reproduce vdeo con la pista de audio desactivada.

autoplay Atributo booleano que inicia la reproduccin de vdeo automticamente cuando el reproductor tiene
suficiente contenido almacenado en bfer.

preload Atributo booleano que define una clave sobre cunto almacenamiento en bfer es necesario.

height Establece el alto del reproductor de vdeo, en pxeles.

width Establece el ancho del reproductor de vdeo, en pxeles.

NotaSi estableces solo una dimensin del reproductor de vdeo, por ejemplo el alto, el reproductor de vdeo ajusta el
tamao del vdeo a esa dimensin y escala la otra dimensin en funcin de la relacin de aspecto del contenido de vdeo. Si
estableces ambas dimensiones con una relacin de aspecto que no se corresponde con el contenido del vdeo, el
reproductor escala la dimensin ms prxima para que se vea, pero mantiene su relacin de aspecto. El vdeo se centrar
horizontal o verticalmente con espacio en blanco a cada lado.

El ejemplo siguiente reproduce un vdeo, muestra un pster hasta que se carga el contenido y reproduce un vdeo
repetidamente con los controles de reproduccin.

HTML

<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" >

HTML5 Video is required for this example
</video>

Los atributos anteriores se pueden establecer en los elementos vdeo en HTML, pero hay muchas ms opciones disponibles
cuando se usa JavaScript. Para obtener ms informacin, consulta Usar JavaScript para controlar el reproductor de vdeo
HTML5.

Cmo puedo admitir ms de un formato?

https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx 2/7
31/7/2017 Agregar un control de vdeo HTML5 a la pgina web (Windows)

El elemento video solo permite establecer un atributo src al mismo tiempo. Esto funciona bien si sabes que solo vas a usar
un formato de archivo. Sin embargo, para admitir ms de un formato de archivo, y ms exploradores, puedes usar el
elemento source.

El elemento source trabaja con el elemento video para proporcionar la mejor opcin para el formato del contenido de vdeo.
Eso significa que puedes asignar varios formatos y el reproductor de vdeo HTML5 selecciona el ms compatible.
Normalmente, se trata de un archivo .mp4 en el caso de Windows Internet Explorer o un formato .ogg/.ogv en otros
exploradores. Este ejemplo muestra un elemento video con tres posibles formatos de archivo:

HTML

<video controls poster="demo.jpg">

<source src="demo.mp4" type="video/mp4" />
<source src="demo.webm" type="video/webm"/>
<source src="demo.ogv" type="video/ogg"/>
<p>Fallback code if video isn't supported</p>/
</video>

Este ejemplo incluye tres formatos vdeo mp4, webm y ogg. En funcin del explorador, el elemento video selecciona el
que pueda reproducir. Si no puede reproducir ninguno de los formatos o si no se admite el elemento HTML5 video, finaliza y
muestra el texto contenido entre las etiquetas video. Este comportamiento de "reserva" se puede usar para mostrar un
mensaje, o puede incluir un reproductor incrustado.

Qu sucede con los exploradores ms antiguos?

Agregar un vdeo a una pgina web sin complementos ni reproductores externos funciona bien para usuarios con Internet
Explorer9 o Internet Explorer10 en la nueva interfaz de usuario de Windows, o bien para usuarios con dispositivos mviles
que no admiten complementos. Sin embargo, esto podra limitar tu pblico tan solo a los usuarios con compatibilidad para
los exploradores modernos. Los elementos HTML5 de vdeo y audio permiten insertar texto o cdigo entre las etiquetas que
se ejecutar nicamente si el explorador de un usuario no admite HTML5.

NotaLos elementos audio y video se diferencian de canvas en que el cdigo entre los elementos solo se ejecuta cuando no
se admiten los dos elementos. Canvas es nico en el sentido de que el cdigo entre las etiquetas, mientras no se muestra, se
ejecuta incluso cuando se admite canvas. El DOM de Canvas Shadow permite a los desarrolladores ofrecer compatibilidad
para accesibilidad en lectores de pantalla y otros dispositivos. Para obtener ms informacin, consulta el tema sobre
Elemento HTML5 Canvas y el DOM de Canvas Shadow.

El ejemplo siguiente es similar al ltimo ejemplo, excepto que se aadi una etiqueta de objeto para ejecutar el reproductor
Adobe Flash con el fin de admitir exploradores anteriores.

HTML

<video controls poster="demo.jpg">

<source src="demo.mp4" type="video/mp4" />
<source src="demo.webm" type="video/webm"/>
<source src="demo.ogv" type="video/ogg"/>
<object>
<embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false"
allowscriptaccess="always" />
</object>
HTML5 Video is required for this example
</video>

https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx 3/7
31/7/2017 Agregar un control de vdeo HTML5 a la pgina web (Windows)

En este ejemplo, si el explorador admite el elemento HTML5 video, prueba con los formatos de vdeo presentados. Si no se
admite el elemento HTML5 video, carga el reproductor Flash usando el objeto y las etiquetas incrustadas.

Otra opcin de reserva es ofrecer simplemente un vnculo al contenido del vdeo tal y como muestra el ejemplo siguiente:

HTML

HTML5 Video is required for this example.

<a href="demo.mp4">Download the video</a> file.

Para obtener ms informacin sobre tcnicas de reserva en aplicaciones de la Tienda Windows con JavaScript, consulta
Complementos y controles ActiveX.

Puedo aadir algo de estilo?

Puedes aplicar estilos a tu reproductor HTML5 mediante CSS para ayudar a integrarlo en el diseo de la pgina web. Puedes
establecer los valores de height y width, especificar fondos, bordes position, y controlar la visibility de los elementos video
mediante CSS.

Con la propiedad z-index de CSS, puedes superponer imgenes, texto o incluso otros vdeos sobre un elemento video. Un
ejemplo es la tcnica de imagen en imagen (PiP), que superpone un pequeo vdeo sobre uno mayor en la misma pantalla.

Imagen en imagen es una tcnica que suele usarse para mostrar contenido relacionado, como diagramas en un evento
deportivo, o un intrprete del lenguaje de signos. El ejemplo siguiente usa CSS para colocar un vdeo pequeo sobre uno
mayor. Tambin usa CSS para establecer el ancho del reproductor de vdeo, y coloca un borde con color alrededor de las
imgenes insertadas.

HTML

<style type="text/css">
#Video1
{
position:absolute;
top: 50px;
left:0px;
width:1000px;
border:2px solid blue;
display:block;
z-index:99;
}

#Video2
{
position:absolute;
top:80px;
left:60px;
width:300px;
border:2px solid red;
z-index:100;
}

</style>
</head>
<body>

https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx 4/7
31/7/2017 Agregar un control de vdeo HTML5 a la pgina web (Windows)

<video id="Video1" controls loop autoplay >

<source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4"
type="video/mp4" />
</video>

<video id="Video2" muted autoplay controls >

<source
src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4"
type="video/mp4" />
HTML5 Video not supported
</video>

La propiedad z-index permite cambiar el orden de visualizacin. Normalmente, los elementos de una pgina web se
muestran en el orden en que se crean. Si un elemento se superpone a otro, el ltimo que se represente ser completamente
visible. El valor z-index del segundo marco de vdeo se establece en 100 para garantizar que sea el elemento superior
(suponiendo que no se hayan creado ms de 100 elementos antes del vdeo). El segundo marco de vdeo se posicionar en
funcin del tamao de los vdeos que se estn reproduciendo y del nmero de elementos de la pgina.

Se pueden usar otras propiedades CSS, como transform para girar una imagen, o borderRadius para crear esquinas
redondeadas en el elemento video, como se muestra en el ejemplo siguiente. Para obtener ms informacin, consulta las
pginas de referencia de las Hojas de estilo CSS.

HTML

<html>
<head>
<title>Rotating a video</title>
<style type="text/css">
/* Set basic style for video */
#theVideo
{
display:block;
position:absolute;
left:200px;
top:200px;
border: 2px solid red;
border-radius: 20px;
}
/* Light up the image as a button, change cursor */
#rotateVideo:hover
{
border:2px solid green;
cursor: pointer;
}

</style>
<script>
// When the HTML elements load, call init()
document.addEventListener("DOMContentLoaded", init, false);

// Rotate the video by 30degrees when image is clicked

function init() {
var video = document.getElementById("theVideo");
if (video) {
var rotateVal = 0; // Global variable to hold current rotation value
document.getElementById("rotateVideo").addEventListener("click", function () {
rotateVal = (rotateVal += 30) % 360; // Calculate the next value, but keep
https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx 5/7
31/7/2017 Agregar un control de vdeo HTML5 a la pgina web (Windows)

between 0 and 360

var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
document.getElementById("theVideo").style.msTransform = temp; // Set the
style
}, false);
}
}
</script>

</head>
<body>
<img src="rotate.png" id="rotateVideo" alt="Rotate button" title="Click to rotate 30
degrees" role="button"/>
<video src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4"
id="theVideo" controls >
This browser or mode doesn't support HTML5 video.
</video>
</body>
</html>

Y ahora, adnde?
Te hemos mostrado como usar una nica lnea de HTML para agregar un control de reproductor de vdeo completamente
funcional a tu pgina web. Has visto cmo admitir varios formatos de vdeo con fines de compatibilidad entre varios
exploradores, y un sencillo ejemplo de una tcnica de reserva para admitir exploradores que no admiten el elemento HTML5
video.

En Usar JavaScript para controlar el reproductor de vdeo HTML5, vers cmo usar JavaScript para agregar controles externos
de reproduccin, comprobar la compatibilidad con formatos de archivo y cmo controlar el volumen y la velocidad de
reproduccin.

Referencia de API
HTML5 Audio and Video

Ejemplos y tutoriales
Uso de JavaScript para controlar el reproductor de vdeo HTML5
Uso de eventos de vdeo HTML5
Ejemplo de pista de texto temporizada HTML5
Crear vdeos accesibles con pistas de texto temporizadas

Demostraciones de la versin de prueba de InternetExplorer

City of Videos
HTML5 Video Caption Maker
IE10 Video Captioning
Video Format Support
Video Kaleidoscope
IMDb Video Panorama

Publicaciones de IEBlog
HTML5 y el vdeo web: preguntas de la comunidad para el sector

https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx 6/7
31/7/2017 Agregar un control de vdeo HTML5 a la pgina web (Windows)

Leyendas de vdeo HTML5

Especificacin
HTML5: seccin 4.8.6

Temas relacionados
Cmo insertar vdeo con HTML5
Hacer que el vdeo HTML5 se reproduzca en dispositivos mviles

2017 Microsoft

https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx 7/7