Een YouTube-filmpje heeft grote voordelen. Jouw Flash-site wordt er nauwelijk groter van en de bezoeker hoeft niet lang te wachten voordat er gekeken kan worden. De filmpjes worden immers gestreamed. Daardoor kun je al met kijken beginnen als er nog maar een klein deel van het videobestand binnen is.
In een site met navigatieknoppen wordt een YouTube filmpje geïmporteerd.
Er wordt eerste een extra pagina gemaakt in de site.
Gebaseerd op de code van de YouTube API voor AS3 wordt er script toegevoegd.
Er zijn twee manieren om dit te doen:
in een site met navigatieknoppen wordt een YouTube filmpje geïmporteerd.
Er wordt eerste een extra pagina gemaakt.
Gebaseerd op de code van de YouTube API voor AS3 wordt er het volgende script toegevoegd:
// Maak een object dat de video gaat bevatten.
var speler:Object;
var lader:Loader = new Loader();
lader.contentLoaderInfo.addEventListener(Event.INIT, alsLadenGestartIs);
lader.load(new URLRequest("youtube.com/v/9JkjBw-RHJ4?version=3"));
function alsLadenGestartIs(event:Event):void {
addChild(lader);
lader.content.addEventListener("onReady", alsSpelerKlaar);
}
function alsSpelerKlaar(event:Event):void {
speler = lader.content;
// verplaats de speler
speler.x = 50;
speler.y = 50;
}
Hierbij wordt de video geladen met de ID: 9JkjBw-RHJ4.
it is een unieke ID voor elk YouTube filmpje. Je ziet hem boven in de adres regel staan.
Klik maar op deze link.
Om de video weer weg te krijgen wordt aan elke knop een stukje code toegevoegd, die de speler en de lader verwijderd. Dit leidt in het geval er geen video draait tot een output-melding dat er geen video is (dat is dan ook zo) maar de zaak blijft wel werken.
Hier wordt wel veel code gebruikt maar er is veel controlecode, en in dit lange voorbeeld worden de navigatieknoppen ook verborgen en opnieuw getoond.
De code is:
// Het afspeler SWF bestand op www.youtube.com moet comuniceren met dit
// SWF bestand. Yhet script moet Security.allowDomain() aanroepen om hiervoor
// toestemming voor de communicatie te krijgen.
Security.allowDomain("www.youtube.com");
// In dit object komt de afspeler van het filmpje
var afspeler:Object;
var lader:Loader = new Loader();
lader.contentLoaderInfo.addEventListener(Event.INIT, alsLadenGestart);
lader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
function alsLadenGestart(event:Event):void {
addChild(lader);
lader.content.addEventListener("onReady", alsAfspelerKlaar);
// hierna worden 3 functies aangeroepen, die meldingen geveb in het uitvoervenster...
lader.content.addEventListener("onError", toonAfspelerFouten);
lader.content.addEventListener("onStateChange", alsAfspelerToestandWijzigt);
lader.content.addEventListener("onPlaybackQualityChange", alsKwaliteitVerandert);
}
function alsAfspelerKlaar(event:Event):void {
// Event.data contains the event parameter, which is the afspeler API ID
trace("afspeler ready:", Object(event).data);
// Als dit enmaal is gebeurd kan de video worden geladen in de afspeler
// daarvoor moet het juiste ID worden ingevoerd
afspeler = lader.content;
afspeler.loadVideoById("9JkjBw-RHJ4");
afspeler.x = afspeler.y = 115;
}
function toonAfspelerFouten(event:Event):void {
// Event.data bevat de parameters van de gebeurtenis, welke de foutconde bevatten,
// dit wordt geprint in het uitvoer venster
trace("afspeler fouten:", Object(event).data);
}
function alsAfspelerToestandWijzigt(event:Event):void {
// Event.data bevat de gebeurtenis parameters, welke de nieuwe toestand van de afspeler geeft.
trace("afspeler toestand:", Object(event).data);
}
function alsKwaliteitVerandert(event:Event):void {
// Event.dat bevat de kwaliteitsindicatie van de video
trace("video kwaliteit:", Object(event).data);
}
terug_btn.addEventListener(MouseEvent.CLICK, terug)
function terug(MouseEvent) {
home_btn.visible = true;
kerken_btn.visible = true;
bruggen_btn.visible = true;
bestel_btn.visible = true;
amschool_btn.visible = true;
pleinen_btn.visible = true;
afspeler.destroy();
removeChild(lader);
gotoAndStop("pleinen");
}
pauze_btn.addEventListener(MouseEvent.CLICK, pauze);
function pauze(MouseEvent) {
afspeler.pauseVideo();
}
speel_btn.addEventListener(MouseEvent.CLICK, speel);
function speel(MouseEvent) {
afspeler.playVideo();
}
home_btn.visible = false;
kerken_btn.visible = false;
bruggen_btn.visible = false;
bestel_btn.visible = false;
amschool_btn.visible = false;
pleinen_btn.visible = false;