Академический Документы
Профессиональный Документы
Культура Документы
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.
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)
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.
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
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.
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
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.
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
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
Para obtener ms informacin sobre tcnicas de reserva en aplicaciones de la Tienda Windows con JavaScript, consulta
Complementos y controles ActiveX.
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)
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);
</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
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)
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