Questo articolo è stato scritto e inviato da uno sviluppatore esterno. Il team delle API e degli strumenti di YouTube ringrazia Matthew Richmond per il tempo e le competenze.
Matthew Richmond, The Chopping Block, Inc.
Ottobre 2008
- Introduzione
- Risorse importanti
- Approfondimenti
- Interazione con il player
- Operazioni disponibili
- Note sulla demo
- Conclusione
Introduzione
In questo articolo presenterò e descriverò brevemente un wrapper ActionScript 3.0 affidabile per il player di YouTube senza Chrome. Il wrapper utilizza la classe ExternalInterface di JavaScript e l'API JavaScript di YouTube.
Gli strumenti del player di YouTube e il player senza Chrome di Google hanno consentito a designer/sviluppatori di integrare rapidamente e facilmente 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 e per i progetti su larga scala per i clienti che vogliono un'esperienza personalizzata per l'utente finale senza distanziarsi dal pubblico di YouTube.
Figura 1: screenshot del wrapper ActionScript 3.0
L'API Flash e i player incorporati di YouTube sono scritti in ActionScript 2.0 e funzionano piuttosto bene con questo linguaggio. Tuttavia, se il tuo progetto è in ActionScript 3.0, l'integrazione senza problemi diventa un po' più complessa. Sebbene sia facile caricare i player ActionScript 2.0 in un file SWF ActionScript 3.0, non puoi comunicare direttamente o passare chiamate funzionali al player caricato. Il problema è ancora più complesso perché il file SDF proveniente dai server di YourTube carica un video al suo interno. Il nostro wrapper deve esserne pienamente consapevole e reagire di conseguenza. Fortunatamente, il linguaggio JavaScript contiene due soluzioni plausibili per riconnettere questi elementi nidificati ma scollegati: la classe LocalConnection o la classe ExternalInterface. Questa demo si concentrerà su quest'ultima perché ExternalInterface funziona perfettamente con l'API JavaScript ben documentata e quindi è compatibile con qualsiasi altro elemento all'interno 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 più in dettaglio nei link riportati di seguito.
- Visualizza il wrapper JavaScript 3.0 e scarica i file sorgente
- Riferimento ufficiale per l'API JavaScript Player di YouTube
- Documentazione della classe Adobe ExternalInterface
- Incorporamento Flash JSONObject JavaScript
Approfondimento
Panoramica della demo del wrapper
Figura 3: file JavaScript
Figura 2: file di classe JavaScript
Il wrapper ActionScript 3.0 è costituito essenzialmente da due parti interconnesse: i file di classe ActionScript 3.0 che si trovano in src/choppingblock/video/ (Figura 2) e il file JavaScript "youTubeLoader.js" che si trova in deploy/_assets/js/ (Figura 3). Il file di origine Flash/Flex creerà un'istanza della classe ActionScript YouTubeLoader; la 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 è controllato attraverso le funzioni JavaScript.
Poiché tutte le funzionalità in Flash sono controllate tramite l'API JavaScript, NON potrai caricare contenuti di YouTube all'interno del "Testa filmato" di Flash un player. Funziona solo se incorporato in una pagina XHTML e collegato correttamente alle funzioni JavaScript di youTubeLoader.
Nota: per testare queste chiamate, il file deve essere in esecuzione su un server web o modificare le Impostazioni di sicurezza di Flash Player, poiché il Flash player limita le chiamate tra i file locali e internet.
Creazione di un oggetto YouTubeLoader
Prima di poter creare un'istanza dell'oggetto YouTubeLoader nel progetto Flash/Flex, devi assicurarti che il pacchetto (la cartella) dei file richiesti si trovi nella stessa directory del progetto (vedi Figura 2) o che sia definito con il percorso di classe del progetto. A questo punto puoi importare i file del pacchetto:
import choppingblock.video.*;
In questo modo, il file JavaScript può accedere al file "YouTubeLoader.as" e "YouTubeLoaderEvent.as" . Ora puoi creare un'istanza della classe YouTubeLoader e i 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 è installato e collegato correttamente, youTubePlayerLoadedHandler dovrebbe essere chiamato correttamente e siamo pronti per iniziare a effettuare richieste.
Incorporamento del file SDF e connessione del codice JavaScript YouTubeLoader
Non potrai caricare correttamente i contenuti di YouTube finché il file SWF non sarà incorporato in un file XHTML e collegato al codice JavaScript youTubeLoader. Ti consigliamo di utilizzare SWFObject per incorporare i player a cui verrà eseguito l'accesso utilizzando l'API JavaScript. In questo modo potrai rilevare la versione di Flash Player dell'utente finale (l'API JavaScript richiede Flash Player 8 o versioni successive) e rimuovere la casella "Fai clic per attivare questo controllo" quando utilizzi Internet Explorer per visualizzare il player.
All'interno della porzione <head> del file iframe, colleghi i file imgobject 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 d'uso di SWFObject per incorporare il tuo file SwfoneScript 3.0 con l'API JavaScript abilitata e quindi passare un riferimento al tuo file SDF all'API JavaScript di 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 player SWF di chiamare le funzioni nella pagina HTML contenente, poiché il player Chromeless è ospitato su un dominio diverso dalla pagina XHTML.
L'unico attributo che viene passato è l'ID dell'oggetto di incorporamento, in questo caso youtubewrapper. Questo ID è l'elemento che il file youTubeLoader.js utilizzerà per ottenere un riferimento al player mediante getElementById().
swfobject.embedSWF caricherà il player da YouTube e lo incorporerà 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 attivare le chiamate API JavaScript.replaceElemIdStr: l'ID DIV HTML da sostituire con i contenuti incorporati. Nell'esempio precedente, èytapiplayer.widthStr: la larghezza del player.heightStr: l'altezza del player.swfVersionStr: la versione minima richiesta per consentire all'utente di 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 di installazione rapida. Non utilizzato in questo esempioflashVarsObj- (Facoltativo) Specifica le tue variabili Flash nelle coppie nome:valore. Non utilizzato in questo esempioparObj- (Facoltativo) I parametri per l'oggetto embed. In questo caso abbiamo impostatoallowScriptAccess.AttObj- (Facoltativo) Gli attributi per l'oggetto embed. In questo caso, abbiamo impostato l'ID sumyytplayer.
Consulta la documentazione di SWFObject per ulteriori informazioni.
SWFID ≡ memorizza un riferimento all'ID dell'oggetto embed da utilizzare dall'API JavaScript. Devi utilizzare lo stesso ID dell'oggetto embed che hai assegnato al file SWF.
SWFID ≡ "youtubewrapper"
A questo punto dovresti essere in grado di testare correttamente il progetto. L'oggetto YouTubeLoader dovrebbe caricare il player Chromeless e il gestore di eventi YouTubeLoaderEvent.LOADED deve essere chiamato correttamente. Ora è tutto pronto per effettuare una richiesta di video e interagire con l'oggetto YouTubeLoader.
Interazione con il player
Poiché questo approccio alla creazione di un wrapper ActionScript 3.0 per il player senza Chrome sfrutta la classe ExternalInterface di ActionScript, ora possiamo utilizzare qualsiasi operazione all'interno dell'API YouTube JavaScript Player per controllare il player caricato. Se guardi all'interno del file "youTubeLoader.js" il file JavaScript situato in deploy/_assets/js/ (Figura 3) vedrai che contiene la maggior parte delle funzioni disponibili. Ogni funzione di operazione esegue prima un controllo rispetto alla 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...
Poiché lo scopo finale del nostro wrapper ActionScript 3.0 per il player senza Chrome è offrire un'interazione perfetta con l'API YouTube da un progetto Flash/Flex ActionScript 3.0, abbiamo aggiunto gli stessi metodi pubblici esatti al file della classe "YouTubeLoader.as" in src/choppingblock/video/ (Figura 2). Ciò significa che puoi richiamare le stesse stesse operazioni direttamente sull'oggetto YouTubeLoader all'interno di Flash/Flex. Se guardi all'interno del 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 JavaScript utilizzano la classe ExternalInterface per chiamare semplicemente la funzione appropriata all'interno dell'API JavaScript.
Richiesta di un video
Ora puoi richiedere un video all'interno del file ActionScript 3.0 chiamando le funzioni utilizzando il riferimento al player. Ad esempio, se desideri riprodurre il video quando un utente fa clic su un pulsante, puoi aggiungere al pulsante un listener di eventi MouseEvent.CLICK. Esempio:
// assuming your button was called 'myButton' myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);
Crea anche un metodo di gestore eventi per gestire la richiesta. Esempio:
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 richiedere un video richiamando direttamente la funzione JavaScript corrispondente. Esempio:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a> Emissione di chiamate aggiuntive
Le chiamate aggiuntive funzionano esattamente come le richieste di video. da Campaign Manager 3 è possibile semplicemente richiamare i metodi utilizzando il riferimento del player. Un elenco completo dei metodi disponibili è fornito 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. Esempio:
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object _youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);
Creare un metodo di gestore di eventi per gestire la richiesta. Esempio:
private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
_stateField.text = event.state;
};
Operazioni disponibili
Per chiamare i metodi dell'API YouTubePlayer, devi prima creare un'istanza della classe YouTubePlayer all'interno del tuo file JavaScript e archiviare un riferimento all'oggetto YouTubePlayer che desideri controllare. Per farlo, puoi chiamare:
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- Carica, ma non riproduce automaticamente il video in base all'ID specificato.
player.clearVideo():void- Cancella il video attualmente in coda/caricato.
player.setSize(w:Number, h:Number):void- Imposta le dimensioni dell'istanza YouTubePlayer.
player.play():void- Riproduce il video attualmente messo in coda/caricato.
player.pause():void- Consente di mettere in pausa il video attualmente in coda/caricato.
player.stop():void- Interrompe il video attualmente in riproduzione/caricamento.
player.seekTo(seconds:Number):void- Va al momento specificato nel video attualmente in riproduzione/caricamento.
player.getPlayerState():String- Restituisce lo stato corrente del video attualmente agganciato/caricato.
player.getBytesLoaded():Number- Restituisce il valore dei byte attualmente caricati del video attualmente agganciato/caricato.
player.getBytesTotal():Number- Restituisce il valore dei byte totali caricati del video attualmente a cui si fa riferimento/caricato.
player.getCurrentTime():Number- Restituisci la posizione corrente nel tempo del video attualmente in coda/caricato.
player.getDuration():Number- Restituisci la durata corrente del video attualmente in coda/caricato.
player.getStartBytes():Number- Restituisce i byte iniziali del video attualmente agganciato/caricato.
player.setVolume(newVolume:Number):void- Imposta il volume del video attualmente in coda/caricato.
player.getVolume():Number- Restituisce il volume corrente del video attualmente agganciato/caricato.
player.mute():void- Memorizza il volume corrente e imposta il volume del video attualmente in coda/caricato su 0.
player.unmute():void- Se l'audio del video è disattivato, restituisce il volume del video attualmente in coda/caricato all'ultimo valore memorizzato.
player.getEmbedCode():String- Restituisce il codice di incorporamento di YouTube corrente del video attualmente selezionato/caricato.
player.getVideoUrl():String- Restituisci l'URL del video di YouTube corrente del video attualmente messo in coda/caricato.
Eventi
YouTubeLoaderEvent.LOADED- Viene attivato quando il player Chromeless ha completato il caricamento ed è pronto ad accettare le chiamate operative.
YouTubeLoaderEvent.STATE_CHANGE- Si attiva ogni volta che cambia lo stato del player. La classe YouTubeLoader traduce i numeri dell'API JavaScript nei relativi valori di stringa, mentre la classe YouTubeLoaderEvent memorizza l'evento corrente in una variabile denominata
state. I valori possibili sono unstarted, terminate, Playing, paused, buffering, video cued. Al primo caricamento del file SWF, verrà trasmesso un evento non iniziato. Quando il video è agganciato e pronto per la riproduzione, viene trasmesso un evento Video agganciato. YouTubeLoaderEvent.IO_ERROR- Viene attivato quando si verifica un errore nel player. Sono possibili due codici di errore: 100 viene trasmesso quando il video richiesto non viene trovato. Questo accade quando un video è stato rimosso (per qualsiasi motivo) o è stato contrassegnato come privato. Il codice 101 viene trasmesso quando il video richiesto non consente la riproduzione nei player incorporati.
Note sulla demo
A scopo dimostrativo, abbiamo deciso di includere i campi del modulo HTML, i pulsanti e l'interfaccia utente di visualizzazione sotto il wrapper JavaScript 3 incorporato. Per fare in modo che il file SDF E l'XHTML vengano aggiornati contemporaneamente, abbiamo dovuto includere due righe di codice nel file "youTubeLoader.js" File JavaScript situato in "deploy/_assets/js/" (Figura 3). Quando integri questo file nel progetto, devi rimuovere le due righe [69, 79] seguenti:
//------------------------------------
// 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 demo e le librerie ActionScript incluse sono software libero: puoi ridistribuirli e/o modificarli ai sensi della GNU Lesser General Public License. Questi file vengono distribuiti con la speranza che siano utili, ma senza alcuna garanzia.
Conclusione
L'articolo relativo ai demo e ai file sorgente dovrebbe fornirti una panoramica completa di una soluzione relativamente semplice e affidabile per integrare l'API di YouTube e i player incorporati negli ambienti di Vertex AI mediante la libreria di wrapper che abbiamo sviluppato per i nostri progetti. Dato che ho commentato gran parte del codice, in teoria dovrebbe essere abbastanza semplice esplorare e riutilizzare le librerie. Non è senza limitazioni e c'è sempre margine di miglioramento, refactoring e miglioramento. Se hai domande in merito, non esitare a contattarmi.
Biografia dell'autore
Matthew Richmond vanta 14 anni di esperienza in design, sviluppo e architettura interattivi. Quando non si trova in studio, lo si può ritrovare a insegnare tecniche di illustrazione/fotografia digitale e a usare codice avanzato con la School of Visual Arts. Matthew è socio fondatore e designer di choppingblock.com.