Traductor

Vídeos a la xarxa

04/07/2012

    Cada vegada és més freqüent que les pàgines web dels centres escolars mostren vídeos amb diferent temàtica educativa. El ventall d'arguments que podem trobar a Internet és molt ampli, des de vídeos que mostren les actuacions dels alumnes en els esdeveniments programats al llarg del curs, fins a pel·licules que, amb un marcat caràcter pedagògic, transmeten continguts, diferents formes de treball o avanços de l'alumnat en una determinada àrea.

   La tasca no és senzilla. Cal dissenyar un guió, realitzar els assajos corresponents, filmar, fer el muntatge (afegint títols, subtítols, efectes, so,...), triar el format més adequat del fitxer de vídeo, pujar-lo al lloc web i inserir-lo en la pàgina de l'escola.

   Sense entrar en els avantatges o inconvenients de la utilització més o menys encertada dels vídeos com a eina pedagògica, des d'aquestes línies tractaré d'explicar les formes bàsiques d'incloure les nostres produccions audiovisuals en una pàgina web partint de la base de que la pel·lícula ja es troba al nostre ordinador i de que es disposa dels suficients coneixements per tal d'actualitzar els arxius mitjançant la transferència FTP (File Transfer Protocol - Protocol de Transferència de Fitxers).

   Bàsicament tenim dues opcions:

   a) Pujar el contingut a Youtube i des d'ací, seguint les instruccions, incloure el vídeo.
     
   b) Pujar la pel·lícula al nostre lloc web (via FTP) i triar la millor opció d'inserció en la nostra pàgina web.
       

VÍDEO DES DE YOUTUBE

   En primer lloc caldrà disposar d'un compte. Qualsevol compte de correu que emprem dins l'entorn Google servirà. Ajuda per a la creació i gestió del compte ACÍ.

   Després d'haver iniciat la sessió amb el nostre nom d'usuari i contrasenya estarem dins del nostre lloc a Youtube. En la part superior dreta, seleccionant l'enllaç del nostre nom o de la icona que ens identifica, s'accedeix al menú des d'on podrem canviar la configuració, subscriure'ns a diferents canals, configurar el nostre propi canal o entrar en el gestor de vídeos. Aquesta última opció és la que tenim que triar per tal de pujar les nostres produccions.

   Des del Gestor de Vídeo, seleccionant el botó PENJA, pujarem l'arxiu corresponent. D'entrada no importa el tipus d'arxiu ja que Youtube accepta els més genèrics emprats amb les càmeres: AVI, MPEG4 o MOV. Més sobre formats compatibles ACÍ.

   En la pàgina de pujada disposem de diferents opcions que cal analitzar encara que siga breument.

  • Pestanya d'Informació Bàsica
  1. Títol: Podem triar un nom diferent al de l'arxiu pujat.
  2. Descripció: Disposem d'un espai per tal d'afegir informació complementària.
  3. Etiquetes: Lloc per a incloure diferents etiquetes que ajudaran a classificar el vídeo.
  4. Minuatures: Podem triar el fotograma que identificarà la nostra producció.
  5. Configuració de privadesa: Depenent de l'opció que es trie canviarà la forma en que es compartirà el contingut. És recomanable llegir l'entrada publicada en aquest bloc el 17 d'abril amb el títol "Youtube a l'aula" (accés a l'entrada ACÍ). En el punt 3 s'explica com compartir de forma privada els vídeos.
  6. Categoria: És el lloc on decidim el grup on incloure el vídeo.
  7. Llicència i propietat dels drets: Cadascú haurà de triar el que més li convinga.

  • Pestanya de Configuració Avançada
