In einem vorherigen Post haben wir gezeigt, wie man Videos einfacher auf Squarespace Webseiten benutzen kann – entweder als Hintergrundvideo oder als eingebetteten Clip.

Im heutigen Post zeigen wir dir die einfachste Art, um Videos von deinen Nutzern und Webseitenbesuchern zu sammeln, indem du einen Videorekorder direkt auf deiner Seite einfügst.

Wir tun dies mit Hilfe der Clipchamp HTML5-Kamera-API – einem Tool zur Videoerfassung, das auf Webseiten genutzt werden kann, zum Beispiel um Videoreferenzen von deinen Kunden zu sammeln, wenn du einen Onlineshop hast, um Videoeinsendungen von Nutzern zu akzeptieren oder um Videokommentare von Lesern auf deinem Blog zu erhalten.

Mit diesem Tutorials ist es einfach, den Videorekorder und -uploader ohne jegliches Vorwissen auf deiner Squarespace Seite zu installieren.

Einen Squarespace-Videorekorder erstellen und installieren

Du kannst entscheiden, ob deine Besucher entweder direkt mit ihrer Webcam auf deiner Seite Clips aufnehmen sollen oder ob sie auch Dateien, die sie bereits auf ihrem Gerät haben, hochladen können. Du kannst ihnen auch beide Optionen offen lassen.

Aufgrund unserer Technologie werden alle Videodateien direkt vom Gerät des Nutzers zu deinem Cloud-Speicher geschickt, ohne durch unsere Server zu gehen. Dies dient dazu, deine Privatsphäre und die deiner Besucher zu schützen und ist bei keinem anderen Anbieter so möglich.

 

squarespace-video-recorder

 

Nutzer-Videos können zu YouTube, Dropbox, Google Drive, Amazon S3 oder Microsoft Azure hochgeladen werden.

Um die Clips auf deiner Webseite anzeigen zu können, nachdem Leute sie auf deine Webseite hochgeladen haben, ist es am sinnvollsten, sie an YouTube zu senden, da du sie von dort aus über die Squarespace Administration einbetten kannst.

Die folgenden Schritte sind nötig, um einen Squarespace-Videorekorder einzufügen:

1) Logge dich in der Administration deiner Webseite ein

Dies ist erforderlich, da du später eine neue Seitenvorlage erstellen musst und etwas HTML-Code auf diese Seite kopieren musst.

 

Squarespace login

 

2) Registriere dich in einem zweiten Browsertab für die kostenlose Testversion der Clipchamp Video-API

Die Registrierung für einen Testaccount unserer API ist erforderlich, um deinen API-Schlüssel zu erhalten. Dieser wird in einem der folgenden Schritte gebraucht. Du musst zudem ein Upload-Ziel für die Videos, die du erhältst, einrichten. Für die Anmeldung ist keine Kreditkarte erforderlich und du kannst die Testversion jederzeit kündigen.

 

register-clipchamp-trial

 

3) Lege YouTube als Upload-Ziel fest, um Nutzervideos dort zu sammeln

Nachdem du einen Testaccount eröffnet hast, gehe zu den API-Einstellungen unter https://util.clipchamp.com/de/api-setup/integrations, klicke auf YouTube und verbinde die Clipchamp API mit deinem YouTube Account, sodass Videos, die deine Nutzer einsenden, auf deinen Kanal oder in eine Playliste hochgeladen werden können.

 

set-youtube-uploads

 

4) Gehe dann auf https://util.clipchamp.com/de/api-setup/install

Auf dieser Seite gibt es 2 Codeschnipsel – du musst beide Snippets in Squarespace kopieren (siehe Schritte 5 und 6 unten), um den Webcamrekorder und Videohochlader auf deiner Seite einzubetten. Du kannst die Anweisungen ignorieren, die auf der Seite selbst stehen, da sie für Webseiten außerhalb von Squarespace gelten.

 

clipchamp-api-code

 

5) Erstelle eine neue Seite auf Squarespace und öffne „Code im Header der Seite einfügen“

Unter Code im Header der Seite einfügen kopiere den Codeschnipsel aus dem ersten Bereich der Clipchamp-Seite (der, der deinen API-Schlüssel beinhaltet) wie folgt:

 

