Anleitung

Zuerst einmal ein großes Danke an Jake Rochelau, der uns dieses Script zur Verfügung gestellt hat. Ich habe dieses auf WARC angepasst.

 

Schritt 1: Ihr benötigt einige Scripts die Ihr hier downloaden könnt: Scripts

Schritt 2: Das komplette WARC-File gibt es hier. Nach dem Download in WARC importieren : Template

Schritt 3: Erstellt euch ein Video, oder ladet es hier 4free runter: Videos

Schritt 4: Konvertiert euch das Video (empfohlene Länge ca. 30 Sek.) einmal in ein mpg4 und einmal in ein .ogg-File. Videokonverter gibt es für Mac z.B. hier: Total Video Converter

Schritt 5: Benennt die beiden Videos und gebt diese in den Ordner zB. den Namen "media".

Schritt 6: Erstellt auf euren Webspace/Provider einen Ordner, z.B. "videobackground" und ladet die Scripts (unverändert), die Styles (unverändert) und den Mediaordner mit euren Videos hoch.

Schritt 7: Implementiert auf eurer Startsite unter "edit page properties" unter edit Html Code" dieses Script und ändert die Links ganz unten (rosa markiert) auf den Namen eurer Clips:

 

<link rel="stylesheet" href="css/style.css">

 

<video poster="http://euerwebspace/media/xxxx.jpg" 

 

id="bgvid" playsinline autoplay muted loop>

  

<source src="http://euerwebspace/media/xxxx.mp4" type="video/mp4">

<source src="http://euerwebspace/media/xxxx.mp4.webm" type="video/webm">

<source src="http://euerwebspace/media/xxxx.mp4.ogv" type="video/ogv">

 

</video>

 

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script  src="js/index.js"></script>

 

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

 <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="loader/css/loaderstyle.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

 

 <script>

//paste this code under head tag or in a seperate js file.

// Wait for window load

$(window).load(function() {

// Animate loader off screen

$(".se-pre-con").fadeOut("slow");;

});

</script>

 

<div class="se-pre-con"></div>

 

Anmerkung: Wenn ihr einen loader wollt (zB. ein sich drehendes Rad, bevor das Video bei langsamer Internetverbindung komplett geladen ist, bennent den Order loader_off auf loader um.

 

Schritt 8: Nehmt z.B. einen Screenshot eines Kaders des Videos und macht damit unter WARC einen Background, damit User mit iBook oder iPhone das Startbild sehen können. Das ist zwar nicht unbedingt notwendig, da sowieso der erste Kader gezeigt wird, aber zur Sicherheit kann man das so machen.

 

Schritt 9: Veröffentlicht eure Site

 

FERTIG

Ich habe die Site unter Apple mit Safari, Firefox und Chrome getestet. Unter Windows sollte aber alles genauso perfekt funktionieren.