Flash video
accessibili e non intrusivi
March 20th, 2007
jQuery.Flash - sviluppato da Luke Lutman - è un potente e flessibile plugin per jQuery che serve ad aggiungere a runtime un ‘oggetto’ Flash. Come questo.
Pages are progressively enhanced when Flash and Javascript are available, and fallback to plain (X)HTML when they’re not — like search-engines, pdas or mobile phones. Replacements can happen as soon as the dom is ready. (X)HTML, CSS and Javascript stay where they belong — away from one another — making it easy to remove, update or swap out down the road.
Il plugin, offre la possibilità di fare dinamicamente l’embed di 5 ‘tipi’ di flash movies (Basic Embed, Flash Text-Replacement - sIFR, MP3 Player, YouTube Video, Inline Params, FlashBlock). Io mi sono ispirato con lo scritp che fa funzionare l’MP3 player.
Questa la mia versione ‘ispirata’ (ma sia chiaro, basata 90% su quanto già scritto da Lutman, ma anche 98…).
$('a[@href$="flv"]').flash(
{ src: 'flvplayer.swf'},
{ version: 8 },
function(htmlOptions) {
$this = $(this);
htmlOptions.width = '320';
htmlOptions.height = '260';
htmlOptions.flashvars.file = $this.attr('href');
htmlOptions.flashvars.image = $this.children().attr('src');
htmlOptions.flashvars.showfsbutton = 'false';
htmlOptions.flashvars.autostart = 'false';
$this.before($.fn.flash.transform(htmlOptions));
}
);
Infatti, anche se l’esempio con l’mp3 player usa l’SWF FLV 3.6 di Jeroen Wijering (che tra l’altro é il miglior .flv player attualmente reperibile), Lutman non aveva pensato ad usare questo player anche per i video.
E io, che tra elicotteri e gite fuori porta ho parecchi video che volendo potrei postare, avevo bisogno di un sistema che mi mantenga le pagine pulite e semplici da gestire e così ho ‘esteso’ lo script per le mie esigenze.
E questo metodo è perfetto.
Dovunque io voglia un video d’ora in poi, mi basterà inserire un’immagine ed un link:
<div class="flv-player-instance">
<a href="http://www.domain/media/yourpathtovideofile.flv"><img src="http://www.gcmingati.net/wordpress/wp-content/uploads/bergen.jpg"
alt="Bergen Intrepid Turbine R/C helicopter" /></a></div>
Il nostro javscript sostituisce a runtime il link con il nostro bel lettore di file flv e usa come preview l’immagine nel nostro tag ‘a’ e come path per il filmato, l’attributo ‘href’ del link.
Sounds accessible?
Enjoy!
Nota: jQuery Flash plugin su IE ha il bug “jQuery/Packer/ActiveX Bug” che sostanzialmente forza gli utenti a fare click su ogni singolo controlo ActiveX (Flash, Quicktime, etc.) in una pagina, prima di poterlo utilizzare anche se il plugin è embeddato dinamicamente via javascript. Per questo su IE bisogna prima attivare il plugin facendo click sopra al player video e poi riprodurre il filmato. E’ un bug risolvibile e comunque non credo sia bloccante… piuttosto usate Firefox!
Nota: il video qui riprodotto è stato downloadato da YouTube grazie a VideoDL.
Update: da mercoledi 13 febbraio 2008 jquery.flash non é più utilizzato per fare l’embed dinamico del player di filmati Flash Video JW FLV Media Player 3.14. Al suo posto utilizzo SFWObject (formerly known as FlashObject) ed é quindi possibile usufruire della modalità full-screen (in Firefox e Opera). Gli esempi in questo post restano comunque validi nella sintassi ma è comunque consigliabile usare SWFObject per l’embed dei file Flash, ed in particolare col JW FLV Media Player vista la disponibilità di una API JS con cui controllare il playback e non solo.
