Share
În timpul acestui tutt vom analiza utilizarea API-ului YouTube pentru a construi un player YouTube personalizat cu ActionScript 3.0.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Iată cum aceasta va funcționa:
Pentru aceasta vom avea nevoie de următoarele fișiere:
Deschideți Main.fla și editați scena pentru ao face 500x440 cu 30 de cadre pe secundă. Setați clasa de documente la "Main".
Avem nevoie doar de două straturi pentru acest tutorial: titularul de player, care va fi populat de playerul nostru YouTube și stratul de control, care va avea toate butoanele folosite pentru a controla playerul. În acest caz, vom avea o funcție de "redare / pauză", o "mute / dezactivare" o bară de progres (reprezintă suma încărcată) și o bară de plinătăți (reprezintă timpul de redare).
Am adăugat o grămadă de alte cadre doar pentru aspect grafic, nu aveți nevoie de ele.
Acestea sunt simple simboluri movieclip cu numele de instanțe "play_mc" și "mute_mc", "progress_mc" și "fullness_mc".
Jucătorul are, de asemenea, o formă neagră simplă convertită într-un movieclip cu numele de instanță "holder_mc".
Deschideți YoutubePlayer.as și construiți o clasă de bază schelet care extinde o clasă MovieClip
pachet public class YoutubePlayer extinde MovieClip funcția publică YoutubePlayer ()
Trebuie să importem următoarele clase:
import flash.display.MovieClip; import flash.display.Loader; importul flash.events.Event; import flash.system.Security; import flash.net.URLRequest;
... și apoi configurați următoarele variabile (tot codul din pașii următori este comentat):
var jucător: obiect; // obiectul care va avea playerul încărcat la loader var: Loader; // încărcătorul care va încărca playerul var id: String; // ID-ul videoclipului var playerStatus: String; // returnează starea curentă de redare a jucătorilor var progressRatio: Number; // returnează diferența raportului dintre octeți încărcați și total octeți, de la 0 la 1 (util pentru bara de progres) var fullnessRatio: Number; // returnează diferența raportului dintre capul de redare și secvența totală, de la 0 la 1, (util pentru bara de umiditate) var ismuted: Boolean; // se întoarce dacă jucătorul este dezactivat
Când instanțiată avem nevoie de ID-ul videoclipului trecut la funcția YoutubePlayer ():
Accentsconagua
funcția publică YoutubePlayer ($ id: String) Security.allowDomain ("www.youtube.com"); // permite accesul de pe youtube id = $ id // setează id loader = new Loader (); // instantează încărcătorul loader.contentLoaderInfo.addEventListener (Event.INIT, onLoaderInit); // După încărcare, solicităLoaderInit loader.load (nou URLRequest ("http://www.youtube.com/apiplayer?version=3")); // începe procesul de încărcare Iată funcția onLoaderInit (), numită după ce încărcătorul a fost instanțiat (a se vedea blocul anterior de cod).
funcția privată onLoaderInit (eveniment: Eveniment): void addChild (loader); // adaugă încărcătorul la stadiul loader.content.addEventListener ("onReady", onPlayerReady); // sunat când playerul este pregătit loader.content.addEventListener ("onError", onPlayerError); // sunat când playerul are erori loader.content.addEventListener ("onStateChange", onPlayerStateChange); // sunat când se schimbă starea de redare Dacă totul este OK până acum, funcția onPlayerReady () se numește:
funcția privată onPlayerReady (eveniment: Eveniment): void player = loader.content; // setează playerul player.setSize (400, 225); // setează dimensiunea afișajului player.loadVideoById (id) // Încarcă videoclipul cu id addEventListener (Event.ENTER_FRAME, updatePlayer); // actualizează playerul
Aceste urme sunt utile pentru depanare:
funcția privată onPlayerError (eveniment: Eveniment): void trace ("eroare de jucător:", Object (event) .data); // Aș fi putut folosi acest lucru pentru a actualiza variabila playerStatus, dar am vrut să vă arăt o altă metodă privată onPlayerStateChange (event: Event): void trace ("starea jucătorului:", Object (event) .data); Acestea sunt ambalajele pentru controlul extern:
funcția publică playVideo () player.playVideo () funcția publică pauseVideo () player.pauseVideo () funcția publică stopVideo () player.stopVideo () funcția publică muteVideo () player.mute unmuteVideo () player.unMute ()
Doar o ultimă funcție și clasa se face:
funcția publică actualizarePlayer (e) ismuted = player.isMuted () // returnează true dacă este mutată // stabilește raportul de progres progressRatio = player.getVideoBytesLoaded () / player.getVideoBytesTotal () // stabilește raportul deplină fullnessRatio = player.getCurrentTime () /player.getDuration () // setează playerulStatus pentru comutatorul exterior (player.getPlayerState ()) caz -1: playerStatus = pauză "unstarted"; cazul 0: playerStatus = pauză terminată; cazul 1: playerStatus = pauză de joc; Cazul 2: playerStatus = pauză;
Sperăm că deja știți cum să construiți o clasă de documente de bază (deși nu, consultați această introducere rapidă). În interior, importați aceste clase:
import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; importă YoutubePlayer;
Iată funcția noastră Main ().
funcția publică principală () addEventListener (Event.ADDED_TO_STAGE, init); // previne apelurile înainte de a fi pregătite
O întrebare pe care ați putea să o întrebați este "Cum știu id-ul videoclipului?"
Este foarte simplu: luați urlul filmului pe care îl urmăriți "http://www.youtube.com/watch?v=fJGLAo_7F_I", de exemplu; ID-ul videoclipului este numărul de 11 cifre pe care îl trimite v var - în acest caz "fJGLAo_7F_I".
funcția privată init (e) removeEventListener (Event.ADDED_TO_STAGE, init); // elimină ascultătorul anterior youtubeplayer = noul YoutubePlayer ("txqiwrbYGrs"); // instantează playerul cu acest id de videoclip // stabilește butoanele play_mc.buttonMode = mute_mc.buttonMode = true; play_mc.addEventListener (MouseEvent.CLICK, playPausePlayer); mute_mc.addEventListener (MouseEvent.CLICK, muteUnmutePlayer); hold_mc.addChild (youtubeplayer) // adaugă playerul la suportul playerului // resetează plinătatea și progresul fullness_mc.width = 1 progress_mc.width = 1 // actualizează completitudinea și progresul addEventListener (Event.ENTER_FRAME, bucla); Iată funcția pentru butonul nostru simplu care folosește "playerStatus" pentru a comuta între redare și pauză:
funcția privată playPausePlayer (e) if (youtubeplayer.playerStatus == "joc") youtubeplayer.pauseVideo (); altceva youtubeplayer.playVideo ();
În mod similar, iată funcția pentru butonul nostru care folosește "ismuted" pentru a comuta între mute și unmute:
funcția privată muteUnmutePlayer (e) if (youtubeplayer.ismuted) youtubeplayer.unmuteVideo (); altceva youtubeplayer.muteVideo ();
Să dăm seama cum progresul filmului are loc ...
// multiplicarea raportului cu lățimea totală a barelor ne va da lungimea dorită, deoarece raportul merge de la 0 la 1 buclă de funcții private (e) fullness_mc.width = youtubeplayer.fullnessRatio * 350 progress_mc.width = youtubeplayer.progressRatio * 350
După cum puteți vedea, este destul de simplu să creați un player youtube de bază în AS3, asigurați-vă că ați verificat referința API-Player pentru o listă de funcții și parametri pe care le puteți utiliza pentru a le extinde.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
