6.7. Uso correcto de los vídeos en un proyecto transmedia
6.7.2. Cómo incrustar vídeo
Incrustar (embed en inglés) vídeo es un proceso mediante el cual incluimos un vídeo en otro soporte.
Cuando añadimos un vídeo en una presentación PowerPoint o Keynote, o en nuestro blog, estamos incrustando un vídeo.
Es una tarea que no está nada sistematizada. En el mundo fuera de línea, cada programa de creación transmedia tiene normas diferentes sobre cómo se incrusta un vídeo. Cada sistema de distribución de vídeos tiene sus propios mecanismos, y después cada plataforma de distribución de contenidos tiene sus reglas específicas sobre cómo añadir vídeo.
Sin ánimo de ser exhaustivos, ahora comentaremos mecanismos sencillos para incluir vídeos en varios formatos digitales.
Incrustar vídeos en una página web
De manera previa a la aparición de HTML 5, no había una manera sistemática de incluir vídeo en una página web. Era necesario incluir algún tipo de conector, que tenía que instalarse. Uno de los más extendidos y populares era Flash, que garantizaba vídeos que ocupaban poco espacio y estaba bastante extendido, y por lo tanto era la opción por defecto.
HTML 5 ofrece una etiqueta específica para incluir vídeos, con el original nombre de «<video>». Esta es su sintaxis:
<video width="320" height="240"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Tu navegador no acepta el tag video de HTML 5 </video>
En width pondremos la anchura con la que queremos que aparezca el vídeo en la página; por defecto, hemos puesto 320. En height, la altura. En src pondremos el nombre del archivo de vídeo que queremos que aparezca; en este caso, lo hemos puesto en dos formatos posibles, MP4 y OGG, que son las opciones más accesibles para todo el mundo. La etiqueta está hecha suponiendo que los dos vídeos están en el mismo directorio que la página web que los aloja. Si los guardo en un directorio para vídeos, la etiqueta tendría que incluir el camino. Por ejemplo, si guardamos los vídeos en un subdirectorio llamado «misVideos», el etiquetado debería cambiar de este modo:
<source src=“/misVideos/movie.mp4” type="video/mp4"> <source src=“/misVideos/movie.ogg” type=“video/ogg">
Si el navegador que utilizamos no es capaz de entender la etiqueta «<video>», aparecerá la frase «Tu navegador no acepta el tag video de HTML 5».
Si queremos que el usuario pueda controlar el vídeo con botones de play, volume, etc., la etiqueta tendrá que aparecer así:
<video width="320" height="240" controls>
Controls es la palabra clave responsable para la aparición de la interfaz. Por el contrario, si queremos que el vídeo se ejecute de manera automática, utilizaremos la expresión autoplay:
<video width="320" height="240" autoplay>
Lo mismo que dijimos en relación con añadir automáticamente audio a nuestras páginas web, se aplica también para el vídeo ejecutado de manera automática. Esto puede resultar molesto, e incluso poner a nuestros usuarios en situaciones problemáticas, como cuando navegan en una biblioteca o utilizan un móvil para visitar una web en un espacio público, así que lo mejor es utilizar la opción controls y que sea el usuario quien decida ejecutarlo. Si hay un vídeo de fondo como introducción a la página web, y forma parte intrínseca de la estética de esta, entonces lo mejor será que se trate de un vídeo sin sonido.
Añadir vídeos desde YouTube
<video> es la instrucción perfecta para incluir vídeos a los que tenemos acceso en el fichero. Sin embargo, también podemos incluir de manera sencilla vídeos de otras plataformas, como YouTube. La etiqueta usada es <iframe>:
<iframe width="420" height="345" src="https://www.youtube.com/embed/friugilfswa"> </iframe>
El código que aparece después de embed no es la dirección web del vídeo, sino el código identificador del vídeo, el video ID. Para obtener el video ID, solo tenemos que ir a la dirección web del vídeo. Por ejemplo:
https://www.youtube.com/watch?v=friugilfswa
El video ID será una serie de letras que aparecerán al final de la URL, después del signo =. De este modo, en nuestro caso, el video ID será frIUgilfsWA.
Si queremos que el vídeo se ejecute automáticamente, añadiremos la palabra autoplay después del video ID y antes de las comillas, con un signo ? delante:
<iframe width="420" height="345" src="https://www.youtube.com/embed/friugilfswa?autoplay=1”> </iframe>
Para que aparezcan controles, tenemos controls. Si controls=0, no aparecen los controles. Si controls=1 sí que tenemos acceso a los mismos.
<iframe width="420" height="345" src="https://www.youtube.com/embed/friugilfswa?autoplay=1&controls=1”> </iframe>