Ací decidirem si es permeten els comentaris, si es poden votar aquestos comentaris, si es poden veure les valoracions del vídeo o si es permeten respostes. També podrem indicar si l'arxiu estarà disponible per als telèfons mòbils o per als televisors.
Acceptant que s'active la inserció, permetrem que altres usuaris incloguen el vídeo en les seues pàgines web. Finalment podrem indicar la ubicació on s'ha fet la gravació, la data d'enregistrament i si volem el vídeo en 3D.

   Les diferents opcions que apareixen en aquesta pestanya de Configuració Avançada les trobarem al seleccionar el botó superior dret COMPARTEIX que és el lloc des d'on anem a decidir el format d'inserció en la nostra pàgina.

   El primer que trobarem serà l'enllaç curt a l'arxiu amb un format semblant a http://youtu.be/5ub-xxxxx. Triant el menú Opcions (part immediatament inferior dreta al lloc de l'enllaç curt) veurem l'enllaç llarg similar a http://www.youtube.com/watch?v=5ub-xxxx. També en Opcions podrem triar el moment d'inci de la reproducció.

   El que més ens interessa és el codi d'inserció per a la nostra pàgina web. Aquest codi l'obtindrem seleccionant el botó INSEREIX. D'entre les diferents possibilitats cal destacar la de mostrar suggeriments de vídeos al finalitzar la reproducció. En produccions educatives és aconsellable no mostrar suggeriments.

   Després de triar la mida i les opcions adequades obtindrem el codi que caldrà incloure en la nostra pàgina.


      Si no realitzem les tasques anteriorment descrites en el moment de pujar el vídeo, tenim al nostre abast un altre lloc en Youtube des d'on realitzar allò abans descrit, es tracta de la secció Vídeos Penjats, espai que allotja la llista dels arxius que pugem.

   Des de Vídeos Penjats, seleccionant el vídeo (quadre de selecció a l'esquerra de l'arxiu) i obrint el menú superior desplegable Accions, podrem triar el nivell de privadesa i el tipus de llicència. També des d'ací, seleccionant el fotograma que identifica l'arxiu, podrem veure la pel·lícula i just davall trobarem el botó COMPARTEIX.

   Tot el que fins ara s'ha comentat es basa en la suposició de que disposem d'un domini i d'un lloc d'emmagatzematge extern on allotgem els arxius necessaris per al correcte funcionament de la nostra pàgina web. Però és molt probable que  les nostres publicacions les realitzem mitjançant un bloc.

    En el cas d'insercions en blocs, per exemple els allotjats dins Blogger, existeixen senzilles eines que permeten amb facilitat incloure els vídeos de Youtube allí on estimem oportú. També podrem incloure l'arxiu mitjançant codi HTML triant aquesta opció en la redacció de l'entrada.

    Per a  les insercions d'arxius audiovisuals en Blogger des de Youtube serveix tot allò que s'ha explicat abans, però cal tenir en compte el següent:

   Si incloem el vídeo mitjançant el botó del que disposem al menú de Blogger, no tenim la possibilitat d'impedir els suggeriments al final de la reproducció. Per tal d'evitar que els nostres alumnes tinguen accés a material audiovisual relacionat (segons Youtube) necessitarem incloure el vídeo amb el codi HTML ja que la seqüencia ?rel=0 afegida al final de l'adreça és la que no permet l'accés a arxius relacionats.  Els següents exemples il·lustren aquesta circumstància:
                                                                Codi amb la possibilitat de mostrar material relacionat 


                                                                Codi sense la possibilitat de mostrar material relacionat 



