Languages

User login


Com posar un video a la web drupal de guifi.net


...mostraré dos maneres, i recomano la segona, però al ser llenguatge HTML5 és molt provable que hi hagin navegadors que no els hi funcioni encara.. però  val la pena ja que no utilitza llibreries flash de propietat, així que ajuda a l'ús de eines de programari lliure.. a més si el codec que fem servir per crear el video és el Theora o altre també lliure, aconseguim propagar eines lliures i no de propietat.

  1. empaquetat amb flash:

...el codi que s'extreu del video d'una web com youtube, blip.tv, etc...  és semblant al següent:

<embed src="http://blip.tv/play/AYGshQUC" type="application/x-shockwave-flash" 
width="480" height="888" allowscriptaccess="always" allowfullscreen="true">
</embed>

...doncs si es posa tal com va al cos de la nova pàgina, tot i posant les opcions de publicació "FullHTML"  ...no funcionarà.

S'ha d'agafar nomes el contingut de la etiqueta "embed src" o sigui, en l'exemple anterior:

    a. afegint un objecte flash  

     b. posar-ho  a  URL

 

       canvia el tamany amb mides o manualment...

       i com a resultant...

 (aquí a sobre hi ha el video en flash)

  2.  codi HTML5:

  a.  A on s'edita la pàgina Drupal a dalt a l'esquerra del cos del missatge, hi ha un botó que posa "Source" o "Codi font", i podem introduir el codi tal qual, sino ho fem així es veurà com a text. També existeix uns codis <pre> i </pre>, si posem el codi a dins perd la funció de codi i es converteix en text, per tant hem de posar el codi fora d'aquesta etiqueta.

  b.  Introduim el següent codi. On està la ruta del fitxer .ogv és la direcció del video que volguem posar.

<video width="201" height="205" tabindex="0"
  id="video" controls="controls" preload="none"
 poster="http://a.images.blip.tv/Eloirebes-logoGuifinet636.PNG"> 
<source src="http://blip.tv/file/get/Eloirebes-logoGuifinet417.ogv" 
 type="video/ogg; codecs="theora, vorbis""></source>
</video>
 ...i el resultat:

 

 (aquí a sobre hi ha el video HTML5 en .ogv)

 

 Recomano de convertir el video en altres formats, per així poder arribar a  tots els usuaris possibles. I és que el HTML5 pots posar-li diferents enllaços per cada tipus de format de video. Com el següent exemple. Sigui quin sigui el navegador, ja escollirà el format de video que prefereix. Segons tinc entès, Mac i Win tiren de mp4. Com alternativa al HTML5 hi poso el flash. Potser em deixo algun format per algun navegador especial... si algú ho sap que avisi, sisplau.(També recomanen primer el mp4 perque els ipad ho reconeguin, potser és una jugada per ser preferent als altres...).

<video width="201" height="205" tabindex="0"
  id="video" controls="controls" preload="none" 
 poster="http://a.images.blip.tv/Eloirebes-logoGuifinet636.PNG">
<source src="http://blip.tv/file/get/Eloirebes-logoGuifinet963.mp4"
 type="video/mp4">
<source src="http://blip.tv/file/get/Eloirebes-logoGuifinet586.webm"
 type="video/webm"></source>
<source src="http://blip.tv/file/get/Eloirebes-logoGuifinet417.ogv" 
 type="video/ogg"></source>
</source>
<embed src="http://blip.tv/play/AYGshQUC" type="application/x-shockwave-flash" 
width="480" height="888" allowscriptaccess="always" allowfullscreen="true">
</embed>El vostre navegador no accepta HTML5, sisplau actualitza'l
</video>

 ...si us fixeu, hi ha el nou format WEBM que és el VP8 comprat per google, on l'ha fet GPL, de manera que té molts números per convertir-se en un video estandard del HTML5.

 També hi ha el codi complert en flash, i just després, un missatge informant que no es té el navegador actualitzat. Així, com alternativa, arrencarà el video en flash amb el reproductor flash, conjuntament amb el missatge.

 Per posar aquest bloc de codi dins de Drupal, haureu de activar la opció de format  d'entrada "FullHTML" de l'editor de la pàgina. He comprovat que en algun sistema, no es veia correctament el video. Aquest punt sembla que es contradiu amb la primera opció d'aquest manual, el fet de trobar-se dins de l'etiqueta de <video>, deu necessitar el codi <embed> sencer.

...el resultat final!!:

 

 (aquí a sobre hi ha el video HTML5 amb les diverses opcions)

...ara podeu provar aquest manual en diferents navegadors. Aquí us deixo una taula amb les seves versions a partir de quines ja s'accepta el HTML5.

IE Firefox Safari Chrome Opera iPhone Android
9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+

...i els diferents formats de video:

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4+ 10.6+ 6.0+ No

 

nota important!: Si no veieu cap video en aquesta pàgina. és que el vostre navegador no suporta ni flash ni HTML5.  xD

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Gràcies Eloi per

Gràcies Eloi per l'explicació, seguint el teu "com es fa" he actualitzat el video on parlo de guifi.net en traducció a l'anglès.