Share
Under denne tuten tar vi en titt på YouTube-API-en for å bygge en tilpasset YouTube-spiller med ActionScript 3.0.
La oss se på det endelige resultatet vi vil jobbe for:
Slik fungerer dette:
For dette trenger vi følgende filer:
Åpne Main.fla og rediger scenen for å gjøre det 500x440 med 30 bilder per sekund. Sett dokumentklassen til "Main".
Vi trenger bare to lag for denne opplæringen: Spilleren holder, som vil bli 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" en "dempe / deaktivere" en fremdriftslinje (representerer beløpet lastet) og en fullhetslinje (representerer spilleledetid).
Jeg har lagt til en haug med andre rammer bare for grafisk utseende, du trenger egentlig ikke de.
Dette er enkle filmklippssymboler med forekomstnavnene "play_mc" og "mute_mc", "progress_mc" og "fullness_mc."
Spilleren er også en enkel svart form konvertert til en filmklipp med forekomstnavnet "holder_mc."
Åpne YoutubePlayer.as og bygg en skjelettbase klasse som utvider en MovieClip klasse
pakke offentlig klasse YoutubePlayer utvider MovieClip offentlig funksjon YoutubePlayer ()
Vi må importere følgende klasser:
importer flash.display.MovieClip; importer flash.display.Loader; importere flash.events.Event; importere flash.system.Security; importere flash.net.URLRequest;
... og sett deretter inn følgende variabler (alle koden i de kommende trinnene kommenteres):
var spiller: Objekt; // objektet som vil ha spilleren lastet til var loader: Loader; // lasteren som vil laste spilleren var id: String; // videoens id var playerStatus: String; // returnerer spillerne nåværende spillestatus var progressRatio: Number; // returnerer forholdsforskjellen mellom byte lastet og bytes totalt, fra 0 til 1, (nyttig for fremdriftslinjen) var fullhetRatio: Nummer; // returnerer forholdsforskjellen mellom avspillingshode og de totale sekundene, fra 0 til 1, (nyttig for fullhetslinjen) var ismuted: Boolean; // returnerer sant hvis spilleren er dempet
Når instantiated trenger vi videoens id bestått til YoutubePlayer () -funksjonen:
Accentsconagua
offentlig funksjon YoutubePlayer ($ id: String) Security.allowDomain ("www.youtube.com"); // tillat tilgang fra youtube id = $ id // setter id loader = ny Loader (); // instanserer loader loader.contentLoaderInfo.addEventListener (Event.INIT, onLoaderInit); // Etter innlasting, ringer onLoaderInit loader.load (ny URLRequest ("http://www.youtube.com/apiplayer?version=3")); // begynner å laste prosessen Her er funksjonen onLoaderInit (), kalt etter at lasteren er instantiated (se forrige kodeblokk).
privat funksjon onLoaderInit (event: Event): void addChild (loader); // legger lasteren til scene loader.content.addEventListener ("onReady", onPlayerReady); // kalt når spilleren er klar loader.content.addEventListener ("onError", onPlayerError); // kalt når spilleren har feil loader.content.addEventListener ("onStateChange", onPlayerStateChange); // kalles når spilltilstanden endres Hvis alt er borte OK så langt, kalles funksjonen onPlayerReady ():
privat funksjon onPlayerReady (event: Event): void player = loader.content; // setter spilleren player.setSize (400, 225); // setter skjermstørrelsen player.loadVideoById (id) // laster videoen med id addEventListener (Event.ENTER_FRAME, updatePlayer); // oppdaterer spilleren
Disse sporene er nyttige for feilsøking:
privat funksjon onPlayerError (event: Event): void trace ("player error:", Object (event) .data); // Jeg kunne ha brukt dette til å oppdatere playerStatus-variabelen, men jeg ønsket å vise deg en annen metode privat funksjon onPlayerStateChange (event: Event): void trace ("player state:", Object (event) .data); Dette er pakkene til ekstern kontroll:
offentlig funksjon playVideo () player.playVideo () offentlig funksjon pauseVideo () player.pauseVideo () offentlig funksjon stopVideo () player.stopVideo () offentlig funksjon muteVideo () player.mute () offentlig funksjon unmuteVideo () player.unMute ()
Bare en siste funksjon og klassen er ferdig:
offentlig funksjon updatePlayer (e) ismuted = player.isMuted () // returnerer sant hvis dempet // angir fremdriftsforholdet progressRatio = player.getVideoBytesLoaded () / player.getVideoBytesTotal () // angir fyldeforholdet fullnessRatio = player.getCurrentTime () /player.getDuration () // setter spillerenStatus for ekstern bruk bryter (player.getPlayerState ()) case -1: playerStatus = "unstarted" break; tilfelle 0: playerStatus = "ended" break; tilfelle 1: playerStatus = "playing" break; tilfelle 2: playerStatus = "pauset" pause;
Forhåpentligvis vet du allerede hvordan du bygger en grunnleggende dokumentklasse (selv om ikke, sjekk ut denne raske introduksjonen). Innsiden, importere disse klassene:
importer flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; importere YoutubePlayer;
Her er vår Main () funksjon.
offentlig funksjon Main () addEventListener (Event.ADDED_TO_STAGE, init); // forhindrer anrop til scenen før den er klar
Et spørsmål du kanskje spør er, "Hvordan kjenner jeg videoens ID?"
Det er veldig enkelt: ta url av filmen du er etter "http://www.youtube.com/watch?v=fJGLAo_7F_I", for eksempel; video-ID er det 11-sifrede nummer som bæres av v var - i dette tilfellet "fJGLAo_7F_I".
privat funksjon init (e) removeEventListener (Event.ADDED_TO_STAGE, init); // fjerner forrige lytter youtubeplayer = ny YoutubePlayer ("txqiwrbYGrs"); // instanser spilleren med dette video-IDet // 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 spillerens holder // tilbakestiller fylde og fremgang fullness_mc.width = 1 progress_mc.width = 1 // oppdaterer fylle og fremdrift addEventListener (Event.ENTER_FRAME, loop); Her er funksjonen for vår enkle knapp som bruker "playerStatus" for å veksle mellom å spille og pause:
privat funksjon playPausePlayer (e) if (youtubeplayer.playerStatus == "playing") youtubeplayer.pauseVideo (); ellers youtubeplayer.playVideo ();
På samme måte er her funksjonen for vår knapp som bruker "ismuted" for å veksle mellom stum og unmute:
privat funksjon muteUnmutePlayer (e) if (youtubeplayer.ismuted) youtubeplayer.unmuteVideo (); ellers youtubeplayer.muteVideo ();
La oss finne ut hvordan filmens fremgang gjør ...
// multiplisere forholdet med den totale bredden av stolpene gir oss ønsket lengde siden forholdet går fra 0 til 1 privatfunksjonsløkke (e) fullness_mc.width = youtubeplayer.fullnessRatio * 350 progress_mc.width = youtubeplayer.progressRatio * 350
Som du kan se, er det ganske enkelt å lage en grunnleggende youtube player i AS3, pass på at du sjekker ut spiller API-referansen for en liste over funksjoner og parametere du kan bruke til å utvide denne.
Jeg håper du likte denne opplæringen, takk for å lese!
