Video | Sitely-Dokumentation

Das Hinzufügen von Videos zu Ihrer Webseite ist sehr einfach, da das Videoelement alle wichtigen Aufgaben übernimmt. Fügen Sie das Element einfach zur Arbeitsfläche hinzu oder ziehen Sie eine MP4/MOV-Videodatei direkt auf die Arbeitsfläche. Wenn das Element platziert ist, sieht es so aus – dies ist der Video-Platzhalter.

Wenn Sie ein Video auf die Leinwand gezogen haben, sieht es wie ein Videoplayer aus, komplett mit seinem Posterbild. Jetzt müssen Sie nur noch die Player-Oberfläche gestalten und sie entsprechend Ihrer Webseite positionieren und skalieren.

Bei der Platzhalteroption müssen Sie dem Platzhalter eine Quelldatei hinzufügen, damit er wie ein Videoplayer aussieht. Dies geschieht über das vertraute Stil-Panel von Sitely.

Sie können aus einer Reihe von Videoquellen auswählen. Diese werden alle über die Dropdown-Optionen im Stil-Panel angezeigt. Mit den Optionen „Youtube“ und „Vimeo“ können Sie Videos von diesen beliebten Streaming-Plattformen einbetten. Sie müssen lediglich die URL oder ID des anzuzeigenden Videos eingeben. Wenn Sie die Option „Von Datenträger“ auswählen, können Sie eine Videodatei von Ihrem Laufwerk auswählen. Wenn Sie die Option „Von Netzwerkadresse“ auswählen, können Sie die URL einer Videodatei eingeben, die auf einem Server eines Drittanbieters gehostet wird.

Als Nächstes müssen Sie entscheiden, wo Sie Ihre Videodatei speichern möchten. Bei den Streaming-Optionen müssen Sie diese Entscheidung nicht treffen – das Video verbleibt auf dem Server und wird auf Ihre Webseite gestreamt. Wenn Sie jedoch ein Video von Ihrer lokalen Festplatte hinzufügen, haben Sie die Möglichkeit, das Video an seinem aktuellen Speicherort auf Ihrer Festplatte zu belassen oder es in die Sitely-Projektdatei einzubetten. Sie sollten das Video in das Projekt einbetten, wenn Sie zu einem späteren Zeitpunkt auf einem anderen Computer an Ihrer Webseite weiterarbeiten möchten oder wenn die Möglichkeit besteht, dass Ihre Videodatei an einen anderen Speicherort verschoben wird. Durch das Einbetten wird sichergestellt, dass die Datei für das Projekt immer zugänglich ist, aber Ihre Sitely-Projektdatei wird dadurch etwas größer.

Mit der Option „Poster Image“ können Sie eine Szene aus Ihrem Video auswählen, die als Posterbild fungieren soll. Wenn Sie lieber ein vollständig angepasstes Bild verwenden möchten, können Sie dieses weiter unten im Stil-Panel hinzufügen.

Im Abschnitt „Optionen“ des Stil-Panels können Sie festlegen, wie Ihr Video abgespielt wird und wie der Player für Ihre Website-Besucher aussehen soll.

Mit der Option „Automatisch starten“ wird Ihr Video abgespielt, sobald es auf die Seite geladen wurde. Wenn

diese Option einstellen, sollten Sie sich darüber im Klaren sein, dass das Video ohne Ton abgespielt wird (es wird automatisch stummgeschaltet). Mit der Option „Schleife“ wird das Video in einer Schleife abgespielt, sodass es nie aufhört zu spielen – wenn es das Ende erreicht, wird es wieder von vorne abgespielt. Mit der Option „Beim Scrollen abspielen“ wird das Video abgespielt, während der Benutzer durch die Seite scrollt – dies ist eine Art „Scrubber“-Option für Videos, die das Video beim Scrollen der Seite vorwärts bewegt.

