Aan de slag met scroll kit: Video's!

Wat producties als Snow Fall, Firestorm en de NSA Files zo spectaculair maakt, zijn onder andere de video's die automatisch afspelen en de prachtige bewegende achtergronden. Als jouw project door een van deze drie mediaproducties geïnspireerd werd, ga je waarschijnlijk aan de slag met Scroll kit en wil je waarschijnlijk met bewegende beelden werken. Geen probleem! Video's kunnen binnen Scroll kit op twee verschillende manieren gebruikt worden:

Manier 1: Als een "gewoon filmpje" op een webpagina

Heb je een video die je het publiek graag wilt laten zien, maar hoeft die video niet als achtergrond getoond te worden en mag het publiek zien dat de video gewoon van youtube komt? Doe dan het volgende:

Klik links bovenin op "Add Ons" (de vijfde knop van links).

 Klik nu op "Youtube". (Of kies "iFrame" als je gewend bent om daarmee te werken en daar liever gebruik van maakt.)

 Je ziet nu een kader met stippellijn waarmee je kunt bepalen waar je jouw youtube video wilt weergeven. Houdt het kader op de plek waar je jouw video wilt plaatsen en klik.

Kopieer nu de link van de youtubevideo die je hier wilt laten zien, plak hem in de balk onder "Youtube URL:" en klik op "submit".

Nu krijg je jouw youtube video te zien. Als je wilt, kun je het kader waar de video in staat groter en kleiner maken, de video roteren (houd de witte cirkel boven de video ingedrukt) en verslepen. Klaar!

Manier 2: Als "bewegende achtergrond" (paginagroot)

Veruit de populairste manier om een video in een Scroll kit productie te laten zien, is als bewegende achtergrond. Dit type video vraagt om iets meer voorbereiding:

Wat heb je nodig?

- Toegang tot eigen serverruimte waar je jouw video kunt uploaden.

- Een video. (liefst hoge kwaliteit h.264) 

- De juiste instellingen op jouw server.

Stap 1: Maak een .webm video

Monteer je video en exporteer hem naar h.264 formaat. Uiteindelijk moet jouw video webm-formaat worden. De meeste software kan video's helaas nog niet als webm exporteren. Waarom is het slim om jouw video als h.264 te exporteren? H.264 maakt jouw video vrij klein zonder dat er veel kwaliteit verloren gaat en h.264 kan eenvoudig geconverteerd worden naar webm.

Stap 2: Converteer je video naar .webm

Ga naar deze website en selecteer het bestand dat je naar .webm wilt converteren. 

Je hoeft onderin het uploadscherm niets in te vullen. Als je alle velden leeg laat, blijft jouw video namelijk precies zoals hij was toen je het originele bestand exporteerde. Vooral omdat je deze webm-video als achtergrond in je scroll kit wilt gaan gebruiken, is het verstandig om de afmetingen van je video niet te verkleinen.

Als jouw video geconverteerd is, krijg je van de website een melding dat je jouw video kunt opslaan. Doe dit op een logische plek, je hebt het videobestand later namelijk weer nodig.

Stap 3: Upload de video naar jouw serverruimte

Voor deze stap is het belangrijk dat je een plek hebt waar je jouw video veilig neer kunt zetten. Als je een Fontysstudent bent, heeft jouw MME'er als het goed is serverruimte voor je geregeld. Log in op die serverruimte en upload jouw webm video naar het Public HTML gedeelte. 

(Vraag bij voorkeur je MME'er om deze stap uit te voeren) Stap 4: Zorg dat de instellingen van de server juist zijn

Veel servers spelen niet standaard webm bestanden af. Om ervoor te zorgen dat alle videobestanden gewoon afgespeeld worden, moet je een aantal "MIME Types" toevoegen. Ga daarom naar de MIME instellingen en voeg de volgende regels toe:

.webm	“video/webm”
.ogg	“application/ogg”
.ogv	“video/ogg”
.mp4	“video/mp4″
.m4v	“video/m4v”

Als je dit gedaan hebt, kan jouw video afgespeeld worden.

Stap 5: Plak de link in scroll kit
Ga nu terug naar het Public HTML gedeelte op je server. Daar zie je als het goed is je webm video staan. Klik de video aan en kopieer de link die je in de adresbalk ziet staan. Die link ziet er waarschijnlijk ongeveer zo uit:

https://s121.webhostingserver.nl:2223/CMD_FILE_MANAGER/domains/ingkt.nl/public_html/test.webm 

Dit is de link naar de video in jouw serverruimte. Omdat je moet inloggen om deze link te kunnen volgen, ben jij de enige die kan zien wat zich achter deze link bevindt. Om de link voor iedereen zichtbaar te maken, moet je bepaalde delen van de link verwijderen. Haal het volgende weg:

https://s121.webhostingserver.nl:2223/CMD_FILE_MANAGER/domains/ingkt.nl/public_html/test.webm

Verwijder de "s" na "http".

http://s121.webhostingserver.nl:2223/CMD_FILE_MANAGER/domains/ingkt.nl/public_html/test.webm

Verwijder alles wat met jouw serverruimte te maken heeft en direct voor de "gewone domeinnaam" staat. 

http://ingkt.nl/public_html/test.webm

Verwijder het "public_html" gedeelte.

http://ingkt.nl/test.webm

uiteindelijk houd je een korte link over die eindigt op ".webm", omdat de link naar een webm video verwijst. Ga nu terug naar scroll kit.

  
Klik links bovenin op het blauwe blokje.

Selecteer het "Video"-gedeelte. en plak in het "WebM"-gedeelte de link naar je video. Onder de link-balk kun je vervolgens instellen hoe jouw video afgespeeld moet worden. Klik als alles klaar is op "Set Video Background". Klaar!