Video afspelen met ActionScript 3

FED  - Jaar 2 - Kwartaal 3 - Week 6

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

 

In de les play button laten zien

 

Lesopdracht stop button toevoegen

 

Workshop: filmpjes uit een dropdownlijst

Ev. Doorgaan met pauze toggle button (status)

 

 

 

 

 


 

Praktijk

video_1.fla

In dit voorbeeld ....

video_2.fla

In dit voorbeeld ....

video_3.fla

In dit voorbeeld ....

 

Referenties