**** TEN WPIS ZOSTAŁ NAPISANY W 2017 ROKU I WYMIENI TECHNOLOGIĘ, KTÓRA ZOSTAŁA PRZESTARZAŁE ****
W poście na początku tego roku pokazaliśmy, jak łatwiej korzystać z filmów w witrynie Squarespace – jako wideo w tle lub jako osadzony klip.
W dzisiejszym poście przedstawiamy najlepszy sposób zbierania filmów od użytkowników i odwiedzających witrynę umieszczając rejestrator wideo i widżet do przesyłania bezpośrednio na swojej stronie.
Robimy to za pomocą API kamery HTML5 Clipchamp – narzędzia do przechwytywania wideo, które można wykorzystać na dowolnej stronie internetowej, na przykład do zbierania referencji wideo od klientów, jeśli prowadzisz sklep internetowy, do przyjmowania zgłoszeń wideo do konkursów lub aby otrzymywać komentarze wideo od czytelników na swoim blogu.
Postępując zgodnie z naszym samouczkiem, instalacja w witrynie Squarespace jest prosta bez wymaganej wiedzy eksperckiej.
Tworzenie i dodawanie rejestratora wideo Squarespace
Możesz zdecydować, czy odwiedzający mają nagrywać kamerą internetową bezpośrednio w Twojej witrynie, wybierać i przesyłać filmy, które już mają na swoim urządzeniu, czy też możesz dać im obie opcje, aby mogli wybrać tę, którą preferują.
Dzięki unikalnej technologii, którą zbudowaliśmy, wszystkie pliki wideo są przesyłane bezpośrednio z urządzeń użytkowników do wybranego przez Ciebie docelowego miejsca przechowywania w chmurze bez przechodzenia przez naszą infrastrukturę. Pomaga to chronić prywatność Twoją i odwiedzających.
Jeśli chodzi o miejsce docelowe przesyłania, filmy mogą być wysyłane na Twoje konto YouTube, Dropbox, Dysk Google, Amazon S3 lub Microsoft Azure.
Aby móc wyświetlać klipy w Twojej witrynie po przesłaniu ich przez inne osoby, przesyłając je do YouTube ma to największy sens, ponieważ możesz je osadzić stamtąd na ekranach administracyjnych Squarespace.
A teraz oto kroki, aby zainstalować rejestrator wideo Squarespace:
1) Zaloguj się do interfejsu administratora swojej witryny
Jest to wymagane, ponieważ musisz utworzyć nową próbną stronę w późniejszym kroku i skopiować kod do kodu HTML tej strony.
2) W drugiej karcie przeglądarki zarejestruj się, aby uzyskać bezpłatną wersja próbna API wideo Clipchamp
Rejestracja konta próbnego naszego interfejsu API jest wymagana, aby uzyskać unikalny klucz interfejsu API, którego będziesz potrzebować w kolejnym kroku, oraz włączyć cel przesyłania filmów, które otrzymasz. Nie potrzebujesz karty kredytowej, aby się zarejestrować, a okres próbny możesz anulować w dowolnym momencie.
3) Ustaw YouTube jako cel przesyłania, aby wysyłać filmy użytkowników do
Po otwarciu konta próbnego w ustawieniach interfejsu API na https://util.clipchamp.com/en/api-setup/integrations kliknij YouTube i połącz API Clipchamp ze swoim kontem YouTube, aby filmy przesłane przez użytkowników mogły zostać przesłane na Twój kanał lub określoną playlistę.
4) Następnie przejdź do https://util.clipchamp.com/en/api-setup/install
Na tej stronie znajdują się 2 fragmenty kodu – musisz skopiować oba fragmenty do Squarespace (kroki 5 i 6 poniżej), aby osadzić kamerę internetową i uploader na swojej stronie. Możesz zignorować instrukcje wymienione na samej stronie, ponieważ dotyczą one witryn innych niż Squarespace.
5) Utwórz nową stronę w Squarespace i otwórz „Nagłówek strony Wstrzykiwanie kodu”
We wstrzyknięciu kodu nagłówka strony wklej fragment kodu z pierwszej sekcji strony Clipchamp (tej, która zawiera klucz API) w następujący sposób:
6) Następnie umieść drugi fragment kodu w blok kodu w „Treści strony”:
Edytuj zawartość strony,
i dodaj nowy blok kodu na stronie, na której chcesz, aby pojawił się przycisk wideo.
W bloku kodu wstaw drugi (większy) fragment kodu skopiowany z https://util.clipchamp.com/en/api-setup/install.
Upewnij się, że wybrałeś następujące ustawienia w bloku kodu:„HTML” w menu rozwijanym po prawej stronie i odznacz „Źródło wyświetlania” po lewej stronie. Po dodaniu fragmentu kodu kliknij „Zastosuj”.
7) Następnie zapisz i wyświetl podgląd strony, na której osadziłeś kod Clipchamp
Jeśli fragmenty zostały dodane i zapisane poprawnie, strona podglądu powinna pokazywać nowy przycisk nagrywarki wideo Squarespace. Na naszej przykładowej stronie przycisk wygląda tak:
8) W ostatnim kroku autoryzuj domenę swojej witryny w ustawieniach Clipchamp
Aby przycisk działał, musisz dodać domenę przycisku do białej listy w ustawieniach Clipchamp API w następujący sposób:
Skopiuj adres URL swojej witryny i dodaj go do listy autoryzowanych domen w ustawieniach interfejsu API Clipchamp na https://util.clipchamp.com/en/api-setup/domains.
W naszym przykładzie domeny, które umieściliśmy na białej liście, to clipchamp-test.squarespace.com i www.clipchamp-test.squarespace.com . Upewnij się, że wstawiasz własną domenę i opcjonalnie jej www. subdomena.
Po dodaniu adresów URL do listy ponownie załaduj podgląd swojej strony Squarespace. Rejestrator wideo i przycisk do przesyłania na stronie są teraz gotowe do użycia, dzięki czemu odwiedzający mogą zacząć wysyłać nagrania i inne filmy.
Wyświetlanie przesłanych filmów wideo w Twojej witrynie
Jeśli chcesz używać filmów przesłanych do Ciebie przez innych, które znajdują się teraz na Twoim kanale YouTube, do wyświetlania ich w Twojej witrynie, zapoznaj się z poniższymi instrukcjami w pomocy Squarespace, aby dowiedzieć się, jak umieszczać filmy z YouTube.
Squarespace KB o umieszczaniu filmów wideo
Wniosek
To są wszystkie wymagane kroki, aby zbierać filmy, jeśli używasz Squarespace. Pamiętaj, że podsumowaliśmy je również w krótkim artykule pomocy na ten temat dla każdego, kto już zarejestrował konto API wideo Clipchamp.
Nasz artykuł w bazie wiedzy zawiera szereg sugestii dotyczących rozwiązywania problemów na wypadek problemów z prawidłowym wyświetlaniem naszego przycisku wideo w witrynie. Opisuje również opcję automatycznego osadzenia rejestratora wideo na każdej stronie witryny i zawiera przykładowy kod, aby dostosować rejestrator do własnych upodobań.
Widżet aparatu oferuje szeroki zakres opcji dostosowywania, na przykład możesz zmienić jego markę na swój własny, dostosować kolory i inne elementy stylu, a także szereg ustawień związanych z wejściowymi i wyjściowymi wideo.
Nie omówiliśmy tych opcji eksperckich w tym artykule, jednak możesz przyjrzeć się bliżej dokumentacji interfejsu API, aby zobaczyć, które z jego parametrów chcesz dodać do rejestratora wideo Squarespace. Po prostu dodaj dowolne opcje do fragmentu kodu wstawionego do bloku kodu w kroku 6.
Chociaż ten post dotyczy odbierania filmów w Squarespace, opisana przez nas metoda działa również w celu uruchomienia rejestratora na innych platformach do tworzenia witryn i systemach CMS – na przykład napisaliśmy również samouczek dla Wix. Głównym wymaganiem dla wszystkich z nich jest umożliwienie dodawania niestandardowego kodu do stron w ustawieniach administratora witryny.