Agregar Un Control de Vídeo HTML5 a La Página Web (Windows)

23/5/2015 AgregaruncontroldevdeoHTML5alapginaweb(Windows)

https://msdn.microsoft.com/esmx/library/hh924820(v=vs.85).aspx 1/4

Agregar un control de vdeo HTML5 a la pgina webWindows 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 decomplementos 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 APIEjemplos y tutorialesDemostraciones de la versin de prueba de InternetExplorerPublicaciones de IEBlogEspecificacinTemas relacionados

Por dnde empiezo?En su forma ms bsica, la adicin de un reproductor de vdeo a una pgina web con el elemento HTML5video se realiza con una sola lnea de HTML. Agrega el atributo controls para quelos 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 elvdeo 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:

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 manerasposibles 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 lareproduccin 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 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. InternetExplorer10 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 estdisponible, 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 enfuncin 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 reproductorescala 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.

HTML5Videoisrequiredforthisexample

HTML

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.

Cmo puedo admitir ms de un formato?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 unformato 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 elreproductor 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 otrosexploradores. Este ejemplo muestra un elemento video con tres posibles formatos de archivo:

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 losformatos 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 unmensaje, 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 usuariode 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 losexploradores 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 admiteHTML5.

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 sentidode 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 compatibilidadpara 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.

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 Flashusando 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:

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 zindex 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 superponeun 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 ejemplosiguiente 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


Fallbackcodeifvideoisn'tsupported/


HTML5Videoisrequiredforthisexample.Downloadthevideofile.

HTML

HTML

HTML



imgenes insertadas.

La propiedad zindex 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 aotro, el ltimo que se represente ser completamente visible. El valor zindex del segundo marco de vdeo se establece en 100 para garantizar que sea el elemento superior suponiendoque 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 nmerode 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 ejemplosiguiente. Para obtener ms informacin, consulta las pginas de referencia de las Hojas de estilo CSS.

#Video1{position:absolute;top:50px;left:0px;width:1000px;border:2pxsolidblue;display:block;zindex:99;}#Video2{position:absolute;top:80px;left:60px;width:300px;border:2pxsolidred;zindex:100;}

HTML5Videonotsupported

Rotatingavideo/*Setbasicstyleforvideo*/#theVideo{display:block;position:absolute;left:200px;top:200px;border:2pxsolidred;borderradius:20px;}/*Lightuptheimageasabutton,changecursor*/#rotateVideo:hover{border:2pxsolidgreen;cursor:pointer;}//WhentheHTMLelementsload,callinit()document.addEventListener("DOMContentLoaded",init,false);//Rotatethevideoby30degreeswhenimageisclickedfunctioninit(){varvideo=document.getElementById("theVideo");if(video){varrotateVal=0;//Globalvariabletoholdcurrentrotationvaluedocument.getElementById("rotateVideo").addEventListener("click",function(){rotateVal=(rotateVal+=30)%360;//Calculatethenextvalue,butkeepbetween0and360vartemp="rotate("+rotateVal+"deg)";//Createastylestringdocument.getElementById("theVideo").style.msTransform=temp;//Setthestyle},false);}}

HTML

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 variosformatos 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 HTML5video.

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

Referencia de APIHTML5 Audio and Video

Ejemplos y tutorialesUso de JavaScript para controlar el reproductor de vdeo HTML5Uso de eventos de vdeo HTML5Ejemplo de pista de texto temporizada HTML5Crear vdeos accesibles con pistas de texto temporizadas

Demostraciones de la versin de prueba de InternetExplorerCity of VideosHTML5 Video Caption MakerIE10 Video CaptioningVideo Format SupportVideo KaleidoscopeIMDb Video Panorama

Publicaciones de IEBlogHTML5 y el vdeo web: preguntas de la comunidad para el sectorLeyendas de vdeo HTML5

EspecificacinHTML5: seccin 4.8.6

Temas relacionadosCmo insertar vdeo con HTML5Hacer que el vdeo HTML5 se reproduzca en dispositivos mviles

2015 Microsoft

Thisbrowserormodedoesn'tsupportHTML5video.

Agregar Un Control de Vídeo HTML5 a La Página Web (Windows)

Documents

Transcript of Agregar Un Control de Vídeo HTML5 a La Página Web (Windows)