Wenn Sie das Kontrollkästchen „Player-Steuerelemente“ aktivieren, können Sie Ihren Videoplayer maximal flexibel gestalten. Mit der Option „On Video“ wird ein vertrauter Videoplayer erstellt, bei dem alle Steuerelemente auf der Player-Oberfläche deutlich sichtbar sind. Sie können auswählen, welche Elemente der Steuerungsoberfläche für Benutzer sichtbar sind, und eine Akzentfarbe auswählen. Die andere Option, die Sie haben, ist die Verwendung der Option „Browser Built-In“. Hierbei wird die Gestaltung der Video-Benutzeroberfläche dem Browser des Benutzers überlassen. In diesem Abschnitt können Sie auch ein benutzerdefiniertes Posterbild hinzufügen, wenn Sie eines verwenden möchten.

Als Nächstes entscheiden Sie, wie Sie Ihr Video einbetten möchten. Die Optionen sind:

Direkte Einbettung: Hierbei wird das Video in seiner aktuellen Größe direkt in die Webseite eingebettet. Das Video kann auf der Seite abgespielt werden, indem einfach die Videosteuerung aktiviert wird.

Standbild + Einbetten: Dadurch wird ein Standbild auf der Seite erstellt, wobei das Video nur bei Mausklick geladen und aktiviert wird. Dadurch kann die anfängliche Ladezeit der Seite verbessert werden, aber der Videostart kann sich verzögern.

Standbild + In Lightbox einbetten: Dies ähnelt Standbild + Einbetten, außer dass der Videoplayer in einer Lightbox geöffnet wird, wenn auf das Standbild geklickt wird.

Anordnungsoptionen

Auf der Registerkarte „Anordnen“ rechts auf der Benutzeroberfläche finden Sie eine weitere Option, mit der Sie Videos auf kreativere Weise verwenden können. Sie können beispielsweise festlegen, dass ein Video die gesamte Seitenbreite einnimmt. Mit dieser Option wird das Video im Wesentlichen über die gesamte Breite eines Browserfensters angezeigt. Dies ist eine großartige Option, um Video-Header und Hero-Bereiche für Ihre Seiten zu erstellen.

So sieht ein Video mit voller Breite auf der Seite aus. Im Wesentlichen sieht das Video aus wie ein Hintergrundelement in einem breiten Feld. Bei dieser Verwendung hat das Video keine Steuerelemente – es ist so konzipiert, dass es automatisch und in einer Schleife abgespielt wird. Daher wird es stummgeschaltet, wenn es einen Soundtrack enthält. Das Video selbst erstreckt sich über die gesamte Breite des Browsers, während seine Höhe davon abhängt, wie du das Feld auf der Leinwand dimensionierst. Das Video wird nie verzerrt, sondern oben und unten abgeschnitten, sodass nur der sichtbare Teil des Kastens angezeigt wird.

Verstehen, wie die Hintergrundoption Videos anzeigt.

Die Dateigröße sollte klein gehalten werden – wählen Sie Videos, die sich für Schleifen eignen, und entfernen Sie alle Audiospuren. Idealerweise sollten Hintergrundvideos weniger als 10 MB groß sein.

Es ist möglicherweise nicht ratsam, Streaming-Dienste für die Bereitstellung von Hintergrundinhalten zu verwenden – insbesondere, wenn der Dienst dazu neigt, zusammen mit deinem Video Werbung zu liefern. Für die meisten Hintergrundvideos ist es besser, dein eigenes Video auf deinem eigenen Server zu hosten – verwende die Optionen „Von Festplatte“ oder „Netzwerkadresse“.

Ein Video als Seitenhintergrund festlegen

In manchen Situationen möchtest du vielleicht ein Video als Hintergrundelement für eine ganze Seite hinzufügen. Sitely erreicht dies über die Registerkarte „Seite“ auf der rechten Seite der Benutzeroberfläche. Scrolle einfach nach unten zum Abschnitt „Hintergrund“ der Registerkarte „Seite“ und wähle „Video“ als Hintergrundinhalt aus – du hast die gleichen Optionen für die Auswahl einer Quellvideodatei.

Ein Video als Seitenhintergrund festlegen

