Windows Internet Explorer 9 comenzó a admitir el vídeo HTML5.Con el vídeo HTML5, puedes insertar un reproductor de vídeo completamente funcional en tu página web sin necesidad de complementos de terceros ni JavaScript.
¿Por dónde empiezo?
En su forma más básica, la adición de un reproductor de vídeo a una página web con el elemento HTML5 video se realiza con una sola línea de HTML. Agrega el atributocontrols para que los usuarios puedan controlar la reproducción del vídeo. Otros atributos permiten establecer el archivo de origen, agregar una imagen de marcador de posición o comenzar a reproducir el vídeo automáticamente. Al igual que la mayoría de los elementos HTML, puedes usar las hojas de estilos en cascada (CSS) para dar estilo y ajustar la posición del elemento.
La sintaxis del elemento HTML5 es:
<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video>
Con una sola línea de código, este ejemplo permite realizar varias tareas. El atributo srcseñala el archivo de vídeo 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 vídeo, asigna el atributo src a la URL de un archivo de vídeo.El atributo controls indica al explorador que muestre los controles de reproducción integrados. La función y el aspecto de los controles integrados pueden variar de un explorador a otro. Como mínimo, verás los controles Reproducir y Pausa, una barra de progreso o botones que saltan hacia adelante y hacia atrás en el vídeo, y un contador de tiempo. Durante la reproducción de un vídeo, 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 vídeo se reproduzca en cuanto se carga.¿Qué atributos puedo usar con un elemento video?
El elemento video admite varios atributos para controlar la reproducción y presentación del vídeo. Esta tabla destaca los atributos básicos de video. Los atributos booleanos se consideran "true" cuando están presentes y "false" cuando están ausentes como atributos del elemento video.
Atributo Descripción src Cadena que representa una URL que señala a un archivo de vídeo. controls Atributo booleano que activa un conjunto de controles de reproducción integrados. Normalmente incluye reproducción, pausa, buscar y ajustar volumen. Internet Explorer 10 también muestra un control para elegir varias pistas de audio y texto. poster Cadena que representa una imagen de marcador de posición y que se muestra en el reproductor de vídeo. La imagen de póster solo se muestra cuando un vídeo no está disponible, bien porque el origen no está en ese punto o porque el contenido aún se está cargando. loop Atributo booleano que reproduce el vídeo repetidamente hasta que se presiona el botón de pausa en los controles, o se llama al método pause desde un script. muted Atributo booleano que reproduce vídeo con la pista de audio desactivada. autoplay Atributo booleano que inicia la reproducción de vídeo automáticamente cuando el reproductor tiene suficiente contenido almacenado en búfer. preload Atributo booleano que define una clave sobre cuánto almacenamiento en búfer es necesario. height Establece el alto del reproductor de vídeo, en píxeles. width Establece el ancho del reproductor de vídeo, en píxeles. Nota Si estableces solo una dimensión del reproductor de vídeo, por ejemplo el alto, el reproductor de vídeo ajusta el tamaño del vídeo a esa dimensión y escala la otra dimensión en función de la relación de aspecto del contenido de vídeo. Si estableces ambas dimensiones con una relación de aspecto que no se corresponde con el contenido del vídeo, el reproductor escala la dimensión más próxima para que se vea, pero mantiene su relación de aspecto. El vídeo se centrará horizontal o verticalmente con espacio en blanco a cada lado.El ejemplo siguiente reproduce un vídeo, muestra un póster hasta que se carga el contenido y reproduce un vídeo repetidamente con los controles de reproducción.
<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 vídeo en HTML, pero hay muchas más opciones disponibles cuando se usa JavaScript. Para obtener más información, consulta Usar JavaScript para controlar el reproductor de vídeo HTML5.¿Cómo puedo admitir más 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 más de un formato de archivo, y más exploradores, puedes usar el elementosource.El elemento source trabaja con el elemento video para proporcionar la mejor opción para el formato del contenido de vídeo. Eso significa que puedes asignar varios formatos y el reproductor de vídeo HTML5 selecciona el más 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:<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— vídeo mp4, webm y ogg. En función 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 más antiguos?
Agregar un vídeo a una página web sin complementos ni reproductores externos funciona bien para usuarios con Internet Explorer 9 o Internet Explorer 10 en la nueva interfaz de usuario de Windows, o bien para usuarios con dispositivos móviles que no admiten complementos. Sin embargo, esto podría limitar tu público tan solo a los usuarios con compatibilidad para los exploradores modernos. Los elementos HTML5 de vídeo y audio permiten insertar texto o código entre las etiquetas que se ejecutará únicamente si el explorador de un usuario no admite HTML5.Nota Los elementos audio y video se diferencian de canvas en que el código entre los elementos solo se ejecuta cuando no se admiten los dos elementos. Canvas es único en el sentido de que el código 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 más información, consulta el tema sobre Elemento HTML5 Canvas y el DOM de Canvas Shadow.El ejemplo siguiente es similar al último ejemplo, excepto que se añadió una etiqueta de objeto para ejecutar el reproductor Adobe Flash con el fin de admitir exploradores anteriores.<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>En este ejemplo, si el explorador admite el elemento HTML5 video, prueba con los formatos de vídeo presentados. Si no se admite el elemento HTML5 video, carga el reproductor Flash usando el objeto y las etiquetas incrustadas.Otra opción de reserva es ofrecer simplemente un vínculo al contenido del vídeo tal y como muestra el ejemplo siguiente:HTML5 Video is required for this example. <a href="demo.mp4">Download the video</a> file.Para obtener más información sobre técnicas de reserva en aplicaciones de la Tienda Windows con JavaScript, consulta Complementos y controles ActiveX.¿Puedo añadir algo de estilo?
Puedes aplicar estilos a tu reproductor HTML5 mediante CSS para ayudar a integrarlo en el diseño de la página 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 imágenes, texto o incluso otros vídeos sobre un elemento video. Un ejemplo es la técnica de imagen en imagen (PiP), que superpone un pequeño vídeo sobre uno mayor en la misma pantalla.Imagen en imagen es una técnica que suele usarse para mostrar contenido relacionado, como diagramas en un evento deportivo, o un intérprete del lenguaje de signos. El ejemplo siguiente usa CSS para colocar un vídeo pequeño sobre uno mayor. También usa CSS para establecer el ancho del reproductor de vídeo, y coloca un borde con color alrededor de las imágenes insertadas.<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> <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 visualización. Normalmente, los elementos de una página 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 vídeo se establece en 100 para garantizar que sea el elemento superior (suponiendo que no se hayan creado más de 100 elementos antes del vídeo). El segundo marco de vídeo se posicionará en función del tamaño de los vídeos que se están reproduciendo y del número de elementos de la página.Se pueden usar otras propiedades CSS, como transform para girar una imagen, oborderRadius para crear esquinas redondeadas en el elemento video, como se muestra en el ejemplo siguiente. Para obtener más información, consulta las páginas de referencia de las hojas de estilos en cascada.<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: hand; } </style> <script type="text/javascript"> // When the HTML elements load, call init() document.addEventListener("DOMContentLoaded", init, false); // Rotate the video by 30degrees when image is clicked function init() { 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 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 example requires Internet Explorer 9 or later </video> </body> </html>
Primero selecionas el tipo de reproductor que mas te agrade.
bye .....