Share
Durante questo tutorial daremo un'occhiata all'utilizzo dell'API di YouTube per creare un player YouTube personalizzato con ActionScript 3.0.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Ecco come funzionerà:
Per questo avremo bisogno dei seguenti file:
Apri Main.fla e modifica il livello per renderlo 500x440 con 30 fotogrammi al secondo. Imposta la classe del documento su "Principale".
Abbiamo solo bisogno di due livelli per questo tutorial: il titolare del giocatore, che verrà popolato dal nostro player di YouTube e dal livello di controlli, che avrà tutti i pulsanti utilizzati per controllare il giocatore. In questo caso avremo un "play / pause" a "silenziamento / riattivazione" di una barra di avanzamento (rappresenta la quantità caricata) e una barra di riempimento (rappresenta il tempo di riproduzione).
Ho aggiunto una serie di altri frame solo per l'aspetto grafico, non ne hai davvero bisogno.
Questi sono semplici simboli MovieClip con i nomi di istanza "play_mc" e "mute_mc", "progress_mc" e "fullness_mc".
Il giocatore è anche una semplice forma nera convertita in un Movie Clip con il nome di istanza "holder_mc".
Apri YoutubePlayer.as e crea una classe base scheletro che estende una classe MovieClip
pacchetto classe pubblica YoutubePlayer estende MovieClip funzione pubblica YoutubePlayer ()
Dobbiamo importare le seguenti classi:
import flash.display.MovieClip; import flash.display.Loader; import flash.events.Event; import flash.system.Security; import flash.net.URLRequest;
... e quindi impostare le seguenti variabili (tutto il codice nei prossimi passi è commentato):
var player: Object; // l'oggetto che avrà il player caricato su var loader: Loader; // il loader che caricherà il player var id: String; // id del video player playerStatus: String; // restituisce allo stato attuale dei giocatori var progressRatio: Number; // restituisce la differenza di rapporto tra i byte caricati e i byte totali, da 0 a 1, (utile per la barra di avanzamento) var fullnessRatio: Number; // restituisce la differenza di rapporto tra l'indicatore di riproduzione e i secondi totali, da 0 a 1, (utile per la barra di riempimento) var ismuted: Boolean; // restituisce true se il player è disattivato
Una volta istanziato, è necessario che l'ID del video sia passato alla funzione YoutubePlayer ():
Accentsconagua
funzione pubblica YoutubePlayer ($ id: String) Security.allowDomain ("www.youtube.com"); // consente l'accesso da youtube id = $ id // imposta l'id loader = new Loader (); // istanzia il caricatore loader.contentLoaderInfo.addEventListener (Event.INIT, onLoaderInit); // Dopo il caricamento, chiama onLoaderInit loader.load (new URLRequest ("http://www.youtube.com/apiplayer?version=3")); // avvia il processo di caricamento Ecco la funzione onLoaderInit (), chiamata dopo l'istanziazione del loader (vedere il precedente blocco di codice).
funzione privata onLoaderInit (event: Event): void addChild (loader); // aggiunge il loader allo stage loader.content.addEventListener ("onReady", onPlayerReady); // chiamato quando il player è pronto loader.content.addEventListener ("onError", onPlayerError); // chiamato quando il giocatore ha errori loader.content.addEventListener ("onStateChange", onPlayerStateChange); // chiamato quando lo stato di riproduzione è cambiato Se tutto è andato bene, finora, la funzione onPlayerReady () è chiamata:
funzione privata onPlayerReady (evento: Evento): void player = loader.content; // imposta il giocatore player.setSize (400, 225); // imposta la dimensione di visualizzazione player.loadVideoById (id) // carica il video tramite id addEventListener (Event.ENTER_FRAME, updatePlayer); // aggiorna il lettore
Queste tracce sono utili per il debug:
funzione privata onPlayerError (event: Event): void trace ("player error:", Object (event) .data); // Avrei potuto usarlo per aggiornare la variabile playerStatus ma volevo mostrarvi un altro metodo di funzione privata onPlayerStateChange (event: Event): void trace ("player status:", Object (event) .data); Questi sono i wrapper per il controllo esterno:
public function playVideo () player.playVideo () public function pauseVideo () player.pauseVideo () public function stopVideo () player.stopVideo () public function muteVideo () player.mute () public function unmuteVideo () player.unMute ()
Solo un'ultima funzione e la lezione è fatta:
public function updatePlayer (e) ismuted = player.isMuted () // restituisce true se silenziato // imposta il rapporto di avanzamento progressRatio = player.getVideoBytesLoaded () / player.getVideoBytesTotal () // imposta il rapporto di pienezza fullnessRatio = player.getCurrentTime () /player.getDuration () // imposta il playerStatus per l'uso esterno switch (player.getPlayerState ()) case -1: playerStatus = "nonstarted" break; caso 0: playerStatus = interruzione "terminata"; caso 1: playerStatus = "riproduzione" interruzione; caso 2: playerStatus = pausa "in pausa";
Spero che tu sappia già come creare una classe di documenti di base (anche se in caso contrario, guarda questa breve introduzione). All'interno, importa queste classi:
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import YouTubePlayer;
Ecco la nostra funzione Main ().
funzione pubblica Main () addEventListener (Event.ADDED_TO_STAGE, init); // impedisce alle chiamate di essere messe in scena prima che sia pronta
Una domanda che potresti chiederti è: "Come faccio a sapere l'ID del video?"
È molto semplice: prendi l'URL del film che stai cercando "http://www.youtube.com/watch?v=fJGLAo_7F_I", ad esempio; l'id video è il numero di 11 cifre trasportato dalla v var - in questo caso "fJGLAo_7F_I".
funzione privata init (e) removeEventListener (Event.ADDED_TO_STAGE, init); // rimuove il precedente listener youtubeplayer = new YoutubePlayer ("txqiwrbYGrs"); // istanzia il lettore con questo ID video // imposta i pulsanti play_mc.buttonMode = mute_mc.buttonMode = true; play_mc.addEventListener (MouseEvent.CLICK, playPausePlayer); mute_mc.addEventListener (MouseEvent.CLICK, muteUnmutePlayer); holder_mc.addChild (youtubeplayer) // aggiunge il giocatore al titolare del lettore // ripristina la pienezza e lo stato di avanzamento fullness_mc.width = 1 progress_mc.width = 1 // aggiorna la pienezza e il progresso addEventListener (Event.ENTER_FRAME, loop); Ecco la funzione del nostro semplice pulsante che utilizza "playerStatus" per alternare tra riproduzione e pausa:
private function playPausePlayer (e) if (youtubeplayer.playerStatus == "playing") youtubeplayer.pauseVideo (); else youtubeplayer.playVideo ();
Allo stesso modo, ecco la funzione per il nostro pulsante che utilizza "ismuted" per alternare tra mute e unmute:
funzione privata muteUnmutePlayer (e) if (youtubeplayer.ismuted) youtubeplayer.unmuteVideo (); else youtubeplayer.muteVideo ();
Scopriamo come stanno andando i progressi del film ...
// moltiplicare il rapporto per la larghezza totale delle barre ci darà la lunghezza desiderata poiché il rapporto va da 0 a 1 ciclo di funzioni private (e) fullness_mc.width = youtubeplayer.fullnessRatio * 350 progress_mc.width = youtubeplayer.progressRatio * 350
Come puoi vedere, è abbastanza semplice creare un player di youtube di base in AS3, assicurati di controllare il riferimento dell'API Player per un elenco di funzioni e parametri che puoi utilizzare per estendere questo.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