webcam-video-squarespace

 

6) Dann kopiere den zweiten Codeschnipsel in einen a Codeblock im „Seiteninhalt“ deiner Seite:

 

Bearbeite den Seiteninhalt,

squarespace-video-camera

 

und füge einen neuen Codeblock auf der Seite hinzu, auf der ein Videobutton erscheinen soll.

 

add-code-block

 

squarespace-html5-video

 

Füge im Codeblock den zweiten (größeren) Codeschnipsel ein, den du von https://util.clipchamp.com/de/api-setup/install kopiert hast.

 

squarespace-html5-camera

 

Stelle sicher, die folgenden Einstellungen um Codeblock zu wählen: „HTML“ im Dropdown-Menü rechts und entferne die Markierung von „Quelle anzeigen“ links. Klicke auf „Anwenden“, wenn du den Codeschnipsel eingefügt hast.

 

7) Speichere dann die Seite, auf der du den Clipchamp-Code eingebettet hast und sieh sie dir an

Wenn du den Code hinzugefügt und korrekt gespeichert hast, sollte die Vorschau deinen neuen Button des Squarespace-Videorekorders anzeigen. Auf unserer Beispielseite sieht der Button so aus:

 

squarespace video recorder - page preview

 

Squarespace video recording button

 

8) Letzter Schritt – autorisiere deine Webseitendomain in den Clipchamp-Einstellungen

Damit der Button funktioniert, musst du die Domain deiner Squarespaceseite in deinen Clipchamp API-Einstellungen wie folgt freigeben:

Kopiere die URL deiner Webseite und füge sie zur Liste der autorisierten Domains in deinen Clipchamp API-Einstellungen unter https://util.clipchamp.com/de/api-setup/domains hinzu.

In unserem Beispiel waren die Domains, die wir freigegeben haben clipchamp-test.squarespace.com und www.clipchamp-test.squarespace.com. Stelle sicher, dass du deine eigene Domain eingibst und optional ihre www. Unterdomain.

 

authorize domain in the Clipchamp API settings

 

Nachdem du die URL(s) zur Liste hinzugefügt hast, lade die Vorschau deiner Squarespace-Seite neu. Der Button des Videorekorders und Uploaders ist nun zur Nutzung bereit, sodass deine Besucher beginnen können, Aufnahmen und andere Videos zu senden.

 

squarespace-video-recorder

 

Eingesendete Videos auf deiner Seite anzeigen

Um hochgeladene Videos, die sich in deinem YouTube-Kanal befinden, auf deiner Webseite anzuzeigen, schaue dir bitte die folgenden Anweisungen der Squarespace-Hilfe an, um zu erfahren, wie du YouTube-Videos einbetten kannst.

 

Squarespace KB about embedding videos

 

Fazit

Dies sind alle notwendigen Schritte, um Videos von Nutzern und Seitenbesuchern einzusammeln, wenn deine Webseite auf Squarespace gebaut ist. Wir haben die Schritte auch in einem kurzen Hilfsartikel über das Thema zusammengefasst.

Das Kamera-Widget beinhaltet eine breite Palette an Anpassungsoptionen, du kannst zum Beispiel das Branding zu deinem eigenen ändern, die Farben und andere Stilelemente sowie eine Reihe an Einstellungen anpassen, die Einfluss auf die Videoeingabe und -ausgabe haben.

Wir haben diese Parameter nicht im vorliegenden Artikel abgedeckt, du kannst aber gerne einen Blick auf die API-Dokumentation werfen, um zu sehen, welche Parameter du zu deinem Squarespace-Videorekorder hinzufügen möchtest. Kopiere einfach jegliche Optionen in deinen Codeschnipsel ein, den du in den Codeblock in Schritt 6 eingefügt hast.

Obwohl sich dieser Post um das Erhalten von Videos auf Squarespace dreht, funktioniert die beschriebene Methode auch, um den Rekorder auf anderen Plattformen zur Webseitenerstellung und CMSs zu nutzen – wir haben zum Beispiel auch ein Tutorial für Wix geschrieben. Bei allen ist Grundvoraussetzung, dass du benutzerdefinierten Code über die Administrationseinstellungen deiner Seite einfügen können musst.