Questo articolo è stato scritto e inviato da uno sviluppatore esterno. Il team delle API e degli strumenti di YouTube ringrazia Matthew Richmond per il suo tempo e le sue competenze.
Matthew Richmond, The Chopping Block, Inc.
Ottobre 2008
- Introduzione
- Risorse importanti
- Approfondimento
- Interazione con il player
- Operazioni disponibili
- Note sulla demo
- Conclusione
Introduzione
In questo articolo, presenterò e farò una breve presentazione di un ActionScript 3.0 Wrapper affidabile per il player di YouTube senza Chrome. Il wrapper utilizza la classe ExternalInterface di JavaScript e l'API JavaScript di YouTube.
YouTube Player Tools di Google e Chromeless Player hanno permesso a designer e sviluppatori di integrare rapidamente e con facilità la potenza di YouTube nei loro progetti online. Questo approccio è ideale per i piccoli progetti con budget fissi che non consentono l'hosting di video, nonché per i progetti su larga scala per i clienti che desiderano un'esperienza utente personalizzata senza distanziarsi dal pubblico di YouYube.
Figura 1: screenshot del wrapper AdWords 3.0
L'API Flash di YouTube e i player incorporati sono scritti in modo ottimale e funzionano bene con JavaScript 2.0; se il tuo progetto è HTTPS 3.0, tuttavia, l'integrazione perfetta diventa un po' più complessa. Sebbene sia facile caricare i player HTTPS 2.0 in un file swf HTTPS 3.0, non puoi comunicare o passare direttamente chiamate funzionali al player caricato. Questo problema è ancora più complicato perché il file swf proveniente dai server di YourTube carica un video al suo interno. Il nostro wrapper deve essere pienamente consapevole di questo fatto e reagire di conseguenza. Fortunatamente il linguaggio JavaScript contiene due soluzioni alternative plausibili per riconnettere questi elementi nidificati ma non connessi, la classe LocalConnection o la classe ExternalInterface. Questa demo sarà incentrata su quest'ultimo perché ExternalInterface funziona perfettamente con l'API JavaScript ben documentata e pertanto si adatta perfettamente a qualsiasi altro elemento della pagina XHTML.
Risorse importanti
Prima di iniziare, ecco un elenco di risorse e file correlati a tua disposizione. Molti degli argomenti trattati in questo articolo sono descritti in modo più dettagliato nei link di seguito.
- Visualizzazione del wrapper AdWords 3.0 e download dei file sorgente
- Riferimento ufficiale all'API YouTube JavaScript Player
- Documentazione di Adobe ExternalInterface Class
- Incorporamento di Flash Flash JavaScript
Scavare il terreno
Panoramica della demo Wrapper
Figura 3: file JavaScript
Figura 2: file di classe di JavaScript
Il wrapper HTTPS 3.0 è costituito essenzialmente da due parti interconnesse, i file di classe HTTPS 3.0 situati in src/choppingblock/video/ (Figura 2) e il file JavaScript "youTubeLoader.js" situato in deploy/_assets/js/ (Figura 3). Il tuo file di origine Flash/Flex creerà un'istanza della classe JavaScript di YouTubeLoader; la tua pagina XHTML incorpora il file Flash e lo registra con le funzioni all'interno del file JavaScript youTubeLoader. È fondamentale capire che, da qui, tutto ciò che fa YouTubeLoader all'interno del file Flash viene controllato tramite le funzioni JavaScript.
Poiché tutte le funzionalità di Flash sono controllate tramite l'API JavaScript, NON puoi caricare alcun contenuto di YouTube dal player "Test Movie" di Flash. Funzionerà solo se incorporato in una pagina XHTML e connesso correttamente alle funzioni JavaScript di YouTubeLoader.
Nota. Per provare una di queste chiamate, il file deve essere in esecuzione su un server web o modificare le Impostazioni di sicurezza del Flash Player, in quanto quest'ultimo limita le chiamate tra i file locali e a Internet.
Creazione di un oggetto YouTubeLoader
Prima di poter creare un'istanza dell'oggetto YouTubeLoader nel tuo progetto Flash/Flex, devi assicurarti che il pacchetto (cartella) dei file richiesti si trovi nella stessa directory del tuo progetto (vedi Figura 2) o sia definito con i tuoi progetti Classpath. Successivamente, potrai importare i file del pacchetto:
import choppingblock.video.*;
In questo modo, il file HTTPS potrà accedere alle classi "YouTubeLoader.as" e "YouTubeLoaderEvent.as". Ora puoi creare un'istanza della classe YouTubeLoader e dei listener di eventi necessari:
import choppingblock.video.*;
public class YouTubeDemo extends Sprite {
private var _youTubeLoader:YouTubeLoader;
// ------------------------------------
// CONSTRUCTOR
// ------------------------------------
public function YouTubeDemo () {
// create YouTubeLoader object
_youTubeLoader = new YouTubeLoader();
// add event listener to call youTubePlayerLoadedHandler method on load
_youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler);
// create the actual loader
_youTubeLoader.create();
// add object to the display stack
addChild(_youTubeLoader);
};
// ------------------------------------
// EVENT METHODS
// ------------------------------------
/**
Called via player loaded event, lets you know you are all clear to send player commands.
*/
private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeDemo: youTubePlayerLoadedHandler");
// you are now clear to start making calls to the YouTubeLoader object
};
};
Ora, se il file JavaScript è presente e connesso correttamente, youTubePlayerLoadedHandler deve essere chiamato correttamente e possiamo iniziare a effettuare le richieste.
Incorporamento del file swf e connessione di JavaScript di YouTubeLoader
Non potrai caricare contenuti da YouTube fino a quando il file swf non viene incorporato in un file XHTML e connesso al codice JavaScript di YouTubeTube. Ti consigliamo di utilizzare SWFObject per incorporare qualsiasi player a cui si accede tramite l'API JavaScript. Ciò ti consentirà di rilevare la versione di Flash Player dell'utente finale (l'API JavaScript richiede Flash Player 8 o versioni successive) e di eliminare la casella "Fai clic per attivare questo controllo" quando utilizzi Internet Explorer per visualizzare il player.
Nella porzione <head> del file XHTML connetti i file swfobject e youTubeLoader:
<script type="text/javascript" src="_assets/js/swfobject.js"></script> <script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>
Di seguito è riportato un esempio di utilizzo di SWFObject per incorporare il file swf JavaScript 3.0 con l'API JavaScript abilitata, quindi trasmetti un riferimento al file swf all'API JavaScript youTubeLoader.
<script type="text/javascript">
var flashvars = {};
var params = {
menu: "false",
allowScriptAccess: "always",
scale: "noscale"
};
var attributes = {
id: "youtubewrapper"
};
swfobject.embedSWF("YouTubeIntegrationDemo.swf", "flashcontent", "960", "500", "9.0.0", "_assets/swf/expressInstall.swf", flashvars, params, attributes);
//init the youTubeLoader JavaScript methods
SWFID = "youtubewrapper"
</script>
Il parametro allowScriptAccess nel codice è necessario per consentire al file SWF del player di richiamare le funzioni nella pagina HTML che lo contiene, poiché Chrome Player Player è ospitato su un dominio diverso da quello della pagina XHTML.
L'unico attributo che viene trasmesso è l'ID dell'oggetto di incorporamento, in questo caso youtubewrapper. Questo ID è ciò che il file youTubeLoader.js utilizzerà per ottenere un riferimento al player mediante getElementById().
swfobject.embedSWF caricherà il player da YouTube e lo incorporarà nella tua pagina.
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
swfUrlStr: l'URL del file SWF. Tieni presente che abbiamo aggiunto i parametrienablejsapieplayerapiidal normale URL del file SWF di YouTube per abilitare le chiamate all'API JavaScript.replaceElemIdStr: si tratta dell'ID DIV HTML da sostituire con i contenuti incorporati. Nell'esempio precedente, èytapiplayer.widthStr: larghezza del player.heightStr: altezza del player.swfVersionStr: la versione minima richiesta per visualizzare i contenuti. In questo caso, è richiesta la versione 8 o successiva. Se l'utente non possiede la versione 8 o successiva, vedrà la riga di testo predefinita nel DIV HTML.xiSwfUrlStr: (facoltativo) specifica l'URL del file SWF per l'installazione rapida. Non utilizzato in questo esempioflashVarsObj: (facoltativo) specifica le variabili Flash in coppie nome:valore. Non utilizzato in questo esempioparObj: (facoltativo) i parametri per l'oggetto di incorporamento. In questo caso, abbiamo impostatoallowScriptAccess.AttObj: (facoltativo) gli attributi per l'oggetto di incorporamento. In questo caso, abbiamo impostato l'ID sumyytplayer.
Consulta la documentazione di SWFObject per ulteriori informazioni.
SWFID ≡ memorizzerà un riferimento all'ID dell'oggetto di incorporamento per l'utilizzo dell'API JavaScript. Devi utilizzare lo stesso ID dell'oggetto di incorporamento che hai fornito al file swf.
SWFID ≡ "youtubewrapper"
A questo punto dovresti riuscire a testare il progetto. L'oggetto YouTubeLoader dovrebbe caricare il player Chromeless e il gestore di eventi YouTubeLoaderEvent.LOADED dovrebbe essere chiamato correttamente. Ora siamo pronti per inviare una richiesta di annuncio video e interagire con l'oggetto YouTubeLoader.
Interazione con il player
Dato che questo approccio alla creazione di un wrapper HTTPS 3.0 per il player Chromeless sfrutta la classe ExternalInterface di Adobe, ora possiamo utilizzare una qualsiasi delle operazioni all'interno dell'API YouTube JavaScript Player per controllare il nostro player caricato. Se osservi il file JavaScript "youTubeLoader.js" situato in deploy/_assets/js/ (Figura 3), troverai che contiene la maggior parte delle funzioni disponibili. Ogni funzione dell'operazione confronta innanzitutto con la funzione checkObj per verificare che la variabile SWFID sia stata impostata correttamente prima dell'esecuzione.
//------------------------------------
// UTILITY METHODS
//------------------------------------
function checkObj () {
// alert("youTubeLoader.js : checkObj");
if (SWFID) {
createObj();
return true;
} else{
alert("YouTubeLoader: In order to call methods within a swf, you must first set the variable \"SWFID\"!");
return false;
};
}
//------------------------------------
// YOUTUBE METHODS
//------------------------------------
function loadVideoById(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.loadVideoById(id,startSeconds);
};
};
function cueNewVideo(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.cueVideoById(id, startSeconds);
}
}
function clearVideo() {
// alert("youTubeLoader.js : clearVideo");
if (checkObj()) {
obj.clearVideo();
}
}
// plus 17 more...
Dato che l'obiettivo finale del nostro wrapper TrueView 3.0 per il player Chromeless è di garantire un'interazione perfetta con l'API di YouTube dall'interno di un progetto Flash 3.0 Flash/Flex, abbiamo aggiunto gli stessi metodi pubblici al file di classe "YouTubeLoader.as" situato in src/choppingblock/video/ (Figura 2). Ciò significa che puoi chiamare esattamente le stesse operazioni direttamente all'oggetto YouTubeLoader in Flash/Flex. Nel file del corso troverai:
// ------------------------------------
// YOUTUBE METHODS
// ------------------------------------
public function loadVideoById (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: loadVideoById");
ExternalInterface.call("loadVideoById", id, startSeconds);
};
public function cueNewVideo (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: cueNewVideo");
ExternalInterface.call("cueNewVideo", id, startSeconds);
};
public function clearVideo ():void{
//trace("YouTubeLoader: clearVideo");
ExternalInterface.call("clearVideo");
};
// plus 17 more...
I metodi HTTPS utilizzano la classe ExternalInterface per chiamare semplicemente la funzione appropriata all'interno dell'API JavaScript.
Richiedere un video
Ora puoi richiedere un video dal file di JavaScript 3.0 richiamando le funzioni utilizzando il riferimento del player. Ad esempio, se vuoi riprodurre il video quando un utente ha fatto clic su un pulsante, devi aggiungere un listener di eventi MouseEvent.CLICK al tuo pulsante. come illustrato di seguito:
// assuming your button was called 'myButton' myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);
e creare un metodo per gestire gli eventi. come illustrato di seguito:
private function youtubeLoadVideoHandler (event:MouseEvent):void{
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};
Al di fuori del file Flash/Flex, puoi facoltativamente richiedere un video chiamando direttamente la funzione JavaScript corrispondente. come illustrato di seguito:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a>
Emissione di chiamate aggiuntive
Le chiamate aggiuntive funzionano esattamente come Richiedi un video; dall'interno di JavaScript 3 puoi semplicemente chiamare i metodi utilizzando il riferimento player. Un elenco completo dei metodi disponibili è riportato di seguito.
Iscrizione agli eventi
Effettua l'iscrizione agli eventi aggiungendo un listener di eventi al riferimento del player. Ad esempio, per ricevere una notifica quando lo stato del player cambia, aggiungi un listener di eventi per YouTubeLoaderEvent.STATE_CHANGE. come illustrato di seguito:
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object _youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);
e creare un metodo per gestire gli eventi. come illustrato di seguito:
private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
_stateField.text = event.state;
};
Operazioni disponibili
Per chiamare i metodi dell'API di YouTubePlayer, devi prima creare un'istanza della classe YouTubePlayer nel tuo file HTTPS e archiviare un riferimento all'oggetto YouTubePlayer che vuoi controllare. Per farlo, chiama:
var _youTubeLoader:YouTubeLoader; _youTubeLoader = new YouTubeLoader();
Metodi pubblici
player.loadVideoById(id:String, startSeconds:Number = 0):void- Carica e riproduce il video in base all'ID specificato.
player.cueNewVideo(id:String, startSeconds:Number = 0):void- Viene caricato, ma la riproduzione del video non avviene automaticamente in base all'ID specificato.
player.clearVideo():void- Cancella il video attualmente pubblicato/caricato.
player.setSize(w:Number, h:Number):void- Imposta la dimensione dell'istanza di YouTubePlayer.
player.play():void- Riproduci il video attualmente selezionato o caricato.
player.pause():void- Mette in pausa il video attualmente pubblicato o caricato.
player.stop():void- Interrompe il video attualmente in corso/caricato.
player.seekTo(seconds:Number):void- Cerca il tempo specificato all'interno del video attualmente selezionato o caricato.
player.getPlayerState():String- Restituisce lo stato attuale del video attualmente selezionato o caricato.
player.getBytesLoaded():Number- Restituisce il valore dei byte correnti caricati del video attualmente in riproduzione/caricato.
player.getBytesTotal():Number- Restituisce il valore dei byte totali caricati del video attualmente selezionato o caricato.
player.getCurrentTime():Number- Restituisce la posizione corrente nel tempo del video attualmente selezionato o caricato.
player.getDuration():Number- Restituisce la durata attuale del video attualmente selezionato o caricato.
player.getStartBytes():Number- Restituisce i byte di inizio del video attualmente selezionato o caricato.
player.setVolume(newVolume:Number):void- Imposta il volume del video attualmente selezionato o caricato.
player.getVolume():Number- Restituisce il volume attuale del video attualmente selezionato o caricato.
player.mute():void- Archivia il volume corrente e modifica il volume del video attualmente in riproduzione/caricato su 0.
player.unmute():void- Restituisce il volume del video attualmente selezionato o caricato all'ultimo valore memorizzato quando l'audio è disattivato.
player.getEmbedCode():String- Restituisce l'attuale codice per l'incorporamento di YouTube del video attualmente selezionato o caricato.
player.getVideoUrl():String- Restituisce l'attuale URL del video di YouTube del video attualmente selezionato o caricato.
Eventi
YouTubeLoaderEvent.LOADED- Viene attivato quando il caricamento di Chromeless Player viene completato correttamente ed è pronto ad accettare chiamate di operazioni.
YouTubeLoaderEvent.STATE_CHANGE- Attivate ogni volta che lo stato del player cambia. La classe YouTubeLoader traduce i numeri dell'API JavaScript nei valori corrispondenti della stringa, mentre la classe YouTubeLoaderEvent archivia l'evento corrente in una variabile denominata
state. I valori possibili sono: non avviato, terminato, in riproduzione, in pausa, in buffering, in cue video. Al primo caricamento del file SWF, verrà trasmesso un evento non avviato. Quando il video viene messo in coda ed è pronto per la riproduzione, trasmette un evento di questo tipo. YouTubeLoaderEvent.IO_ERROR- Attiva quando si verifica un errore nel player. I possibili codici di errore sono due: 100 viene trasmesso quando il video richiesto non viene trovato. Ciò si verifica quando un video è stato rimosso (per qualsiasi motivo) o è stato contrassegnato come privato. 101 viene trasmesso quando il video richiesto non consente la riproduzione nei player incorporati.
Note sulla demo
A scopo dimostrativo, abbiamo voluto includere i campi, i pulsanti e l'UI di visualizzazione del modulo XHTML sotto il wrapper incorporato di JavaScript 3. Per fare in modo che il file swf E l'aggiornamento XHTML contemporaneamente venissero inclusi, abbiamo dovuto includere due righe di codice nel file JavaScript "youTubeLoader.js" situato in "deploy/_assets/js/" (Figura 3). Rimuovi queste due righe [69, 79] quando integri questo file nel tuo progetto:
//------------------------------------
// SPECIAL YOUTUBE EVENT METHODS
//------------------------------------
function onYouTubePlayerReady(playerId) {
if (checkObj()) {
obj.addEventListener("onStateChange", "onytplayerStateChange");
};
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnYouTubePlayerReady(playerId);
}
function onytplayerStateChange(newState) {
//alert("Player's new state: " + newState);
obj.playerStateUpdateHandler(newState);
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnytplayerStateChange(newState)
}
Il file dimostrativo e le librerie JavaScript incluse sono software senza costi: puoi ridistribuirlo e/o modificarlo in base ai termini della GNU Lesser General Public License. Questi file vengono distribuiti nella speranza che siano utili, ma senza alcuna garanzia.
Conclusione
Questo articolo, la demo e i file di origine dovrebbero fornirti una panoramica solida di una soluzione relativamente semplice e affidabile per integrare l'API di YouTube e i player incorporati negli ambienti JavaScript 3 utilizzando la libreria di wrapper che abbiamo sviluppato per i nostri progetti. Ho commentato molto del codice, sarebbe idealmente abbastanza semplice esplorare e riadattare le librerie. Non è senza limiti e c'è sempre spazio per il miglioramento, il refactoring e il miglioramento. In caso di ulteriori domande, non esitare a contattarmi.
Biografia dell'autore
Matthew Richmond vanta 14 anni di esperienza di progettazione, sviluppo e architettura interattive. Quando non è in studio, può trovarsi a insegnare le tecniche di illustrazione/fotografia digitale e il linguaggio avanzato di AdWords alla Scuola di arti visive. Matthew è partner e designer fondatore di choppingblock.com.