VÍDEOS DES DEL NOSTRE ESPAI A INTERNET

   D'entrada tenim que prendre la primera decisió important: FLASH o HTML5 (...o els dos).

   Actualment certes plataformes i empreses estan abandonant l'estàndard FLASH i fan una clara aposta per HTML5, aquesta circumstància fa que no tots els navegadors ni tots els dispositius mòbils (telèfons, tauletes tàctils,...) puguen reproduir els mateixos continguts audiovisuals. Aquest fet complica la inserció dels vídeos en la nostra pàgina web.

   Podem començar per avaluar la capacitat del nostre navegador per a reproduir continguts audiovisuals (es aconsellable provar amb més d'un). Existeixen molts llocs que ofereixen diferents tests de reproducció de vídeo per a navegadors, les següents adreces ens serviran:
http://www.youtube.com/html5
Utilitat de Youtube per a reproducció de vídeo HTML5. Al final de la pàgina podrem veure la compatibilitat del nostre navegador amb els formats: Etiqueta de vídeo, h.264 i WebM.
http://ie.microsoft.com/testdrive/graphics/videoformatsupport/default.html
Pàgina de Microsoft que avalua la capacitat del nostre navegador per a la reproducció de diferents tipus d'arxius multimèdia.
    Bàsicament existeixen tres tipus d'arxius multimèdia (vídeo i àudio), són els següents:
Ogg Theora (.ogg / .ogv). Àudio Vorbis
Suportat (de moment) per Firefox, Chrome i Opera. 
H.264 (.mp4). Àudio AAC
Suportat (de moment) per Internet Explorer a partir de la versió 9, Safari i Chrome. 
VP8 (.webm).  Àudio Vorbis 
Suportat (de moment) per Firefox, Chrome i Opera
   En les diferents actualitzacions dels navegadors van incorporant-se millores en la reproducció d'arxius multimèdia, cosa per la qual és aconsellable disposar de l'última versió del nostre "browser".

   Aleshores, davant l'embolic multimèdia, com inserim els nostres vídeos? La resposta sembla clara: afegint les diferents possibilitats de reproducció i solucionar qualsevol problema. Tot seguit s'enumera la seqüencia per tal de preveure una reproducció òptima de les nostres produccions audiovisuals.


1. Conversió de l'arxiu multimèdia
   
   Després de realitzar la gravació, d'haver editat la pel·lícula, d'haver fet les modificacions necessàries; en definitiva, una vegada disposem ja de l'arxiu final al nostre ordinador cal convertir el format original als diferents formats que emprarem.

   Suposem que una vegada finalitzat tot el treball de producció a l'ordinador, el nostre arxiu és escola.avi (podria estar amb un altre format wmv, mpeg, mov,...). Ara cal tenir a l'abast un programari capaç de convertir els arxius de vídeo.

   Existeixen molts programes dissenyats per a realitzar la tasca de conversió multimèdia, entre d'altres trobem:

   Pot ser siga el més senzill d'utilitzar, sols tenim que arrossegar l'arxiu a convertir i triar el format d'eixida.
   
   WinFF
   Ofereix més possibilitats que l'anterior sense ser complicat.

   Ambdós compten amb llicència GPL i estan disponibles en diferents plataformes.

   Una vegada finalitzada la transformació tindrem tres nous arxius que, seguint l'exemple, seran: escola.mp4, escola.ogv i escola.webm.

   Per tal de completar la totalitat de possibilitats (que més avall s'inclouran), també caldria convertir l'arxiu original a format FLASH. Existeixen dues posibilitats: el format flv i el format swf. És aconsellable emprar el primer ja que als reproductors apareixen els controls (inici, pausa, volum,...).

   En la transformació dels nostres arxius multimèdia podrem utilitzar:

   Aquest programari, disponible per a Windows, ja s'ha comentan en aquest bloc amb data 7 de juny. Accés ACÍ

   Aquest programari que també actua baix Windows, ofereix un gran avantatge que més avall es comentarà.

   Existeixen programes que funcionen amb altres plataformes.

   Ara ja disposem de tots els arxius necessaris: escola.mp4, escola.ogv, escola.webm i escola.flv, sols tenim que pujar-los al nostre servidor emprant el programa que normalment utilitzem per a la transferència d'arxius (FTP), Filezilla per exemple. 


2. Codi HTML

    El codi que tenim que afegir a la nostra pàgina per a la reproducció en l'estàndard HTML5 amb qualsevol navegador és el següent:

<video  width="450" height="337">  
(Inclou les mides de visualització)
<source  src="escola.ogv" type='video/ogg; codecs="theora, vorbis"'/> 
<source  src="escola.webm" type='video/webm' />
<source  src="escola.mp4" type='video/mp4' />
(Vídeos en diferent format)
<p> No podeu veure el vídeo. El vostra navegador no accepta html5. Cal actualitzar-lo</p>
(Missatge si el navegador no suporta HTML5)
</video>

   Si a més volem completar totes les possibilitats de reproducció, afegirem les línies que permetran veure el vídeo en format FLASH. Aquesta opció sols es descriu com a simple informació ja que ens resultarà més senzill actualitzar el navegador que emprem.

<video  width="450" height="337">  
<source  src="escola.ogv" type='video/ogg; codecs="theora, vorbis"'/> 
<source  src="escola.webm" type='video/webm' />
<source  src="escola.mp4" type='video/mp4' />
<object type="application/x-shockwave-flash" data="flowPlayer.swf" id="flowplayer" width="450" height="337">
<param name="flashvars" value="config={ autoPlay: false, loop: false, initialScale: 'scale', showLoopButton: false, showPlayListButtons: false, playList: [ { url: 'escola.flv' }, ]}" />
</object>
(Codi extret d'eXelearning)
</video>

Cal advertir que s'ha de pujar un nou arxiu al servidor, el reproductor flash (flowPlayer.swf). Tenim a l'abast diferents reproductors amb característiques distintes (color, botons,...).

   Programari que ens facilita la tasca:

   Els processos anteriors quedarien resumits així:

1. Convertir els vídeos.
2. Escriure el codi html incloent els diferents formats d'arxius per tal d'una reproducció òptima en qualsevol navegador
3. Preveure, emprant FLASH, la reproducció en navegadors antics que no accepten HTML5. Problema que queda resolt amb l'actualització del programari.

   La tasca resulta llarga i complicada, existeix un camí més senzill? Doncs sí, treballar amb Freemake Video Converter o programari semblant.

   Emprant Freemaker sols tindrem que triar l'arxiu de vídeo, indicar el tipus d'eixida (flv, swf, html5, android, sony-PSP, nokia, samsung,...) i en uns pocs minuts disposarem dels arxius de vídeo convertits segons les indicacions que donem, el codi que caldrà afegir a la nostra web i les instruccions per a realitzar el treball. Simplement haurem de realitzar les modificacions en la nostra pàgina i pujar-ho tot al servidor.

  
   Fins ací s'ha estat parlant de diferents camins per tal d'inserir vídeo en la nostra pàgina, de distintes variables de reproducció a tenir en compte, de diversos formats d'arxius multimèdia,... Tot el que fins ara s'ha descrit no ens assegura que les produccions audiovisuals puguen veure's en qualsevol dispositiu incloent els telèfons o les tauletes tàctils.

   Si volem anar més enllà i arribar a la solució pràcticament definitiva haurem d'emprar les eines que ens ofereixen des de les pàgines Html5Media i VIDEOJS.


     
   Es tracta bàsicament d'adreçar la nostra pàgina als servidors des d'on treballa Html5Media. 

   Senzillament haurem d'afegir entre les etiquetes <head> i </head> la següent línia:

<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>

   I entre les etiquetes <body> i </body>:

<video src="escola.mp4" width="450" height="337" controls preload></video>

   També ens por servir per als arxius d'àudio:

<audio src="audio.mp3" controls preload></audio>

      

   VIDEOJS

   Des de la web de VIDEOJS ens ofereixen bàsicament dues solucions. La primera és semblant a Html5Media, els arxius estan allotjats en servidors aliens i sols tenim que adreçar correctement la pàgina. El codi a incloure pot ser un poc més complexe que l'anterior, és el següent:

 <head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel= "stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>

<body>
<video id= "video_1" class= "video-js vjs-default-skin" controls preload= "auto" width= "450" height= "337" poster= "inici.png" data-setup= "{}" > <source src= "escola.mp4" type= 'video/mp4' > <source src= "escola.webm" type= 'video/webm' >
</video>
</body>
  • id: identifica al vídeo, pot tenir qualsevol text
  • class: indica el tipus de "pell" (color, tipus de botons,....). Es pot modificar i també podem trobar d'altres oferides al web de VIDEOJS.
  • controls preload: indica si el navegador ha de començar la càrrega immediatament o quan l'usuari inicie la reproducció.
  • poster: inici.png és la primera imatge que apareix abans d'iniciar la reproducció. Caldrà pujar-la també al servidor.
  • En aquest codi es preveu la reproducció en diferents navegadors incloent-hi dues versions de l'arxiu multimèdia (mp4 i webm)
   La segona solució ens permetrà tenir un major control i, conseqüentment, més opcions de personalització. El primer pas és baixar l'arxiu comprimit que conté el programari necessari. Podem anar al web de VIDEOJS o accedir directament des d'ACÏ.

   Després d'extreure el contingut de l'arxiu zip tindrem:
captions.vtt
video.js
video.min.js
video-js.css
video-js.min.css
video-js.png
video-js.swf
demo.html

   L'arxiu demo.html permet veure el resultat al nostre ordinador. Els arxius amb extensió js contenen el codi d'execució emprant JavaScript. Els que tenen extensió css inclouen les diferents característiques d'estil (color, tipus de lletra, ....). Video-js.png conté els símbols emprats en els controls del reproductor. Video-js.swf és el reproductor FLASH. Finalment captions.vtt incorpora les dades per a una reproducció assistida (subtítols, capítols,...). No tots els navegadors estan preparats per a interpretar aquestos arxius, però és una eina que caldrà estudiar i avaluar.

   Ara, que cal fer? Doncs tenim modificar l'arxiu demo.html (canviant-li el nom, fent-ne una còpia,...) i pujar-ho tot al nostre servidor. De moment no utilitzarem les possibilitats dels arxius vtt, cosa per la qual no inclourem l'arxiu captions.vtt.

   El codi de demo.html és el següent. L'adaptarem a les nostres necessitats i emmagatzemarem l'arxiu amb un altre nom escola.html per exemple:

   (Els canvis estan indicats en color blau i les línies que eliminarem en color verd)

<!DOCTYPE html>
<html>

<head>
<title>Video.js | HTML5 Video Player</title>
<title>Exemple Vídeo </title>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>

  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
  <script>
    _V_.options.flash.swf = "video-js.swf";
  </script>
</head>

<body>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="http://video-js.zencoder.com/oceans-clip.png"
      poster="inici.png"
      data-setup="{}">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="escola.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="escola.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    <source src="escola.ogv" type='video/ogg' />
    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
  </video>
</body>
</html>

   El llistat d'arxius que haurem de pujar quedarà així:

Arxius de vídeo:
escola.mp4
escola.ogv
escola.webm

Arxius necessaris per a la reproducció multimèdia:
video.js
video-js.css
video-js.png
video-js.swf

Si volem, podem ometre la pujada de: video.min.js i video-js.min.css
No pujarem captions.vtt

Pàgina principal de reproducció multimèdia:
escola.html

   Ara sols tenim que pujar-ho tot al nostre servidor (se suposa que tots els arxius estan dins la mateixa carpeta) i ja està. Accedint a escola.html podrem gaudir del nostre vídeo.

   Podeu veure un exemple ACÏ


3. Programació del servidor .htaccess

   Arribats a aquest punt, podem pensar que ja tenim tot fet i que gaudirem dels nostres vídeos sense problemes. Pot ser no siga així. Depenent del mètode que triem per a la inserció dels arxius multimèdia cap la possibilitat de que algun navegador no interprete bé la codificació dels arxius que li arriben i no es puguen veure les nostres produccions.

   Si el servidor on tenim allotjada la pàgina empra el programari Apache, la solució passa per afegir dins la carpeta on es troba tot el material un arxiu anomenat .htaccess (accés d'hipertext) que contindrà les següents línies:
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
   L'arxiu .htaccess conté de configuració dels directoris d'Apache. Pot emprar-se per a múltiples tasques, però la que ens interessa és que indique la tipologia dels arxius de vídeo. Si .htaccess es troba a l'arrel del lloc, afectarà a tots els directoris; si es troba dins d'una carpeta, configurarà el directori on està emmagatzemat.

  Crear l'arxiu .htaccess

1. Amb un editor de text (per exemple el bloc de notes) escrivim les línies que contindrà l'arxiu.
2. Emmagatzemem amb el nom htaccess.txt
3. Pugem l'arxiu al servidor.
4. Amb un gestor FTP canviem el nom per .htaccess
5. Ha de tenir permís 644


CONCLUSIÓ

   A l'hora d'incloure vídeos dins la nostra pàgina web tenim que valorar alguns elements que ens ajudaran a triar el mètode a emprar.

   1. Coneixements previs

   Si coneixem (encara que siga de forma bàsica) les característiques de l'HTML o d'una altra codificació per a crear pàgines web, podrem experimentar amb les possibilitats descrites més amunt. Pel contrari, es aconsellable emprar les eines que ofereixen les plataformes d'allotjament d'arxius multimèdia. Ací s'ha comentat Youtube, però existeixen d'altres com Vimeo

   2. Espai d'emmagatzematge

   L'espai per a emmagatzemar arxius a Internet és limitat depenent de les característiques del nostre lloc. Els centres educatius allotgen les pàgines i els arxius en servidors institucionals que de vegades no disposen del suficient espai.

   També cal tenir present que per cada vídeo que volem inserir tenim que pujar tres arxius (mp4, ogv, webm) als que cal afegir tot el programari relacionat (js, swf, html,...).

   Aleshores, si no tenim espai suficient, caldrà triar l'opció d'allotjar el nostre material en una plataforma similar a Youtube (creant un canal, etc) tenint en compte que en aquest cas no tenim el control total del programari que emprem.

   3. Temps, maquinari i tipus de connexió

   Si el temps del que disposem per administrar el lloc web del centre no és el suficient, caldrà elegir l'opció més senzilla. Aquesta opció també la triarem si no disposem del maquinari adequat (ordinadors antics, per exemple) ni d'una connexió externa suficientment ràpida per a la transferència de dades.


   Tot els que fins ací s'ha analitzat i comentat té l'objectiu de facilitar l'ús de les TIC en projectes TAC a les nostres escoles. Espere haver-ho aconseguit i si observeu alguna errada no dubteu en escriure. Sort!!


Cap comentari:

Publica un comentari a l'entrada

Animeu-vos a participar!

Subscriure's a: Missatges (Atom)