Using YouTube Player API med Actionscript 3.0
Del
Del
Del
Del
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Selv om flere og flere av oss utvikler med AS3, bestemte teknologier forbli i AS2. Dette tvinger oss til å finne raske, enkle måter å bruke disse teknologiene i våre prosjekter. En slik teknologi er YouTube.
Den nåværende YouTube-spilleren er fortsatt i AS2 og før det er oppdatert til AS3, må vi lage en wrapper for å tillate oss å laste videoer i våre prosjekter. Husk, stjele FLV fôret er mot YouTubes vilkår, så la oss gjøre det på den riktige måten å bruke forkrommede eller chromeless spiller.
Det kan ikke ser ut som mye, men det du har er det YouTube-spilleren (forkrommet og chromless) lastet inn en AS3 søknad.
Før vi begynner ...
Dette er en tutorial for middels til avanserte Actionscripters (men ikke bli skremt hvis du er verken, det er ingen tid som i dag å starte læring) som vi kommer til å bruke både AS2 og AS3. Det er verdt å ha en rask lese av punktene nedenfor:
Det er verdt å sjekke ut dokumentasjon av YouTube Player API. Den er tilgjengelig på Google Code og den har en god forklaring på hvordan du bruker Player API og har eksempler på AS2 og AS3 implementering også.
Denne opplæringen kommer til å vise hvordan du kan bygge et sett av komponenter som du kan bruke med AS3 prosjekter i fremtiden. Dette er mye mer praktisk enn bare viser deg hvordan du kan få spilleren inn i et program og deretter forlate deg til det.
Trinn 1 - The Plan
Den måten vi kommer til å få dette til å fungere er ved å lage en SWF bygget med AS2 som vil laste i spilleren. Vi vil deretter lage et sett med AS3 klasser som vil tillate oss å bruke koden som enkle komponenter vi kan legge inn i våre programmer. En ulempe med å måtte bruke en wrapper er at så vel som importerer de klassene vi skal gjøre i AS3, vil vi også må ta med i SWF wrapper slik at vi kan legge det gjennom våre klasser.
Trinn 2 - Starte Wrapper
Det første vi må gjøre er å lage vår AS2 wrapper. Jeg skal vise deg hvordan du bygger den wrapper ved hjelp av en klasse, betyr dette at du enten kan kompilere den ved hjelp av Flash IDE eller MTASC. Så åpne opp din favoritt Actionscript to redaktør og la oss begynne å skrive AS2 klassen. Vi kommer til å begynne med å lage en YouTube Player klasse som vi vil da bruke i vår wrapper, så lage en ny fil som heter YouTubePlayer.as Hotell og begynne med å legge en enkel klasse:
klasse YouTubePlayer {offentlig funksjon YouTubePlayer () {}}
Planen her er å ha en klasse som tillater oss å bare laste inn en YouTube-spiller deretter enkelt få tilgang til og endre visse egenskaper som auto play, HD /HQ og så videre. I tillegg vil vi bruke vår klasse til å stoppe og ødelegge spilleren når vi er klar til å laste inn en annen. Første vi gjør er å lage noen offentlige vars som vil tillate oss å konfigurere spilleren:
klasse YouTubePlayer {public Var autoplay: Boolean = true; offentlig Var chromeless: Boolean = false; offentlige Var pars: String = 'autoplay = 0 & sløyfe = 0 & rel = 0 & showsearch = 0 & hd = 1'; offentlig Var playerWidth: Nummer = 425; offentlig Var playerHeight: Nummer = 344; offentlig funksjon YouTubePlayer () {}}
Trinn 3 - Håndtering Sandkasse og Security feil
Siden vi kommer til å bli lasting i en SWF fra YouTube, må vi sørge for at våre SWF lar YouTube Spiller SWF å få tilgang til visse egenskaper innenfor vår wrapper. For å gjøre dette, bruker vi en funksjon som heter System.security.allowDomain ()
innenfor vår konstruktør:
klasse YouTubePlayer {public Var autoplay: Boolean = true; offentlig Var chromeless: Boolean = false; offentlige Var pars: String = 'autoplay = 0 & sløyfe = 0 & rel = 0 & showsearch = 0 & hd = 1'; offentlig Var playerWidth: Nummer = 425; offentlig Var playerHeight: Nummer = 344; offentlig funksjon YouTubePlayer () {System.security.allowDomain ('www.youtube.com'); System.security.allowDomain ('youtube.com'); System.security.allowDomain ('s.ytimg.com'); System.security.allowDomain ('i.ytimg.com'); }}
Trinn 4 - Forbereder Fyll Player
I AS2 vi kan bare opprette visningsobjekter ved å legge dem på scenen. Vi vil også endre vår konstruktør og legge til en ny privat Var som vil tillate oss å passere i et filmklipp som forelder der vil vi laster spilleren:
klasse YouTubePlayer {public Var autoplay: Boolean = true; offentlig Var chromeless: Boolean = false; offentlige Var pars: String = 'autoplay = 0 & sløyfe = 0 & rel = 0 & showsearch = 0 & hd = 1'; offentlig Var playerWidth: Nummer = 425; offentlig Var playerHeight: Nummer = 344; private Var forelder: MovieClip; offentlig funksjon YouTubePlayer (forelder: MovieClip) {System.security.allowDomain ('www.youtube.com'); System.security.allowDomain ('youtube.com'); System.security.allowDomain ('s.ytimg.com'); System.security.allowDomain ('i.ytimg.com'); this.parent = forelder; }}
Nå må vi lage en ny privat Var for et filmklipp loader og lage en ny instans av MovieClipLoader ()
klasse; Vi skal bruke dette til å laste YouTube-spilleren. Vi legger også til en ny privat Var kalt spiller
da dette vil være vår referanse til YouTube-spiller, en privat Var heter videoId
, en privat Var heter removePlayer
, en offentlig Var heter addEventListener
, en privat Var heter dispatchEvent Hotell og annen privat Var kalt intervaller
som vil initialisert som en ny matrise:
klasse YouTubePlayer {public Var autoplay: Boolean = true; offentlig Var chromeless: Boolean = false; offentlige Var pars: String = 'autoplay = 0 & sløyfe = 0 & rel = 0 & showsearch = 0 & hd = 1'; offentlig Var playerWidth: Nummer = 425; offentlig Var playerHeight: Nummer = 344; offentlig Var addEventListener: Function; private Var intervaller: Array = []; private Var forelder: MovieClip; private Var loader: MovieClipLoader; private Var spiller: MovieClip; private Var videoId: String; private Var removePlayer: Boolean; private Var dispatchEvent: Function; offentlig funksjon YouTubePlayer (forelder: MovieClip) {System.security.allowDomain ('www.youtube.com'); System.security.allowDomain ('youtube.com'); System.security.allowDomain ('s.ytimg.com'); System.security.allowDomain ('i.ytimg.com'); this.parent = forelder; loader = new MovieClipLoader (); }}
Så nå er vi klar til å begynne å bygge vår funksjon som vi skal bruke til å laste inn en YouTube-video. Vi vil passere i en streng som skal inneholde YouTube video ID
Trinn 5 -. Opprette Initialiserer Function
La oss lage en ny funksjon kalt init ()
. Denne funksjonen vil godta en parameter: YouTube videoen Id:
offentlig funksjon init (videoId: String): void {this.videoId = videoId; if (spiller) {removePlayer = true; if (player.getPlayerState () = 1) {//destroyPlayer (); } Else {player.stopVideo (); }} Else {loadVideo (); }}
Så det første vi gjør i denne funksjonen er lagre videoen id i vår klasse variabel. Siden denne klassen vil være håndtering etablering og ødelegge for spilleren må vi sjekke om spilleren finnes allerede før du oppretter. Hvis den ikke finnes, sjekker vi om det er å spille (dvs. spilleren vil ha en tilstand av 1); hvis det er, forteller vi det til å stoppe; ellers ødelegger vi spilleren. Vi setter vår klasse Var removePlayer
å true, da dette vil bli brukt senere i vår klasse
Trinn 6 -. Laster spilleren
Vi starter opp med lasting i spilleren, så gå inn å ødelegge den. La oss lage en funksjon som heter loadVideo () Bilde:
privat funksjon loadVideo (): void {var url: String = (chromeless 'http://www.youtube.com/apiplayer': 'http : //www.youtube.com/v/'+ videoId +' & '+ pars); player = parent.createEmptyMovieClip ('Player' + (new Date () getTime ()), parent.getNextHighestDepth ().); parent._visible = false; loader.addListener ({onLoadInit: loadInit ()}); loader.unloadClip (spiller); loader.loadClip (url, spiller); }
Det første vi gjør er å finne ut om vi legger i forkrommet eller chromless spiller, bruker vi public class Var chromeless å avgjøre dette. Vi deretter opprette en ny filmklipp i vårt forelder som vi skal bruke til å sette spilleren inn. AS2 noen ganger har problemer med å lage filmklipp når de nettopp har blitt fjernet (dette filmklipp vil bli fjernet før en annen spiller kan lastes), så jeg bruker et lite triks som legger et tidsstempel til navnet på filmklipp så Flash doesn 't klage. Jeg deretter skjule forelder som vi forbereder å laste spilleren.
Vi trenger nå å initialisere loader, legger vi en lytter til det, fjerne enhver henvisning til at lasteren har til vår spiller (hvis vi allerede hadde opprettet det), og så får vi lasteren å laste YouTube-spilleren inn i vår spiller filmklipp.
Vi skal nå lage vår loadInit ()
funksjon som vil bli oppsagt når SWF har vært lastet og er klar:
privat funksjon loadInit (): void {intervals.push (setInterval (Delegate.create (dette, checkPlayerLoaded), 500)); }
En skjønnhet AS3 er at de fleste klasser og komponenter har muligheten til å sende hendelser, kan du legge hendelsen lyttere til den klassen. Men i AS2 dette var ikke så populært. De samme står med YouTube-spilleren, så derfor må vi kjøre en funksjon i intervaller slik at vi kan sjekke når YouTube-spilleren er klar.
Du vil merke at jeg har brukt en funksjon som heter Delegate.create ()
. Du må importere dette fra mx.utils.Delegate og det er ganske viktig. Representant klassen kan du laste inn en funksjon som er innenfor et visst omfang. Du ser i AS2 når du skyter en funksjon (for eksempel gjennom en timeout, intervall eller onRelease) det er avfyrt fra omfanget av den som ringer. Hvis et filmklipp har en onRelease funksjon og innen den funksjon de kaller en annen funksjon, vil AS2 ikke lete etter den funksjonen i klassen, snarere innenfor filmklipp. Du må derfor bruke en delegat til å fortelle AS2 hvor du skal lete for denne funksjonen. . Fun
Vi har nå opprette funksjonen checkPlayerLoaded ()
som vil sjekke om YouTube-spilleren er klar:
privat funksjon checkPlayerLoaded (): void {if (player.isPlayerLoaded ()) {if (chromeless) {player.loadVideoById (videoId); } Player.addEventListener ('onStateChange', Delegate.create (dette, onPlayerStateChanged)); player.addEventListener ('onError', Delegate.create (dette, onPlayerError)); resizePlayer (playerWidth, playerHeight); parent._visible = true; for (var i: Antall = 0, jeg < intervals.length; i ++) {clearInterval (intervaller [i]); } OnPlayerReady (); }}
Det første vi gjør er å sjekke at spilleren er lastet. Vi bruker YouTube Player isPlayerLoaded ()
å sjekke om spilleren er klar. Hvis det ikke er det, vil intervallet bare kjøre denne funksjonen igjen før spilleren er klar. Når det er det, vi for å se om vi har lastet den chromeless spiller og hvis vi har, bruker vi funksjonen loadVideoById ()
å laste videoen som chromeless spiller har noen flere funksjoner.
Vi deretter tildele noen hendelsen lyttere til spilleren som vi ønsker å vite om det er noen feil, og hvis spillerens tilstand er endret. Vi deretter endre størrelsen på spilleren til vår ønsket høyde og bredde, så viser den overordnede, og deretter fjerne alle mellomrom og til slutt kjøre en funksjon som erklærer vår spiller er klar.
Så arbeider ned, vil vi først opprette tilstandsendring lytteren funksjon onPlayerStateChanged () Bilde:
privat funksjon onPlayerStateChanged (state: Number): void {switch (stat) {case 0: //endte if (removePlayer) {//destroyPlayer (); }\t\t\t\tgå i stykker; case 1: //spille break; case 2: //pauset break; case 3: //buffering pause; case 4: //fudge vet bryte; case 5: //video kø break; }}
Nå er neste tilstand av klassen vår avhenger av om du liker å kode. Siden denne funksjonen lytter til staten av spilleren, kan noen bare ønsker å lytte til de som er viktige for dem, og skape funksjoner knyttet til staten. Andre, som meg, vil sende hendelser, noe som gjør dette til en svært nyttig komponent. Vi må gjøre noen endringer i klassen nå og importere EventDispatcher klasse ved å importere det fra 'mx.events.EventDispatcher'. Vi må også legge til 'EventDispatcher.initialize (denne)' til konstruktøren, slik at klassen skal se slik ut:
import mx.events.EventDispatcher; import mx.utils.Delegate; klasse YouTubePlayer {public Var autoplay: Boolean = true; offentlig Var chromeless: Boolean = false; offentlige Var pars: String = 'autoplay = 0 & sløyfe = 0 & rel = 0 & showsearch = 0 & hd = 1'; offentlig Var playerWidth: Nummer = 425; offentlig Var playerHeight: Nummer = 344; offentlig Var addEventListener: Function; private Var intervaller: Array = []; private Var forelder: MovieClip; private Var loader: MovieClipLoader; private Var spiller: MovieClip; private Var videoId: String; private Var removePlayer: Boolean; private Var dispatchEvent: Function; offentlig funksjon YouTubePlayer (forelder: MovieClip) {EventDispatcher.initialize (denne); System.security.allowDomain ('*'); System.security.allowDomain ('www.youtube.com'); System.security.allowDomain ('youtube.com'); System.security.allowDomain ('s.ytimg.com'); System.security.allowDomain ('i.ytimg.com'); this.parent = forelder; loader = new MovieClipLoader (); } Offentlig funksjon init (videoId: String): void {this.videoId = videoId; if (spiller) {removePlayer = true; if (player.getPlayerState () = 1) {//destroyPlayer (); } Else {player.stopVideo (); }} Else {loadVideo (); }} Privat funksjon loadVideo (): void {var url: String = (chromeless 'http://www.youtube.com/apiplayer': 'http://www.youtube.com/v/' + videoId + ' & '+ pars); player = parent.createEmptyMovieClip ('Player' + (new Date () getTime ()), parent.getNextHighestDepth ().); parent._visible = false; loader.addListener ({onLoadInit: loadInit ()}); loader.unloadClip (spiller); loader.loadClip (url, spiller); } Private funksjon loadInit (): void {intervals.push (setInterval (Delegate.create (dette, checkPlayerLoaded), 500)); } Private funksjon checkPlayerLoaded (): void {if (player.isPlayerLoaded ()) {if (chromeless) {player.loadVideoById (videoId); } Player.addEventListener ('onStateChange', Delegate.create (dette, onPlayerStateChanged)); player.addEventListener ('onError', Delegate.create (dette, onPlayerError)); resizePlayer (playerWidth, playerHeight); parent._visible = true; for (var i: Antall = 0, jeg < intervals.length; i ++) {clearInterval (intervaller [i]); } OnPlayerReady (); }} Privat funksjon onPlayerStateChanged (state: Number): void {switch (stat) {case 0: //endte if (removePlayer) {//destroyPlayer (); }\t\t\t\t\tgå i stykker; case 1: //spille break; case 2: //pauset break; case 3: //buffering pause; case 5: //video kø break; }}}
Nå er vi klar til å lage noen hendelser
Trinn 7 -. Takle Events (i AS2)
Siden vi prøver å gjøre denne koden som "hyggelig "som mulig, er det fornuftig å lagre våre arrangementer som statiske strenger i en klasse i stedet for å skrive dem for hånd. Opprett en ny fil som heter YouTubePlayerEvents.as Hotell og bruker følgende kode for det:
klasse YouTubePlayerEvent {public static Var STATE_CHANGED: String = 'onStateChange'; public static Var FEIL: String = 'onError'; public static Var PLAYER_PLAYING: String = 'playerPlaying'; public static Var PLAYER_ENDED: String = 'playerEnded'; public static Var PLAYER_PAUSED: String = 'playerPaused'; public static Var PLAYER_QUEUED: String = 'playerQueued'; public static Var PLAYER_BUFFERING: String = 'playerBuffering'; public static Var PLAYER_NOT_STARTED: String = 'playerNotStarted'; offentlig Var Type: String; offentlig funksjon YouTubePlayerEvent (type: String) {this.type = type; }}
Nå som vi har alle spillernes hendelser i en klasse, er det første vi bør gjøre oppdateringen vår checkPlayerLoaded ()
funksjonskode:
player.addEventListener (YouTubePlayerEvent.STATE_CHANGED, Deleger .create (dette, onPlayerStateChanged)); player.addEventListener (YouTubePlayerEvent.ERROR, Delegate.create (dette, onPlayerError));
Nå må vi sende hendelser hver gang spillerens tilstand er endret eller om det er en feil, så vi oppdaterer onPlayerStateChanged ()
:
privat funksjon onPlayerStateChanged (state: Number): void {switch (stat) {case 0: //endte if (removePlayer) {//destroyPlayer (); } DispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_ENDED)); gå i stykker; case 1: //spille dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_PLAYING)); gå i stykker; case 2: //pauset dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_PAUSED)); gå i stykker; case 3: //buffering dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_BUFFERING)); gå i stykker; case 5: //video kø dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_QUEUED)); gå i stykker; }}
Før vi avslutter, må vi legge til onPlayerError ()
funksjon og få den til å sende en hendelse:
privat funksjon onPlayerError (): void {dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent. ERROR)); }
Trinn 8 - Endring av størrelsen på spilleren
Nå skal vi skape den funksjonen som håndterer nedskalering av vår spiller. Dette er nyttig fordi fra tid til deg, må du endre størrelsen på spilleren, så lage en resizePlayer () Hotell og setter følgende innsiden:
offentlig funksjon resizePlayer (bredde: Number, høyde: Antall ): Void {if (player.isPlayerLoaded ()) {player.setSize (bredde, høyde); }}
Vi skaper denne funksjonen og sørge for at det er offentlig tilgjengelige. Dette er fordi, igjen, kan du opprette et prosjekt som krever spillerens størrelse skal endres mens den spilles av eller uten å laste en annen video. Igjen, vi bruker YouTube Player API-funksjon som tillater oss å endre størrelsen på spilleren ved å ringe setSize ()
Trinn 9 -. Nå spillerens Ready
Nå får vi på til vårt endelige etableringen funksjon som er onPlayerReady ()
. Denne funksjonen vil bare sjekke for å se om vi ønsker vår spiller å spilles av automatisk, og hvis den gjør det, begynne å spille. Du vil merke at du kan passere en variabel 'autoplay "når du laster spilleren, men dette gjelder bare i den forkrommede spilleren. Jeg derfor funnet det enklere bare å sette den til "0" og bruker en offentlig boolsk å angi om spilleren spiller automatisk eller ikke:
privat funksjon onPlayerReady (): void {if (Autoplay) {player.playVideo (); }}
Ok, så nå har vi fått til et punkt der vi kan teste spilleren. Som du kan se, har jeg forlatt funksjon destroyPlayer ()
kommentert ut slik at det kunne bli testet uten Flash klage. Så her er vår klasse så langt:
import mx.events.EventDispatcher; import mx.utils.Delegate; import YouTubePlayerEvent; klasse YouTubePlayer {public Var autoplay: Boolean = true; offentlig Var chromeless: Boolean = false; offentlige Var pars: String = 'autoplay = 0 & sløyfe = 0 & rel = 0 & showsearch = 0 & hd = 1'; offentlig Var playerWidth: Nummer = 425; offentlig Var playerHeight: Nummer = 344; offentlig Var addEventListener: Function; private Var intervaller: Array = []; private Var forelder: MovieClip; private Var loader: MovieClipLoader; private Var spiller: MovieClip; private Var videoId: String; private Var removePlayer: Boolean; private Var dispatchEvent: Function; offentlig funksjon YouTubePlayer (forelder: MovieClip) {EventDispatcher.initialize (denne); System.security.allowDomain ('*'); System.security.allowDomain ('www.youtube.com'); System.security.allowDomain ('youtube.com'); System.security.allowDomain ('s.ytimg.com'); System.security.allowDomain ('i.ytimg.com'); this.parent = forelder; loader = new MovieClipLoader (); } Offentlig funksjon init (videoId: String): void {this.videoId = videoId; if (spiller) {removePlayer = true; if (player.getPlayerState () = 1) {//destroyPlayer (); } Else {player.stopVideo (); }} Else {loadVideo (); }} Privat funksjon loadVideo (): void {var url: String = (chromeless 'http://www.youtube.com/apiplayer': 'http://www.youtube.com/v/' + videoId + ' & '+ pars); player = parent.createEmptyMovieClip ('Player' + (new Date () getTime ()), parent.getNextHighestDepth ().); parent._visible = false; loader.addListener ({onLoadInit: loadInit ()}); loader.unloadClip (spiller); loader.loadClip (url, spiller); } Private funksjon loadInit (): void {intervals.push (setInterval (Delegate.create (dette, checkPlayerLoaded), 500)); } Private funksjon checkPlayerLoaded (): void {if (player.isPlayerLoaded ()) {if (chromeless) {player.loadVideoById (videoId); } Player.addEventListener (YouTubePlayerEvent.STATE_CHANGED, Delegate.create (dette, onPlayerStateChanged)); player.addEventListener (YouTubePlayerEvent.ERROR, Delegate.create (dette, onPlayerError)); resizePlayer (playerWidth, playerHeight); parent._visible = true; for (var i: Antall = 0, jeg < intervals.length; i ++) {clearInterval (intervaller [i]); } OnPlayerReady (); }} Privat funksjon onPlayerStateChanged (state: Number): void {switch (stat) {case 0: //endte if (removePlayer) {//destroyPlayer (); } DispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_ENDED)); gå i stykker; case 1: //spille dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_PLAYING)); gå i stykker; case 2: //pauset dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_PAUSED)); gå i stykker; case 3: //buffering dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_BUFFERING)); gå i stykker; case 5: //video kø dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_QUEUED)); gå i stykker; }} Privat funksjon onPlayerError (): void {dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.ERROR)); } Offentlig funksjon resizePlayer (bredde: Number, høyde: Number): void {if (player.isPlayerLoaded ()) {player.setSize (bredde, høyde); }} Privat funksjon onPlayerReady (): void {if (Autoplay) {player.playVideo (); }}}
Nå bruker MTASC eller IDE, raskt opprette en klasse /keyframe og legge denne til det:
Var spiller = new YouTubePlayer (denne); player.autoPlay = false; player.playerWidth = Stage.width; player.playerHeight = Stage.height; player.init ('R7yfISlGLNU');
Du bør se omtrent slik ut:
Så det bør du se en fin YouTube-spiller med Lonely Island "Jeg er på en båt" (verdt en klokke). Du vil merke at så snart du begynner å spille det, vil det automatisk slå seg på HD, fin eh?
Nå som vi har laget vår spiller, har vi nå trenger muligheten til å endre videoen, så Vi må være i stand til å ødelegge spilleren
Trinn 10 -. Ødelegge Player
Mange YouTube AS3 spiller pakkere stole på AS3 å fjerne spilleren og legge den igjen. Men AS3 har virkelig dårlig søppelrydding, betyr det oppstå feil, som lyden ikke slutte å spille, eller du ikke kan laste inn en ny spiller fordi den forrige ikke er fjernet ennå. Jeg gjør dette alt i AS2 som det er mye enklere, renere og raskere.
Så vi bare trenger vår AS2 wrapper for å ødelegge den nåværende spiller slik at vi da kan legge i en ny en, så la oss lage den destroyPlayer ()
funksjon:
privat funksjon destroyPlayer (): void {intervals.push (setInterval (Delegate.create (dette, checkPlayerDestroyed), 500)); removePlayer = false; }
Nå ser liksom det samme som loadInit ()
funksjon, men vi kommer ikke til å begynne å ødelegge spilleren før intervallet er kjørt, så oppretter en ny funksjon kalt checkPlayerDestroyed () Bilde:
privat funksjon checkPlayerDestroyed (): void {if {for (var i: Antall = 0, jeg < intervals.length; i ++) (spiller!) {clearInterval (intervaller [i]); } Init (videoId, true); } Else {for (VAR spillere: String i morselskapet) {foreldre [spillere] .destroy (); removeMovieClip (foreldre [spillere]); unloadMovie (foreldre [spillere]); } Spiller = null; }}
Det vi gjør her er å sjekke om spilleren eksisterer, hvis den gjør det, vi så gå gjennom våre foreldre og ødelegge alle forekomster av det (ved hjelp av YouTube Player ødelegge ()
funksjon). Nok en gang, fordi AS2 er litt treg på denne typen ting, erklærer vi spilleren som null. Når intervallet er kjørt igjen og spilleren har blitt fjernet, fjerner vi intervallene og vi kjør deretter init ()
funksjon bestått video ID.
Så nå kan vi endre vår test fil vi brukte i den første milepælen, og sette den opp med en knapp, slik at når det trykkes en annen video blir lastet:
Var Holder = this.createEmptyMovieClip ('holder', this.getNextHighestDepth ()); Var knapp = this.createEmptyMovieClip ("knappen", this.getNextHighestDepth ()); Var spiller = new YouTubePlayer (holder); med (knapp) {beginfill (0xff0000); moveTo (0, 0); lineTo (100, 0); lineTo (100, 100); lineTo (0, 100); lineTo (0, 0); endFill (); _x = 500; } Button.onRelease = function (): void {player.init ('sGTAnXqn9Jc'); } Player.autoPlay = false; player.playerWidth = 500; player.playerHeight = Stage.height; player.init ('R7yfISlGLNU');
Så vi har:
Trinn 11 - Stoppe Video
Sist men ikke minst, må vi være i stand til å stoppe spilleren fra å spille, så vi legge til en funksjon som heter stop ()
til bunns i vår klasse, som så:
import mx.events.EventDispatcher; import mx.utils.Delegate; import YouTubePlayerEvent; klasse YouTubePlayer {public Var autoplay: Boolean = true; offentlig Var chromeless: Boolean = false; offentlige Var pars: String = 'autoplay = 0 & sløyfe = 0 & rel = 0 & showsearch = 0 & hd = 1'; offentlig Var playerWidth: Nummer = 425; offentlig Var playerHeight: Nummer = 344; offentlig Var addEventListener: Function; private Var intervaller: Array = []; private Var forelder: MovieClip; private Var loader: MovieClipLoader; private Var spiller: MovieClip; private Var videoId: String; private Var removePlayer: Boolean; private Var dispatchEvent: Function; offentlig funksjon YouTubePlayer (forelder: MovieClip) {EventDispatcher.initialize (denne); System.security.allowDomain ('*'); System.security.allowDomain ('www.youtube.com'); System.security.allowDomain ('youtube.com'); System.security.allowDomain ('s.ytimg.com'); System.security.allowDomain ('i.ytimg.com'); this.parent = forelder; loader = new MovieClipLoader (); } Offentlig funksjon init (videoId: String): void {this.videoId = videoId; if (spiller) {removePlayer = true; hvis {destroyPlayer () (player.getPlayerState () = 1!); } Else {player.stopVideo (); }} Else {loadVideo (); }} Privat funksjon loadVideo (): void {var url: String = (chromeless 'http://www.youtube.com/apiplayer': 'http://www.youtube.com/v/' + videoId + ' & '+ pars); player = parent.createEmptyMovieClip ('Player' + (new Date () getTime ()), parent.getNextHighestDepth ().); parent._visible = false; loader.addListener ({onLoadInit: loadInit ()}); loader.unloadClip (spiller); loader.loadClip (url, spiller); } Private funksjon loadInit (): void {intervals.push (setInterval (Delegate.create (dette, checkPlayerLoaded), 500)); } Private funksjon checkPlayerLoaded (): void {if (player.isPlayerLoaded ()) {if (chromeless) {player.loadVideoById (videoId); } Player.addEventListener (YouTubePlayerEvent.STATE_CHANGED, Delegate.create (dette, onPlayerStateChanged)); player.addEventListener (YouTubePlayerEvent.ERROR, Delegate.create (dette, onPlayerError)); resizePlayer (playerWidth, playerHeight); parent._visible = true; for (var i: Antall = 0, jeg < intervals.length; i ++) {clearInterval (intervaller [i]); } OnPlayerReady (); }} Privat funksjon onPlayerStateChanged (state: Number): void {switch (stat) {case 0: //endte if (removePlayer) {destroyPlayer (); } DispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_ENDED)); gå i stykker; case 1: //spille dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_PLAYING)); gå i stykker; case 2: //pauset dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_PAUSED)); gå i stykker; case 3: //buffering dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_BUFFERING)); gå i stykker; case 5: //video kø dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.PLAYER_QUEUED)); gå i stykker; }} Privat funksjon onPlayerError (): void {dispatchEvent (ny YouTubePlayerEvent (YouTubePlayerEvent.ERROR)); } Offentlig funksjon resizePlayer (bredde: Number, høyde: Number): void {if (player.isPlayerLoaded ()) {player.setSize (bredde, høyde); }} Privat funksjon onPlayerReady (): void {if (Autoplay) {player.playVideo (); }} Privat funksjon destroyPlayer (): void {intervals.push (setInterval (Delegate.create (dette, checkPlayerDestroyed), 500)); removePlayer = false; } Private funksjon checkPlayerDestroyed (): void {if {for (var i: Antall = 0, jeg < intervals.length; i ++) (spiller!) {ClearInterval (intervaller [i]); } Init (videoId); } Else {for (VAR spillere: String i morselskapet) {foreldre [spillere] .destroy (); removeMovieClip (foreldre [spillere]); unloadMovie (foreldre [spillere]); } Spiller = null; }} Offentlig funksjon stop (): void {removePlayer = false; player.stopVideo (); }}
Så det vi har vår YouTube Player klasse! Når du trenger å bruke YouTube-spilleren i AS2, kan du bruke denne! Enklest
Trinn 12 -. Opprette Wrapper
Nå som klassen vår er klar, vi trenger bare å lage omslaget vi kommer til å laste gjennom AS3, slik at vi kan bruke spilleren. Kommunikasjonen mellom wrapper (bygget i AS2) og AS3 kode vil bli gjort gjennom å bruke Flash Player er "LocalConnection '. Nå i stedet for å skrive min egen lokal tilknytning klasse, jeg bruker gSkinner.com utmerkede klasse SWFBridge. Så få deg en kopi, og gjør deg klar til å lage en endelig AS2 klasse
La oss lage en ny klasse fil som heter YouTubePlayerWrapper.as Hotell og sette opp klassen.
Klasse YouTubePlayerWrapper { offentlig funksjon YouTubePlayerWrapper (forelder: MovieClip) {}}
Så vi vil begynne med å sette opp vår klassens variabler og konstruktør:
import com.gskinner.utils.SWFBridgeAS2; import mx.utils.Delegate; import YouTubePlayer; import YouTubePlayerEvent; klasse YouTubePlayerWrapper {Static Var BRIDGE_NAME: String = 'YouTubePlayerWrapperBridge'; import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; Nyt.