Theorie

Deze les gaan we externe video bestanden afspelen met behulp van ActionScript 3.

Deze les wordt het volgende behandeld:

ü Welde video formaten worden er ondersteund?

ü Wat is de juiste compressie voor mijn video?

ü Hoe speel je een externe video af met ActionScript 3

ü Hoe bestuur je de video met ActionScript 3

Inleiding

Op het internet is het gebruik van video de laatste jaren enorm toegenomen. Veel gebruikers hebben tegenwoordig een breedband verbinding thuis, waardoor het snel doorgeven van grote bestanden mogelijk wordt. Flash is op dit moment de meest gebruikte techniek om video te integreren op websites, denk bijvoorbeeld alleen al aan een website als youtube.com.

Naast de snellere verbindingen zijn de compressie mogelijkheden ook steeds beter geworden, waardoor er hogere kwaliteit video mogelijk is bij de zelfde bestandsgrootte.

Op dit moment kan je door middel van goede compressie een video op DVD kwaliteit en resolutie aanbieden op het internet, maar zelfs HD resolutie komt steeds dichterbij.

Ondersteunde video formaten

Helaas kan je niet zomaar elk video bestand afspelen met ActionScript, de FlashPlayer ondersteund maar enkele video en audio compressie (codec) formaten. Als het formaat van de video die je wilt afspelen niet wordt ondersteund, moet deze worden geconverteerd.

De twee belangrijkste video compressie formaten die de FlashPlayer ondersteund zijn:

· On2 VP6 (vanaf FlashPlayer 7.0.0)

· H.264 (vanaf FlashPlayer 9.0.115)

Sinds FlashPlayer 9 Update 3 (v9.0.115.0) is er ondersteuning voor H.264 video encoding toegevoegd. Deze compressie methode biedt erg goede kwaliteit en heeft een open specificatie. H.264 is hierdoor niet alleen binnen de FlashPlayer af te spelen, maar ook op meerdere software en hardware platformen zoals QuickTime en de iPod.

Hieronder een overzicht een overzicht van de verschillende bestandsformaten die kunnen worden ingelezen door de FlashPlayer:

Bestandsformaten	Omschrijving
.flv / .f4v	Video voor FlashPlayer
.f4p	Protected Video voor FlashFlayer
.f4a	Audio voor Flash Player
.f4b	Audio Boek voor Flash Player

Compressie

Om een video te converteren naar een door de FlashPlayer in te lezen formaat maken we gebruik van Adobe ‘Flash CS3 Video Encoder’ of ‘Flash Media Encoder CS4’. Deze software wordt gratis meegeleverd bij de installatie van Flash CS3/CS4. Let op: pas vanaf versie CS4 kan je H.264 compressie toepassen.

Een video bestand heeft een zogenaamde bitrate, deze bitrate geeft aan hoeveel kilobit per seconde de video bevat. Bij video compressie is het de doelstelling dat we een zo hoog mogelijke kwaliteit behalen bij een zo laag mogelijke bitrate. Dit is natuurlijk per definitie al een tegenstelling en daarom is het aan ons om goede keuzes te maken.

Voordat je begint met het comprimeren van de video moet je goed bedenken wie de doelgroep is van de website en vooral wat de minimum snelheid is van de verbinding van de gebruiker. Een vaak gebruikt gemiddelde is 500kbps, wat er op neer komt dat de bezoeker minimaal 50 KiloByte per seconde moet kunnen downloaden. Goedkope ADSL abonnementen voldoen hier vaak ruimschoots aan.

Hieronder een overzicht met een aantal voorbeelden van een verschillende bitrate:

Resolutie	Bitrate	Bestandsgrootte
320x240 pixels	400 kbps	3MB / minuut
480x360 pixels	700 kbps	5MB / minuut
720x540 pixels	1000 kbps	7.5MB / minuut

Denk bij het comprimeren aan het volgende:

· Zorg ervoor dat je bronmateriaal altijd van hoge kwaliteit is.

· Audio en video hebben beide een eigen bitrate.

· Kan de het aantal frames per seconde lager (framerate)?

Probeer verschillende instellingen tot je een resultaat krijgt waar je tevreden over bent.

Video besturen met ActionScript 3

Om de video te besturen moet je het NetStream object aansturen met ActionScript. Hieronder wat voorbeelden met de belangrijkste functies:

Functie	Omschrijving
.play("filmpje.flv")	Begint met afspelen van de file “filmpje.flv”.
.close()	Stopt met afspelen van de video.
.pause()	Pauzeert de video.
.resume()	Speelt verder na pause.
.togglePause()	Pauzeert of speelt de video.
.seek(3);	Spoelt de video naar de 3^e seconde.

In de les wordt “video_4.fla” uitgelegd, hierin staat een knop die de video stopt.

Praktijk

Lesopdracht

Probeer zelf aan “video_4.fla” een play knop toe te voegen, die de NetStream verder laat spelen nadat er op de stop knop is gedrukt.

Voorbeelden

video_1.fla

In dit voorbeeld staat de basis die nodig is om een video af te spelen met AS3. We gebruiken het Video object in combinatie met de NetConnection en NetStream objecten. Helaas geeft dit een kleine foutmelding die we in het volgende voorbeeld oplossen.

video_2.fla

Door in de NetStream de “client” eigenschap te zetten voorkomen we de foutmelding. We kunnen nu ook de MetaData afvangen, hierin staat ondermeer de “duration” van de video.

video_3.fla

In dit voorbeeld gaan we nog een stap verder door te luisteren naar NetStatusEvent’s. Met deze events kan je bijvoorbeeld afvangen wanneer de video klaar is met afspelen.

video_4.fla

In dit voorbeeld voegen we, door middel van een stop knop, eenvoudige interactie toe. Omdat we het Video object met AS3 toevoegen aan de DisplayList komt deze over de “stop button” heen te liggen.
Om te voorkomen dat de button niet meer zichtbaar is, hebben we in dit voorbeeld een zogenaamde “holder” MovieClip toegevoegd. Deze “holder” is op de timeline onder de button geplaatst. We koppelen de Video aan de “holder” clip, waardoor de “stop button” altijd zichtbaar blijft.

Referenties

AS3 Video tutorial
http://gotoandlearn.com/play?id=46