6.7. Ús correcte dels vídeos en un projecte transmèdia
6.7.2. Com incrustar vídeo
Incrustar (embed en anglès) vídeo és un procés amb el qual incloem un vídeo en un altre suport.
Quan afegim un vídeo en una presentació PowerPoint o Keynote, o al nostre blog, estem incrustant un vídeo.
És una tasca que no està gens sistematitzada. En el món fora de línia, cada programa de creació transmèdia té normes diferents sobre com s’incrusta un vídeo. Cada sistema de distribució de vídeos té els seus propis mecanismes i després cada plataforma de distribució de continguts té les seves regles específiques sobre com afegir vídeo.
Sense ànim de ser exhaustius, ara comentarem mecanismes senzills per a incloure vídeos en diversos formats digitals.
Incrustar vídeos en una pàgina web
Prèviament a l’aparició d’HTML 5 no hi havia una manera sistemàtica d’incloure vídeo en una pàgina web. Era necessari incloure-hi algun tipus de connector, que havia d’instal·lar-se. Un dels més estesos i populars era Flash, que garantia vídeos que ocupaven poc espai i estava bastant estès, i per tant era l’opció per defecte.
HTML 5 ofereix una etiqueta específica per a incloure vídeos, amb l’original nom de «<video>». Aquesta n’és la sintaxi:
<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>
A width posarem l’amplària amb què volem que aparegui el vídeo en la pàgina; per defecte, hem posat 320. A height, l’altura. A src posarem el nom de l’arxiu de vídeo que volem que aparegui; en aquest cas l’hem posat en dos formats possibles, mp4 i ogg, que són les opcions més accessibles per a tothom. L’etiqueta està feta suposant que els dos vídeos estan en el mateix directori que la pàgina web que els allotja. Si els guardo en un directori per a vídeos, l’etiqueta hauria d’incloure el camí. Per exemple, si guardem els vídeos en un subdirectori anomenat «misVideos» l’etiquetatge hauria de canviar així:
<source src=“/misVideos/movie.mp4” type="video/mp4"> <source src=“/misVideos/movie.ogg” type=“video/ogg">
Si el navegador que utilitzem no és capaç d’entendre l’etiqueta «<video>» apareixerà la frase «Tu navegador no acepta el tag video de HTML 5».
Si volem que l’usuari pugui controlar el vídeo amb botons de play, volume, etc., l’etiqueta haurà d’aparèixer així:
<video width="320" height="240" controls>
Controls és la paraula clau responsable per a l’aparició de la interfície. Per contra, si volem que el vídeo s’executi automàticament utilitzarem l’expressió autoplay:
<video width="320" height="240" autoplay>
El mateix que vam dir en relació amb afegir automàticament àudio a les nostres pàgines web, s’aplica també per al vídeo executat automàticament. Això pot resultar molest, i fins i tot posar els nostres usuaris en situacions problemàtiques, com quan naveguen en una biblioteca o utilitzen un mòbil per a visitar una web en un espai públic, així que el millor és utilitzar l’opció controls i que sigui l’usuari el qui decideixi executar-lo. Si hi ha un vídeo de fons com a introducció a la pàgina web, i forma part intrínseca de l’estètica d’aquesta, llavors el millor serà que sigui un vídeo sense so.
Afegir vídeos des de YouTube
<video> és la instrucció perfecta per a incloure vídeos dels quals tenim accés en el fitxer. Però també podem incloure de manera senzilla vídeos d’altres plataformes, com YouTube. L’etiqueta usada és <iframe>:
<iframe width="420" height="345" src="https://www.youtube.com/embed/friugilfswa"> </iframe>
El codi que apareix després d’embed no és l’adreça web del vídeo sinó el codi identificador del vídeo, el video ID. Per a obtenir el video ID, solament hem d’anar a l’adreça web del vídeo, per exemple:
https://www.youtube.com/watch?v=friugilfswa
El video ID serà una sèrie de lletres que apareixeran al final de la URL, després del signe =. Així, en el nostre cas el video ID serà frIUgilfsWA.
Si volem que el vídeo s’executi automàticament, afegirem la paraula autoplay després del video ID i abans de les cometes, amb un signe ? davant:
<iframe width="420" height="345" src="https://www.youtube.com/embed/friugilfswa?autoplay=1”> </iframe>
Perquè apareguin controls, tenim controls. Si controls=0 no apareixen els controls. Si controls=1 sí que hi tenim accés.
<iframe width="420" height="345" src="https://www.youtube.com/embed/friugilfswa?autoplay=1&controls=1”> </iframe>