Build din egen Action YouTube Player
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
I løpet av denne tut vil vi ta en titt på å bruke YouTube API for å bygge en tilpasset YouTube-spiller med Actionscript 3.0.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Fil Oppsett
Her er hvordan dette kommer til å fungere:
Vi vil opprette en YouTube-spiller wrapper som vil motta videoens ID
Vi vil opprette en dokument klasse på å bruke spilleren og sette sin kontroller
Vi vil bygge spillerens UI med designverktøy i Flash IDE og referere dem i dokumentet klassen
For dette har vi " ll trenger følgende filer:
Trinn 2: Stage Setup
Åpne opp Main.fla og redigere scenen for å gjøre det 500x440 med 30 bilder per sekund. Sett dokumentet klassen til
Trinn 3 "Main.": Layers Setup
Vi trenger bare to lag for denne opplæringen: spilleren holder, noe som vil være befolket av vår YouTube-spiller og kontroller laget, som vil ha alle knappene som brukes til å styre spilleren. I dette tilfellet vil vi ha en "play /pause" a "demping av /på" en fremdriftslinje (representerer beløp lastet) og en fylde bar (representerer hodet tid).
Jeg har lagt til en haug andre rammer bare for grafisk utseende, trenger du egentlig ikke trenger dem
Trinn 4:. Controls
Disse er enkle MovieClip symboler med forekomstnavn "play_mc" og "mute_mc "," progress_mc "og" fullness_mc "
Trinn 5: Spiller Holder
Denne spilleren er også en enkel svart form konvertert til en MovieClip med forekomstnavnet". holder_mc ".
Trinn 6: YoutubePlayer Class
Åpne YoutubePlayer.as og bygge et skjelett base klasse som strekker en MovieClip klasse
pakken {public class YoutubePlayer strekker MovieClip {offentlig funksjon YoutubePlayer ( ) {}}
Trinn 7: YoutubePlayer.as Importen
Vi har behov for å importere følgende klasser:
import flash.display.MovieClip; import flash.display.Loader; import flash.events.Event; import flash.system.Security; import flash.net.URLRequest;
Trinn 8: YoutubePlayer.as Variabler
.. og deretter setup følgende variabler (all koden i de kommende trinnene er kommentert):
Var spiller: Object; //objektet som vil ha spilleren lastet på Var loader: Loader; //lasteren som vil laste spilleren Var id: String; //videoens id Var playerStatus: String; //returnerer spillerne nåværende spille status Var progressRatio: Number; //returnerer forholdet forskjellen mellom de bytes lastet og bytes totale, fra 0 til 1, (nyttig for fremdriften bar) Var fullnessRatio: Nummer; //returnerer forholdet mellom forskjellen mellom hodet og de totale sekunder, fra 0 til 1, (anvendelige for fylde bar) Var ismuted: Boolean; //Returnerer true hvis spilleren er dempet
Trinn 9: YoutubePlayer.as YoutubePlayer ()
Når instansiert vi trenger videoens id sendes til YoutubePlayer () -funksjonen:
offentlig funksjon YoutubePlayer ($ id: String) {Security.allowDomain ("www.youtube.com"); //tillate tilgang fra youtube id = $ id //setter id loader = new Loader (); //instantiates lasteren loader.contentLoaderInfo.addEventListener (Event.INIT, onLoaderInit); //Etter lasting, kaller onLoaderInit loader.load (ny URLRequest ("http://www.youtube.com/apiplayer?version=3")); //begynner å laste prosessen}
Trinn 10: YoutubePlayer.as onLoaderInit ()
Her er onLoaderInit () funksjon, kalt etter at lasteren er instansiert (se forrige koden blokk).
privat funksjon onLoaderInit (hendelse: Hendelse): void {addChild (loader); //legger lasteren å iscenesette loader.content.addEventListener ("onReady", onPlayerReady); //kalles når spilleren er klar loader.content.addEventListener ("onError", onPlayerError); //kalles når spilleren har feil loader.content.addEventListener ("onStateChange", onPlayerStateChange); //kalles når de spiller staten endres}
Trinn 11: YoutubePlayer.as onPlayerReady ()
Hvis alt har gått ok så langt, er onPlayerReady () funksjon som heter:
privat funksjon onPlayerReady (hendelse: Hendelse): void {spiller = loader.content; //setter spilleren player.setSize (400, 225); //setter skjermstørrelsen player.loadVideoById (id) //laster video av id addEventListener (Event.ENTER_FRAME, updatePlayer); //oppdaterer spilleren}
Trinn 12: YoutubePlayer.as Andre nyttige arrangementer ()
Disse sporene komme godt med for debugging:
privat funksjon onPlayerError (hendelse: Hendelse): void {trace ("player error:" Object (event .data)); } //Jeg kunne ha brukt denne til å oppdatere playerStatus variabel, men jeg ønsket å vise deg en annen metode privat funksjon onPlayerStateChange (hendelse: Hendelse): void {trace ("player tilstand:" Object (event .data)); }
Trinn 13: YoutubePlayer.as Pakke
Dette er pakkemaskiner til ekstern kontroll:
offentlig funksjon playVideo () {player.playVideo ()} offentlig funksjon pauseVideo () {spiller .pauseVideo ()} offentlig funksjon stopVideo () {player.stopVideo ()} offentlig funksjon muteVideo () {player.mute ()} offentlig funksjon unmuteVideo () {player.unMute ()}
Trinn 14: YoutubePlayer.as updatePlayer ()
Bare en siste funksjon og klassen er ferdig:
offentlig funksjon updatePlayer (e) {ismuted = player.isMuted () //returnerer true hvis dempet //setter fremdriften Forholdet progressRatio = player.getVideoBytesLoaded () /player.getVideoBytesTotal () //setter fyllingsgraden fullnessRatio = player.getCurrentTime () /player.getDuration () //setter playerStatus for utendørs bruk switch (player.getPlayerState ()) { tilfellet -1: playerStatus = "påbegynte" break; case 0: playerStatus = "endte" break; case 1: playerStatus = "spille" break; case 2: playerStatus = "pauset" break; }}
Trinn 15: Main.as Importen
Forhåpentligvis har du allerede vet hvordan å bygge en grunnleggende dokument klasse (men hvis ikke, sjekk ut denne rask introduksjon). Inside, importere disse klassene:
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import YoutubePlayer;
Trinn 17: Main.as main ()
Her er vår main () funksjon
offentlig funksjon main () {addEventListener (Event.ADDED_TO_STAGE, init);. //hindrer samtaler for å iscenesette før den er klar}
Trinn 16: Main.as Init ()
Et spørsmål du kan spørre er, "Hvordan kan jeg vite videoens id"
Det er veldig enkelt: ta url av filmen du er på jakt etter "http://www.youtube.com/watch?v=fJGLAo_7F_I", for eksempel; videoen id er 11-sifret nummer som bæres av v Var - i dette tilfellet "fJGLAo_7F_I"
privat funksjon init (e) {removeEventListener (Event.ADDED_TO_STAGE, init.); //fjerner den forrige lytteren youtubeplayer = new YoutubePlayer ("txqiwrbYGrs"); //instantiates spilleren med denne videoen id //setter opp knappene play_mc.buttonMode = mute_mc.buttonMode = true; play_mc.addEventListener (MouseEvent.CLICK, playPausePlayer); mute_mc.addEventListener (MouseEvent.CLICK, muteUnmutePlayer); holder_mc.addChild (youtubeplayer) //legger spilleren til spilleren holder //nullstiller fylde og fremgang fullness_mc.width = 1 progress_mc.width = 1 //oppdaterer fylde og fremgang addEventListener (Event.ENTER_FRAME, loop); }
Trinn 17: Main.as playPausePlayer ()
Her er funksjonen for vår enkel knapp som bruker "playerStatus" for å veksle mellom å spille og stanset:
privat funksjon playPausePlayer (e) {if (youtubeplayer.playerStatus == "spille") {youtubeplayer.pauseVideo (); } else {youtubeplayer.playVideo (); }}
Trinn 18: Main.as muteUnmutePlayer ()
På samme måte, her er funksjonen for vår knapp som bruker "ismuted" for å veksle mellom Slå demping:
privat funksjon muteUnmutePlayer ( e) {if (youtubeplayer.ismuted) {youtubeplayer.unmuteVideo (); } else {youtubeplayer.muteVideo (); }}
Trinn 19: Main.as loop ()
La oss finne ut hvordan filmens fremgang gjør ..
//multiplisere forholdet med den totale bredden av barene vil gi oss den ønskede lengden siden forholdet går fra 0 til 1 privat funksjon loop (e) {fullness_mc.width = youtubeplayer.fullnessRatio * 350 progress_mc.width = youtubeplayer.progressRatio * 350}
Konklusjon
< p> Som du ser, er det ganske enkelt å lage en enkel youtube spiller i AS3, bør du sjekke ut Player API referanse for en liste over funksjoner og parametere du kan bruke til å forlenge denne.
I håper du likte denne opplæringen, takk for lesing!