Share
Tijdens deze tut zullen we een kijkje nemen bij het gebruik van de YouTube API om een aangepaste YouTube-speler te bouwen met ActionScript 3.0.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Hier is hoe dit gaat werken:
Hiervoor hebben we de volgende bestanden nodig:
Open Main.fla en bewerk de stage om er 500x440 van te maken met 30 frames per seconde. Stel de documentklasse in op 'Hoofd'.
We hebben slechts twee lagen nodig voor deze zelfstudie: de spelershouder, die wordt gevuld door onze YouTube-speler en de bedieningslaag, die alle knoppen heeft die worden gebruikt om de speler te bedienen. In dit geval hebben we een "play / pause" een "mute / unmute" een voortgangsbalk (staat voor het geladen bedrag) en een volheidsbalk (staat voor de tijd van de afspeelkop).
Ik heb een aantal andere frames toegevoegd voor grafische weergave, die heb je niet echt nodig.
Dit zijn eenvoudige filmclipsymbolen met de instantienamen "play_mc" en "mute_mc", "progress_mc" en "fullness_mc."
De speler is ook een eenvoudige zwarte vorm geconverteerd naar een filmclip met de instantienaam "holder_mc."
Open YoutubePlayer.as en bouw een skeletbasisklasse die een MovieClip-klasse uitbreidt
package public class YoutubePlayer breidt MovieClip uit openbare functie YoutubePlayer ()
We moeten de volgende klassen importeren:
import flash.display.MovieClip; import flash.display.Loader; import flash.events.Event; import flash.system.Security; import flash.net.URLRequest;
... en stel vervolgens de volgende variabelen in (alle code in de komende stappen wordt becommentarieerd):
var speler: Object; // het object waarbij de speler in var loader wordt geladen: Loader; // de loader die de speler laadt var id: String; // de id van de video var playerStatus: String; // geeft de huidige afspeelstatus van de speler terug var progressRatio: Number; // retourneert het verhoudingsverschil tussen de bytes en het bytes-totaal, van 0 tot 1, (nuttig voor de voortgangsbalk) var fullnessRatio: Number; // retourneert het verhoudingsverschil tussen de afspeelkop en de totale seconden, van 0 tot 1, (nuttig voor de volheidsbalk) var ismuted: Boolean; // geeft waar als speler gedempt is
Als dit wordt geïnstantieerd, moeten we het ID van de video doorgeven aan de functie YoutubePlayer ():
Accentsconagua
publieke functie YoutubePlayer ($ id: String) Security.allowDomain ("www.youtube.com"); // toegang toestaan vanaf youtube id = $ id // stelt de id-lader in = new Loader (); // maakt de loader loader.contentLoaderInfo.addEventListener (Event.INIT, onLoaderInit); // Na het laden, roept onLoaderInit loader.load aan (nieuwe URLRequest ("http://www.youtube.com/apiplayer?version=3")); // start het laadproces Hier is de functie onLoaderInit (), die wordt genoemd nadat de loader is geïnstantieerd (zie vorig codeblok).
private function onLoaderInit (event: Event): void addChild (loader); // voegt de loader toe aan stage loader.content.addEventListener ("onReady", onPlayerReady); // called wanneer de speler klaar is loader.content.addEventListener ("onError", onPlayerError); // called wanneer de speler fouten loader.content.addEventListener ("onStateChange", onPlayerStateChange) heeft; // called wanneer de afspeelstatus is gewijzigd Als alles tot nu toe OK is, wordt de functie onPlayerReady () aangeroepen:
private function onPlayerReady (event: Event): void player = loader.content; // stelt de player player.setSize in (400, 225); // stelt de weergavegrootte in player.loadVideoById (id) // laadt de video op de id addEventListener (Event.ENTER_FRAME, updatePlayer); // update de speler
Deze sporen zijn handig voor het opsporen van fouten:
private function onPlayerError (event: Event): void trace ("player error:", Object (event) .data); // Ik had dit kunnen gebruiken om de playerStatus-variabele bij te werken, maar ik wilde je een andere privé-functie laten zien onPlayerStateChange (event: Event): void trace ("player state:", Object (event) .data); Dit zijn de wrappers voor externe controle:
openbare functie playVideo () player.playVideo () openbare functie pauseVideo () player.pauseVideo () openbare functie stopVideo () player.stopVideo () openbare functie muteVideo () player.mute () openbare functie unmuteVideo () player.unMute ()
Slechts één laatste functie en de klas is klaar:
public function updatePlayer (e) ismuted = player.isMuted () // geeft waar als gedempt // stelt de voortgangsratio in progressRatio = player.getVideoBytesLoaded () / player.getVideoBytesTotal () // stelt de volheidsverhouding in volheidRatio = player.getCurrentTime () /player.getDuration () // zet de spelerStatus voor buitengebruik schakelaar (player.getPlayerState ()) case -1: playerStatus = "niet gestart" pauze; case 0: playerStatus = "ended" break; geval 1: playerStatus = "speel" pauze; geval 2: playerStatus = "gepauzeerd" pauze;
Hopelijk weet u al hoe u een eenvoudige documentklasse kunt bouwen (maar als dat niet het geval is, bekijk dan deze korte introductie). Binnenin importeer je deze klassen:
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; importeer YoutubePlayer;
Dit is onze hoofdfunctie ().
public function Main () addEventListener (Event.ADDED_TO_STAGE, init); // voorkomt dat oproepen worden gerapporteerd voordat het gereed is
Een vraag die u mogelijk stelt, is: 'Hoe weet ik de id van de video?'
Het is heel simpel: neem bijvoorbeeld de URL van de film "http://www.youtube.com/watch?v=fJGLAo_7F_I"; de video-id is het 11-cijferige nummer dat wordt bijgedragen door de v var - in dit geval "fJGLAo_7F_I".
private functie init (e) removeEventListener (Event.ADDED_TO_STAGE, init); // verwijdert de vorige listener youtubeplayer = new YoutubePlayer ("txqiwrbYGrs"); // brengt de speler tot leven met deze video-id // stelt de knoppen in play_mc.buttonMode = mute_mc.buttonMode = true; play_mc.addEventListener (MouseEvent.CLICK, playPausePlayer); mute_mc.addEventListener (MouseEvent.CLICK, muteUnmutePlayer); holder_mc.addChild (youtubeplayer) // voegt de speler toe aan de spelerhouder // reset de volheid en voortgang fullness_mc.width = 1 progress_mc.width = 1 // update de volheid en voortgang addEventListener (Event.ENTER_FRAME, loop); Hier is de functie voor onze eenvoudige knop die "playerStatus" gebruikt om te schakelen tussen afspelen en onderbroken:
private function playPausePlayer (e) if (youtubeplayer.playerStatus == "playing") youtubeplayer.pauseVideo (); else youtubeplayer.playVideo ();
Evenzo is hier de functie voor onze knop die "ismuted" gebruikt om te schakelen tussen dempen en dempen opheffen:
persoonlijke functie muteUnmutePlayer (e) if (youtubeplayer.ismuted) youtubeplayer.unmuteVideo (); else youtubeplayer.muteVideo ();
Laten we eens kijken hoe de voortgang van de film aan het worden is ...
// als u de verhouding vermenigvuldigt met de totale breedte van de balken, krijgt u de gewenste lengte, omdat de verhouding tussen 0 en 1 gaat. Persoonlijke functie lus (e) fullness_mc.width = youtubeplayer.fullnessRatio * 350 progress_mc.width = youtubeplayer.progressRatio * 350
Zoals je ziet, is het vrij eenvoudig om een eenvoudige youtube-speler te maken in AS3, zorg ervoor dat je de Player API-referentie bekijkt voor een lijst met functies en parameters die je kunt gebruiken om deze uit te breiden.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
