Una de las características más mencionadas de
HTML5 fue la capacidad de procesar video. El entusiasmo nada tenía que ver con
las nuevas herramientas provistas por HTML5 para este propósito, sino más bien
con el hecho de que desde los videos se volvieron una pieza esencial de
Internet, todos esperaban soporte nativo por parte de los navegadores. Era como
que todos conocían la importancia de los videos excepto aquellos encargados de
desarrollar las tecnologías para la web.
Pero ahora que ya disponemos de soporte nativo
para videos e incluso un estándar que nos permitirá crear aplicaciones de
procesamiento de video compatibles con múltiples navegadores, podemos
comprender que la situación era mucho más complicada de lo que nos habíamos
imaginado. Desde codificadores hasta consumo de recursos, las razones para no
implementar video de forma nativa en los navegadores eran mucho más complejas
que los códigos necesarios para hacerlo.
A pesar de estas complicaciones, HTML5 finalmente introdujo un elemento para insertar y reproducir un video en un documento HTML. El elemento usa etiquetas de apertura y cierre y solo unos pocos parámetros para su función.
Incluimos un elemento <Video> que entre sus principales atributos esta el controls es uno de varios atributos disponibles para este elemento.
Éste, en particular, muestra controles de video provistos por el navegador por
defecto. Cuando el atributo está presente cada navegador activará su propia
interface, permitiendo al usuario comenzar a reproducir el video, pausarlo o
saltar hacia un cuadro específico, entre otras funciones. Junto con controls,
también podemos usar los siguientes:
autoplay Cuando este atributo está presente, el
navegador comenzará a reproducir el video automáticamente tan pronto como
pueda.
loop Si este atributo es especificado, el
navegador comenzará a reproducir el video nuevamente cuando llega al final.
poster Este atributo es utilizado para proveer
una imagen que será mostrada mientras esperamos que el video comience a ser
reproducido.
preload Este atributo puede recibir tres
valores distintos: none, metadata o auto. El primero indica que el video no
debería ser cacheado, por lo general con el propósito de minimizar tráfico
innecesario. El segundo valor, metadata, recomendará al navegador que trate de
capturar información acerca de la fuente (por ejemplo, dimensiones, duración,
primer cuadro, etc…). El tercer valor, auto, es el valor configurado por
defecto que le sugerirá al navegador descargar el archivo tan pronto como sea
posible.
En el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “Video.html”, para luego presionar el botón Add.
Nuevamente
en el panel de proyecto le damos click derecho al mismo y le damos a la opción Add
à New Folder.
A
la nueva carpeta vamos a llamarla “Videos”, y en ella colocamos un video
cualquiera.
En
nuestra página Video.html específicamente en el elemento
<BODY></BODY>, escribiremos colocaremos el mismo, haciendo
referencia en su ubicación en la carpeta correspondiente.
Y al desplegar nuestra página web:
Se mostrará el video que hace referencia a nuestro proyecto.
Ahora,
en Visual Studio después de la etiqueta <P></P>, vamos a colocar el
mismo video, pero sus características la vamos a programar a través de
JavaScript, colocando el siguiente código.
Y al desplegar nuestra página web:
Correrá
otro video que se reproducirá de manera automática.
