Submitted by toniher on
Després de barallar-m'hi una mica, penjo una versió del codi de l'apunt anterior substituint el Javascript del Flowplayer pel sistema d'etiquetes clàssic object
i embed
. D'aquesta manera és més fàcil extrapolar què he fet per a altres casos (per exemple, amb un vídeo flash del Youtube). I, de passada, estalviem també una mica de Javascript… El codi que queda és necessari pel comportament particular del Safari 4 amb l'etiqueta video
, tal com enllaço en el text explicatiu de l'altra versió.
Avís: Amb l'IE6 i l'IE7 pot caler recarregar la pàgina per a poder visualitzar el vídeo correctament fent servir aquest mètode. No n'he trobat la causa del cert, però m'imagino que podria estar relacionada amb el sistema de gestió de la memòria cau d'aquest CMS. Tingueu-ho present si veieu que l'espai del connector Flash apareix en blanc en aqueixes versions.
<video height="480" width="640" autobuffer controls poster="/videos/Meu_Tanganyika.png">
<!-- video per a Firefox 3.5 -->
<source src="/videos/Meu_Tanganyika.ogv" type="video/ogg; codecs="theora, vorbis""/>
<!--- video per a Safari -->
<source src="/videos/Meu_Tanganyika.mp4" type="video/mp4; codecs="mp4v.20.240, mp4a.40.2""/>
<object id="flowplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480">
<param name="movie" value="/flowplayer/flowplayer-3.1.3.swf" />
<param name="flashvars" value='config={"clip":{"autoPlay":true, "autoBuffering":true}, "playlist":[{"url":"http://www.cau.cat/videos/Meu_Tanganyika.png"}, {"url":"http://www.cau.cat/videos/Meu_Tanganyika.flv", "autoPlay":false}]}' />
<embed type="application/x-shockwave-flash" width="640" height="480" src="/flowplayer/flowplayer-3.1.3.swf" flashvars='config={"clip":{"autoPlay":true, "autoBuffering":true}, "playlist":[{"url":"http://www.cau.cat/videos/Meu_Tanganyika.png"}, {"url":"http://www.cau.cat/videos/Meu_Tanganyika.flv", "autoPlay":false}]}'/>
</object>
</video>
<!-- Javascript per a reproduir vídeo al Safari -->
<script>
function playPause() {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<!--- Div contenidor del botó de reproducció del vídeo -->
<div id="playInput"></div>
<!--- Creació del botó de reproducció, necessari per al Safari, no apareix amb el Flash -->
<script>
var v = document.createElement("video");
if ( v.play ) {
document.getElementById('playInput').innerHTML = '<input type=button onclick="playPause()" value="Play/Pause" />';
}
</script>
Comments
Robert Garrigod replied on Permalink
Aquest sí que el veig amb
Aquest sí que el veig amb l'iphone :-)
kukat replied on Permalink
que canya!
Havia fet algún apunt fa un parell de dies sobre açò...Molt guapo! Vivim el principi de la fi del Flash! XD
http://magicanit.blogspot.com/2009/09/convertint-format-lliure-ogg.html
Saps d'alguna pàgina on es pugen penjar vídeos en format ".ogv"???
He estat mirant a Dailymotion, però quan les pujes en aquest format te'ls transformen en Flash....
I Video Bay està encara mooooolt verda!
XD
Salut!
toniher replied on Permalink
Doncs hi ha poca cosa
Hola Kukat,
fantàstic que també t'hagis interessat en això del vídeo obert. Aquesta sèrie d'apunts vénen arran d'una reunió que vam tenir al Citilab coincidint amb el OneWebDay.
Ara m'he mirat això del DailyMotion, i tens raó, només són vídeos oberts algun conjunt que deuen haver triat, però no sembla encara oberta l'opció per a tots els usuaris.
Així doncs, que en tingui constància, tindríem per a penjar-n'hi la Wikimedia Commons (els vídeos han de ser llavors lliures (CC-BY, CC-BY-SA, GFDL o domini públic), i en principi suposo que haurien de tenir un cert interès enciclopèdic). D'altres llocs que he trobat, encara que hi digui experimental, el que té més bona pinta és Tinyvid. Ací un vídeo d'exemple que hi he pujat.