**** DETTA INlägg SKREVES 2017 OCH NÄMNAR TEKNIK SOM SEDAN HAR UTSATT ****
I ett inlägg tidigare i år visade vi dig hur du enklare kan använda videor på din Squarespace-webbplats – antingen som bakgrundsvideo eller som ett inbäddat klipp.
I dagens inlägg leder vi dig genom det bästa sättet att samla in videor från dina användare och webbplatsbesökare genom att bädda in en videobandspelare och uppladdningswidget direkt på din webbplats.
Vi gör detta med hjälp av Clipchamp HTML5 camera API – ett videoinsamlingsverktyg som kan användas på alla typer av webbplatser, till exempel för att samla in videorekommendationer från dina kunder om du driver en onlinebutik, för att acceptera videobidrag för tävlingar eller för att få videokommentarer från läsare i din blogg.
Efter vår handledning är det enkelt att installera på din Squarespace-webbplats utan någon expertkunskap som krävs.
Skapa och lägga till en Squarespace-videoinspelare
Du kan bestämma om dina besökare antingen ska spela in med sin webbkamera direkt på din webbplats, välja och ladda upp videor som de redan har på sin enhet, eller så kan du också ge dem båda alternativen så att de kan välja den de föredrar.
På grund av den unika tekniken vi byggt skickas alla videofiler direkt från dina användares enheter till ett molnlagringsmål som du väljer utan att gå igenom vår infrastruktur. Detta hjälper till att skydda din och dina besökares integritet.
När det gäller en uppladdningsdestination kan videor skickas till ditt YouTube-, Dropbox-, Google Drive-, Amazon S3- eller Microsoft Azure-konto.
För att kunna visa klippen på din webbplats efter att folk laddat upp dem till dig, låta skicka dem till YouTube är mest meningsfullt eftersom du kan bädda in dem därifrån via Squarespaces adminskärmar.
Och nu, här är stegen för att få din Squarespace-videobandspelare på plats:
1) Logga in på din webbplats administratörsgränssnitt
Detta krävs eftersom du måste skapa ett exempel på en ny sida i ett senare steg och kopiera lite kod till HTML-koden på den här sidan.
2) På en andra webbläsarflik, registrera dig för en gratis testversion av Clipchamp video API
Registrering för ett testkonto för vårt API krävs för att få din unika API-nyckel, som du behöver i ett efterföljande steg och för att aktivera ett uppladdningsmål för videor du kommer att få. Du behöver inget kreditkort för att registrera dig och du kan avbryta provperioden när som helst.
3) Ställ in YouTube som uppladdningsmål att skicka användarvideor till
Efter att ha öppnat ett testkonto, i API-inställningarna på https://util.clipchamp.com/en/api-setup/integrations, klicka på YouTube och anslut Clipchamp API till ditt YouTube-konto så att videor som dina användare skickar kan laddas upp till din kanal eller en specifik spellista.
4) Gå sedan till https://util.clipchamp.com/en/api-setup/install
På den här sidan finns det två kodavsnitt – du måste kopiera båda kodavsnitten till Squarespace (steg 5 och 6 nedan) för att bädda in webbkamerainspelaren och uppladdaren på din webbplats. Du kan ignorera instruktionerna som nämns på själva sidan eftersom de gäller för webbplatser som inte tillhör Squarespace.
5) Skapa en ny sida i Squarespace och öppna sidhuvudet Kodinjektion”
I sidhuvudets kodinjektion klistrar du in kodavsnittet från den första delen av Clipchamp-sidan (den som innehåller din API-nyckel) enligt följande:
6) Lägg sedan in det andra kodavsnittet i ett kodblock i din sidas ”Sidinnehåll”:
Redigera sidans innehåll,
och lägg till ett nytt kodblock på sidan där du vill att en videoknapp ska visas.
I kodblocket infogar du det andra (större) kodavsnittet som du kopierade från https://util.clipchamp.com/en/api-setup/install.
Se till att välja följande inställningar i kodblocket:"HTML" i rullgardinsmenyn till höger och avmarkera "Visningskälla" till vänster. Tryck bara på "Använd" när du har lagt till kodavsnittet.
7) Spara och förhandsgranska sedan sidan där du bäddade in Clipchamp-koden
Om utdragen har lagts till och sparats korrekt, bör förhandsgranskningssidan visa din nya Squarespace-videoinspelare-knapp. På vår exempelsida ser knappen ut så här:
8) Som sista steg, auktorisera din webbplats domän i Clipchamp-inställningarna
För att knappen ska fungera måste du vitlista domänen för knappen i dina Clipchamp API-inställningar enligt följande:
Kopiera webbadressen till din webbplats och lägg till den i listan över auktoriserade domäner i dina Clipchamp API-inställningar på https://util.clipchamp.com/en/api-setup/domains.
I vårt exempel var domänerna vi vitlistade clipchamp-test.squarespace.com och www.clipchamp-test.squarespace.com . Se till att infoga din egen domän och eventuellt dess www. underdomän.
När du har lagt till URL:erna i listan laddar du om förhandsvisningen av din Squarespace-sida. Videoinspelaren och uppladdningsknappen på sidan är nu redo att användas så att dina besökare kan börja skicka inspelningar och andra videor.
Visar inskickade videor på din webbplats
Om du vill använda videor som folk skickar till dig och som nu finns i din YouTube-kanal för att visa dem på din webbplats, läs följande instruktioner i Squarespace-hjälpen för hur du bäddar in YouTube-videor.
Squarespace KB om att bädda in videor
Slutsats
Det här är alla nödvändiga steg för att samla in videor om du använder Squarespace. Observera att vi också har sammanfattat dem i en kort hjälpartikel om ämnet för alla som redan registrerat sig för ett Clipchamp video API-konto.
Vår Knowledge Base-artikel innehåller ett antal felsökningsförslag om det skulle uppstå några problem med att få vår videoknapp att visas korrekt på din webbplats. Den beskriver också ett alternativ för att bädda in en videobandspelare på alla sidor på din webbplats automatiskt och innehåller exempelkod för att anpassa inspelaren efter dina önskemål.
Kamerawidgeten kommer med ett brett utbud av anpassningsalternativ, till exempel kan du ändra dess varumärke till ditt eget, justera färger och andra stilelement samt ett antal inställningar relaterade till in- och utmatningsvideor.
Vi har inte täckt dessa expertalternativ i den här artikeln, men du är välkommen att ta en närmare titt på API-dokumentationen för att se vilka av dess parametrar du vill lägga till i din Squarespace-videobandspelare. Lägg bara till valfria alternativ i kodavsnittet som du infogade i kodblocket i steg 6.
Även om det här inlägget handlar om att ta emot videor i Squarespace, fungerar metoden vi beskrev också för att få inspelaren på plats på andra webbplatsbyggarplattformar och CMS – till exempel skrev vi också en handledning för Wix. Huvudkravet för dem alla är att du måste ha tillåtelse att lägga till anpassad kod på sidor i webbplatsens administratörsinställningar.