Wenn du ein Video als Hintergrundelement hinzufügst, wird das Video auf der Seite in voller Browserbreite platziert. Die Höhe wird proportional zum Seitenverhältnis des Videos festgelegt. Die tatsächliche Größe des Videos auf der Seite hängt also von der Breite des Browserfensters des Besuchers ab. Wenn die Seite gescrollt wird, wird auch das Video gescrollt, genau wie bei anderen Seitenelementen.

Wenn du möchtest, dass dein Video bei voller Browserhöhe und -breite an Ort und Stelle bleibt, aktiviere die Option „Feste Position“. Dadurch wird das verfügbare Browserfenster mit dem Videoinhalt abgedeckt und in seiner Position fixiert. Der Seiteninhalt wird beim Scrollen der Seite über das Video bewegt.

Erstellen animierter Elemente mit Videoclips

Manchmal kann es erforderlich sein, kleine animierte Elemente in eine Website zu integrieren, insbesondere wenn die vorhandenen Animationsoptionen von Sitely nicht ausreichen. Dies gilt insbesondere für Elemente wie kompakte animierte Anzeigen oder wirkungsvolle Überschriften, die im Internet und in den sozialen Medien häufig zu finden sind. Sitely ist zwar nicht als Videobearbeitungsanwendung konzipiert, bietet jedoch ein vielseitiges Videoelement, mit dem sich Videos nahtlos in Webseiten integrieren lassen.

Im Gegensatz zu anderen Web-Buildern bietet Sitely beim Einbetten eines Players in Ihre Webseite die Freiheit, sich nicht an Standard-Video-Seitenverhältnisse halten zu müssen. Das Videoelement passt sich mühelos an das Seitenverhältnis des darin enthaltenen Videos an. Wenn du also Videoelemente erstellen kannst, ist Sitely hervorragend für die Bearbeitung dieser Elemente geeignet.

Nehmen wir folgendes Beispiel: Stell dir eine Überschrift mit einem dynamisch wechselnden Wort in der Mitte vor. Um diesen Effekt zu erzielen, haben wir eine Videobearbeitungsanwendung wie das kostenlose und sehr empfehlenswerte CapCut verwendet. Im Wesentlichen haben wir eine Leinwand eingerichtet, die groß genug ist, um die beabsichtigte Textgröße für unsere Überschrift aufzunehmen. Nachdem wir den Text hinzugefügt und formatiert hatten, haben wir zusammen mit animierten Übergängen ein kleines MP4-Video erstellt. Dieses Video wurde dann mit Handbrake komprimiert, um es für das Web zu optimieren.

In Sitely haben wir die Überschrift mit Standardtext erstellt und das kleine Video nahtlos integriert. Das Endergebnis ist visuell ansprechend und dynamisch.

We Create Great

Websites with Sitely

Durch die Kombination von Standard-Sitely-Elementen wie Text, Kästchen, Symbolen und Videos kannst du deiner Seite ganz einfach etwas mehr Bewegung verleihen. Hier ist ein weiteres Beispiel.

Check

This

Out

And what about those story videos you see on Instagram etc? They can also be added to your web page to create a more engaging experience for your site visitors

IIn allen oben genannten Beispielen haben die Videos keinen Soundtrack, daher wurden sie auf automatische Wiedergabe und Schleife eingestellt. Wenn du beabsichtigst, Videoclips auf diese Weise zu verwenden, findest du hier einige allgemeine Regeln. Halte die Dateigrößen klein. Verwende die Option „Von Datenträger“ – diese Art von Clips eignet sich eindeutig nicht für die Bereitstellung über Videoportale. Sie können natürlich so eingestellt werden, dass sie von einem Netzwerkspeicherort bereitgestellt werden, wenn du deine Videos auf deinem Webserver gehostet hast. Schieß mit dieser Technik aber nicht über das Ziel hinaus – ein Übermaß kann deine Website-Besucher verärgern. Überlege dir also gut, ob du diese zusätzliche Animationsebene wirklich benötigst.