JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Inclusione di video da YouTube e Vimeo

Flashembed può essere utilizzato anche per includere i player di servizi di condivisione video, come ad esempio YouTube e Vimeo. In entrambi i casi è necessario disporre dell'url del player (rintracciabile nella documentazione delle rispettive API) e dell'id del video (nel caso di Youtube si tratta di un codice alfanumerico di 11 caratteri, mentre quello di Vimeo corrisponde a un numero di 7 cifre). Questo può essere facilmente ottenuto con una piccola regular expression partendo dall'url della pagina del video ( ad esempio http://www.vimeo.com/931695 e http://www.youtube.com/watch?v=5G-hcQkY_Gk).

Per personalizzare il player in base alle necessità è necessario impostare i valori di alcune proprietà nell'hash del parametro flashvars di Flashembed: è possibile così abilitare o disibilitare l'opzione fullscreen, scegliere di mostrare o nascondere titolo, rating, nome dell'autore o video correlati, settare l'autoplay del video, il loop, la visualizzazione in alta definizione , etc. L'elenco completo delle opzioni è disponibile sulle pagine della documentazione ufficiale di YouTube e Vimeo.

Vediamo direttamente gli esempi in opera con l'inclusione del player di Youtube e Vimeo. Lo script necessario presenta piccole differenze nelle due versioni, ma è veramente semplice ed è visibile nel codice sorgente delle pagine di esempio.

Utilizzo con JQuery

Attraverso i selettori di JQuery è possibile selezionare con velocità gli elementi della pagina in cui Flashembed inietta il codice necessario alla visualizzazione del filmato Flash. La sintassi necessaria è quella familiare per chi utilizza questo framework:

$(selector).flashembed(configuration, flashvars);

Nella chiamata della funzione flashembed(), come possiamo vedere, è necessario omettere il primo argomento container, già passato da JQuery.

Molte volte è buona prassi rinviare l'inclusione dell'oggetto Flash (lazy loading), subordinandolo a un evento come ad esempio il click dell'utente. Questo rende il caricamento della pagina più veloce, soprattutto se il peso del file swf è grande: ecco un esempio. Tramite i selettori di JQuery è agevole anche l'inserimento di più filmati Flash nella stessa pagina: un altro esempio.

Conclusioni e download

Flashembed dispone anche di alcuni metodi statici e di semplici API (queste accessibili referenziando l'oggetto flashemebed instanziato): si tratta comunque di funzionalità marginali e ho lasciato al lettore la facoltà di approfondire l'argomento consultando la documentazione dello script.

Non da ultimo, Flashembed è perfettamente integrato nelle Api Javascript di Flowplayer, un eccellente player Flash per video in formato flv o mp4 e audio in formato mp3 che viene rilasciato con diverse licenze, tra cui una GPL open source. Flowplayer, ed il "concorrente" JWPlayer, saranno l'argomento del prossimo articolo, che ci guiderà alla scoperta dello streaming video.

Tutti gli esempi dell'articolo sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter