Tag Archives: enhancement

Flash video accessibili e non intrusivi

jQuery.Flash – sviluppato da Luke Lutman – è un potente e flessibile plugin per jQuery che serve ad aggiungere a runtime un ‘oggetto’ Flash. Come questo.

Loading the player…


Google, the Master Plan. © 2007 O. Halici, J. Mayer

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…).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 $('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:

1
<div class="flv-player-instance"><a href="http://www.domain/media/yourpathtovideofile.flv"><img alt="Bergen Intrepid Turbine R/C helicopter" src="http://www.gcmingati.net/wordpress/wp-content/uploads/bergen.jpg" /></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.