JS Animated. Wie arbeitet man mit dem Hintergrundvideo

Das Support-Team stellt Ihnen das neue Tutorial vor, das zeigt, wie man mit dem Hintergrundvideoin JS Animated Vorlagen arbeitet.

Wenn es in Ihrer Vorlage ein Hintergrundvideo gibt, können Sie es durch ein anderes Video oder Bild ersetzen:

1. Verbinden Sie sich mit FTP oder Dateimanager im Hosting Control Panel.

2. Öffnen Sie den Ordner video. Hier sehen Sie 3 Videos und 3 Bilder.

3. Ihr Video müssen Sie auch in 3 Formaten hochladen: video.ogv, video.mp4 und video.webm damit es korrekt in allen Browsern dargestellt werden kann. Wenn Sie das Video nur in einem Format haben, können Sie dann andere Formate mit Hilfe von verschiedenen Video Convertern, zum Beispiel, dieses kostenlose Werkzeug Any Video Converter erstellen.

4. Laden Sie Ihr Video auf den Server hoch, nachdem Sie dieses Video in allen Formaten erstellen haben, indem Sie Dateien aus der Demoversion Ihrer Vorlage ersetzen. Nachdem Sie die Dateien ersetzt haben, wird Ihr Video auf der Webseite dargestellt.

5. Wenn Sie das Video durch ein statisches Bild ersetzen möchten, sollen Sie dann nur die Dateien von dem Ordner video auf dem Server entweder umbenennen oder löschen. Wenn das Video nich hochgeladen werden kann, werden automatisch Bilder video.gif, video.png und video.jpg dargestellt. Achten Sie, bitte, darauf, dass auf mobilen Geräten nur das Bild und nicht das Video dargestellt wird: in Safari auf iOS (dies gilt für alle Geräte, einschließlich der iPad), weil der Benutzer den bezahlten Mobilfunk pro Dateneinheit nutzen kann. Aus diesem Grund wurden Preload und automatische Wiedergabe standardmäßig deaktiviert.

6. Um die Optionen des Videos zu ändern, sollen Sie die Datei script.jsaus dem Ordner /js bearbeiten. Finden Sie diesen Code:

   		/* Video library 
   		========================================================*/ 
   		include('js/jquery.vide.js'); 
   		$(document).ready(function () { 
   		$("#home").vide("video/video",{ 
   		volume: 1, 
   		playbackRate: 1, 
   		muted: true, 
   		loop: true, 
   		autoplay: true, 
   		position: "50% 50%" // Alignment 
   		}); 
   		$('#home video').fadeOut(0).delay(200).fadeIn(800); 
   		});
   		

   Hier können Sie das Volumen des Videos auswählen. Dazu können Sie festlegen, ob es automatisch abgespielt, wiederholt usw. werden muss.

Sie können auch das ausführliche Video-Tutorial nutzen: