Inserir vídeos ogg/theora en pàgines html

Inserir vídeos ogg/theora en pàgines html.

Index:

1- Convertir vídeos avi o mpg al format ogg/theora

2- Propietats del vídeo convertit al format *.ogv

3- Baixar l’applet cortado.jar

4- Inserir vídeos ogv amb l’eXelearning que llegirà qualsevol navegador.

5- Inserir vídeos que sols llegirà Firefox.

1- Convertir vídeos avi o mpg al format ogg/theora

Convertir vídeos *.avi o *.mpg al format *.ogv és molt fàcil en Ubuntu i no necessitarem utilitzar controladors privatius si sols volem que els llegisca Firefox.

Instal·la el programa conversor de formats de vídeo ffmpeg amb el gestor de programes synaptic d’Ubuntu ,o amb el gestor de programes adept de Kubuntu o amb la gestor de programes apt-get a la línia de terminal.

Obre un terminal d’ordres amb ALT+F2 i escriu gnome-terminal ( o konsole).

Ves a la carpeta on tens el vídeo *.avi o *.mpg que vols convertir al format *.ogv amb una ordre semblant a

$ cd   /home/carles/Vídeos

(El teu vídeo està en un lloc diferent , et caldrà canviar el camí).

Per convertir el format del vídeo ara utilitzem el ffmpeg amb l’ordre.

$ ffmpeg -i input.mpg -vcodec theora -y output.ogv

(canvia input.mpg pel nom del fitxer que vols converir, en el meu cas és mov07035.mpg i canvia output.ogv per el nom del fitxer que vols d’eixida en format ogv, en el meu cas mov07035.ogv , així jo he posat com ordre ffmpeg -i mov07035.mpg -vcodec theora -y mov07035.ogv ).

2- Propietats del vídeo convertit al format *.ogv

El vídeo original que he emprat (mov07035.mpg) tenia una mida de 5,4 MB i el vídeo d’eixida (mov07035.ogv) tenia una mida de 1,6 MB , això vol dir que ffmpeg al convertir-lo al format ogg/theora l’ha comprimit un 70,37%, evidentment això ens permet estalviar espai web als servidors on pengem html i ens fa guanyar velocitat quan els alumnes es baixen el vídeos incrustats a les pàgines html (ja sabem que les velocitats d’internet van com van).

Ens cal anotar una propietat del vídeo convertit al format ogv (o del mpg o avi original) , i és la mida del vídeo. Per saber això premem sobre el vídeo ogv amb el botó dret i cerquem les propietats. Anotem en full l’amplada x alçada. ( En el nostre cas 640 x 480 píxels).

propietats_vídeo

3- Baixar l’applet cortado.jar

Ara ens cal baixar l’applet cortador.jar per inserir vídeos ogv i permetre que qualsevol navegador inclòs el Internet Explorer (que no dona suport al format lliure ogg/theora) puga mostrar el nostre vídeo. L’applet cortado.jar el podeu baixar de http://theora.org/cortado.jar .

4- Inserir vídeos ogv amb l’eXelearning que llegirà qualsevol navegador.

Anem a mostrar com inserir vídeos ogv amb l’eXelearning que és editor d’unitats didàctiques adreçat especialment a docents (també per als maldestres) per fer pàgines web.

Prem sobre l’iDevice Aplicació de java a la part esquerre deXelearning.

applet-java-ogg-theora

Prem el botó Afegir arxius (1) , cerca el fitxer cortador.jar a la carpeta on estiga (2) , prem el botó Càrrega (3) , i t’apareixerà carregat dins la teua unitat (4) , repeteix el procediment per carregar el teu vídeo ogv.

applet-java-ogg-theora2-2

Ara cal que copies el codi següent:

<applet code=”com.fluendo.player.Cortado.class” archive=”cortado.jar” width=”640″ height=”480″>
<param name=”url” value=”mov07035.ogv”/>
</applet>

Canvia al costat del paràmetre value (1) el nom mov07035.ogv pel del teu vídeo ogv.

Canvia al costat dels paràmetres width , height (2) l’amplada x alçada en pixels que hem anotat abans.

Ja podem alçar la unitat amb el vídeo incrustat. Si exportem la unitat en format htmlzip , SCORM, o IMS podrem veure el vídeo incrustat al moodle del nostre centre.

Ací tens una unitat que utilitze amb els alumnes amb vídeos ogg/theora incrustats.

5- Inserir vídeos que sols llegirà Firefox.

Si no volem utilitzar cap màquina virtual de java jre , també podem incrustar vídeos a les nostres pàgines html però en aquest cas sols el llegirà Firefox i pocs navegadors més.

Ho farem amb les etiquetes de <video> </video> canviant la src del vídeo amb el format següent:

<video src=”http://v2v.cc/~j/theora_testsuite/320×240.ogg” controls>
</video>

En aquest cas és absolutament recomanable que mireu aquestes fonts.

Font1: https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox

Font2: http://wiki.xiph.org/HTML5