UczymyOnline - Jak osadzić wideo na stronie płatnego kursu
Jak osadzić wideo na stronie płatnego kursu w CMS WordPress?

Jak osadzić wideo na stronie płatnego kursu w CMS WordPress?

W poprzednim tygodniu pokazałam w jaki sposób można osadzić wideo na stronie kursu, znajdującego się w systemie CMS WordPress. Oczywiście jest to jeden z wielu sposobów, który można zastosować w przypadku darmowych kursów. Jeśli mamy parę plików wideo (nie za dużych…) można pominąć kwestie hostingu wideo, natomiast jeśli planujemy wprowadzić płatne kursy + parę GB danych na wideo, należy koniecznie rozważyć zewnętrzną platformę. Hosting Vimeo jest chyba najbardziej popularnym systemem dla prowadzenia kursów wideo. Korzysta z niego większość ekspertów kursów online. Tymczasem, chciałabym Ci pokazać mniej popularne podejście do tematu, a mianowicie wykorzystanie Amazon S3 jako hosta plików wideo.

Dlaczego Amazon? Po części z przyzwyczajenia, gdy było mi potrzebne do testów live streamingu i VOD. Poza tym może to być tańsza alternatywa dla niektórych hostingów wideo, które pobierają stałe opłaty, bez względu na stopień wykorzystania przestrzeni dyskowej i łącza.

Z góry ostrzegam, że metoda nie należy do najłatwiejszych, ale jest do zjedzenia 🙂 Dlatego polecam osobom, które nie boją się wyzwań technologii 🙂

Rejestracja konta w Amazon Web Services (AWS)

Po pierwsze: należy się zarejestrować na stronie https://console.aws.amazon.com. Amazon oferuje pierwsze 12 m-cy wykorzystania usługi za darmo do 5GB przestrzeni dyskowej, 20.000 zapytań wykonywanych metodą GET oraz 2.000 zapytań wykonywanych metodą PUT. Po wygaśnięciu dostępu darmowego płacisz w systemie pay-as-you-go – czyli tyle, ile zużyjesz w danym miesiącu. Rok to szmat czasu na wykonanie testów i sprawdzenie czy takie rozwiązanie jest dla Ciebie, czy też nie.

Amazon S3 Free Tier
Amazon S3 Free Tier

W polu E-mail or mobile number wpisujemy adres e-mail lub numer telefonu, a następnie zaznaczamy I am a new user. Z adresem e-mail/telefonem będzie powiązana usługa darmowego dostępu. Wybieramy Sign in using our secure server … zostaniemy przeniesieni na stronę, gdzie podajemy dane kontaktowe i hasło do konta.

Rejestracja w usłudze Amazon AWS
Rejestracja w usłudze Amazon Web Services
Dane logowania do konta Amazon AWS
Dane logowania do konta Amazon Web Services

Po uzupełnieniu tych informacji zostaniemy przeniesieni do formularza, gdzie trzeba podać dokładne dane: nazwa firmy, adres (ulica, kod pocztowy, miasto, kraj), numer telefonu. Zaznaczamy AWS Customer Agreement i zatwierdzamy przyciskiem Create Account & Continue. W kolejnym kroku trzeba będzie podać informacje związane z płatnościami. Amazon nie będzie pobierać opłat przez 1 rok używania usługi, ale informacje o karcie kredytowej są wymagane.

Amazon Web Services - informacje o płatnościach
Amazon Web Services – informacje o płatnościach

Pozostaje jeszcze etap weryfikacji. Aby pomyślnie przejść przez ten etap należy podać prawidłowy numer telefonu. Na ten numer oddzwoni automat, który poprosi Cię o podanie numeru PIN, który pokaże się w oknie Call in progress. Podany PIN należy wpisać na klawiaturze telefonu – system rozpozna, czy został wprowadzony prawidłowy PIN i strona automatycznie się odświeży.

Amazon Web Services - weryfikacja użytkownika na numerze PIN
Amazon Web Services – weryfikacja użytkownika na numerze PIN

Jeśli otrzymasz informację o poprawnej weryfikacji możesz przejść do wyboru planu wsparcia technicznego. Zostawiasz Basic (Free) i przechodzisz dalej klikając Continue.

Amazon Web Services - wybór wsparcia technicznego
Amazon Web Services – wybór wsparcia technicznego

Na tym kończy się etap rejestracji konta. Wybierasz Sign In to the Console i możesz już zacząć konfigurować usługę.

Amazon Web Services - konsola
Amazon Web Services – konsola

Wygląda skomplikowanie, ale w rzeczywistości nie jest to taka maskara 🙂

Amazon S3 – tworzenie komory (bucket)

Rozwijając zakładkę Services wyświetlisz listę dostępnych usług. Wybierasz S3 z sekcji Storage.

Amazon Web Services - wybór usługi S3
Amazon Web Services – wybór usługi S3

Następnie musisz utworzyć bucket, tzw. komorę, która może być przechowywana w jednym z kilkunastu regionów. W tej komorze będziesz składować swoje dane. Wybierasz Create bucket, a następnie podajesz nazwę komory (Bucket name), która musi być unikalna oraz region, np. EU (Frankfurt).

Amazon S3 - tworzenie nowej komory (bucket)
Amazon S3 – tworzenie nowej komory (bucket)

Przechodząc dalej możesz włączyć logowanie dostępu do zasobów lub tagowanie, które pozwoli śledzić koszty – na tym etapie nie jest to jednak potrzebne. W zakładce Set permissions również zostawiamy konfigurację bez zmian i zatwierdzamy przyciskiem Create bucket. Nowo stworzony bucket pojawi się na liście komór.

Amazon S3 - lista utworzonych komór
Amazon S3 – lista utworzonych komór

Zakładamy nowego użytkownika

Przechodzisz z powrotem do zakładki Services i tym razem wybierasz usługę IAM (Identity & Access Management). Z menu wybierasz Users, a następnie Add user.

Amazon S3 - dodawanie nowego użytkownika
Amazon S3 – dodawanie nowego użytkownika

Na karcie Set user details podajesz nazwę użytkownika (możesz założyć kilku…), a następnie jako typ dostępu ustawiasz Programmatic access. Nie chcemy, żeby ten użytkownik logował się do konta AWS, więc ostatniej opcji nie zaznaczasz.

Amazon S3 - szczegóły użytkownika
Amazon S3 – szczegóły użytkownika

Następnie przechodzisz do konfiguracji uprawnień. Wybierasz Attach existing policies directly, a z listy dostępnych polityk zaznaczasz AmazonS3ReadOnlyAccess – dzięki temu użytkownik, będzie miał dostęp do plików składowanych w komorze kursy-premium, ale wyłącznie w trybie do odczytu. Nie dajemy mu możliwości modyfikowania, czy usuwania zasobów.

Amazon S3 - uprawnienia dostępu (tylko do odczytu)
Amazon S3 – uprawnienia dostępu (tylko do odczytu)

W następnym kroku zostaniesz poproszony o zweryfikowanie ustawień. Wybierasz Create user… Powinien pojawić Ci się ekran, gdzie będziesz mieć możliwość skopiowania lub zapisania do pliku CSV kluczy dostępu. Koniecznie skopiuj je, ponieważ klucza secret nie będziesz mógł podejrzeć kolejny raz.

Amazon S3 - access key, secret key
Amazon S3 – access key ID, secret access key

Klucze Access key ID oraz Secret access key kopiujesz do konfiguracji playera FV w CMS WordPress. Tutaj jest również ustawiona domyślna wartość wygasania linków (5 minut). Za każdym razem gdy wgrywasz film, FV Player sprawdza długość klipu. Czas wygasania linku powinien być na tyle długi, aby film został prawidłowo zbuforowany. Jeśli z jakichkolwiek przyczyn ta diagnostyka się nie powiedzie, uwzględniana jest wartość pola Default Expiration Time (link wygaśnie po 5 minutach bez względu na to jak długi jest film).

Amazon S3 - ustawienia hostingu video we wtyczce FV na CMS WordPress
Amazon S3 – ustawienia hostingu video we wtyczce FV na CMS WordPress

Załadowanie filmu

Pozostaje tylko załadowanie na serwer Amazona, pliku z filmem. Przechodzisz do wcześniej założonej komory (bucket) i przyciskiem Upload wgrywasz plik z dysku.

Amazon S3 - wgrywanie pliku na serwer
Amazon S3 – wgrywanie pliku na serwer

Film pojawi się na liście plików:

Amazon S3 - lista plików
Amazon S3 – lista plików

Gdy wejdziesz w szczegóły pliku, będziesz mieć możliwość skopiowania bezpośredniego linku.

Amazon S3 - link do pliku wideo
Amazon S3 – link do pliku wideo

Gdy chcesz dodać do strony swój film (wgrany wcześniej na serwer Amazona), kopiujesz link i wklejasz go w polu Video playera FV.

Amazon S3 - dodanie wideo na stronie kursu
Amazon S3 – dodanie wideo na stronie kursu

Czas sprawdzić jak działa!

Gdy przejdę na stronę testową kursu, czyli tam gdzie osadziłam swój film z Amazona, klip odtwarza mi się poprawnie.

Amazon S3 - odtwarzanie filmu
Amazon S3 – odtwarzanie filmu

Teraz wystarczy podejrzeć źródło strony i sprawdzić jak wygląda link tymczasowy.

Amazon S3 - link tymczasowy
Amazon S3 – link tymczasowy

Jeśli go skopiuję i wkleję bezpośrednio do przeglądarki, film powinien również mi się odtworzyć (nie upłynęło jeszcze 5 minut…).

Amazon S3 - odtwarzanie filmu bezpośrednio w przeglądarce (z linku tymczasowego)
Amazon S3 – odtwarzanie filmu bezpośrednio w przeglądarce (z linku tymczasowego)

Jeśli odczekam kilka minut i odświeżę kartę przeglądarki, filmu już nie zobaczę – konieczne jest ponowne wygenerowanie linku. Dzięki takiemu zabezpieczeniu, użytkownik nie będzie mógł nikomu udostępnić bezpośredniego linku do wideo.

Amazon S3 - zabroniony dostęp do zasobów (link wygasł)
Amazon S3 – zabroniony dostęp do zasobów (link wygasł)

Zdaję sobie sprawę z tego, że cała konfiguracja i proces rejestracji po stronie Amazona jest dość skomplikowany. Na pocieszenie dodam, że wystarczy go przejść tylko jeden raz, później jest to już tylko wgrywanie plików i kopiowanie gotowych linków.

3 komentarze o “Jak osadzić wideo na stronie płatnego kursu w CMS WordPress?”

  1. Świetny wpis Pani Marzeno! To jest właśnie to czego potrzebowałem, aby ulepszyć swoje video wykłady na stronie. Jednak należy jeszcze dodać, że filmy wgrywane na dysk S3 NIE mogą mieć spacji w swojej nazwie! Doszedłem dziś do tego po kilku godzinach znajdywania przyczyny niedziałających filmików. Niestety nie było to dla mnie oczywiste.
    Strona niezwykle przydatna i na pewno będę tu wchodził po więcej 😉

    1. Słuszna uwaga – dodam tą informację do wpisu. Dziękuję 🙂
      Tak, rzeczywiście nazwy ze spacją mogą robić problemy. Nie zwróciłam na to uwagi, bo mam takie przyzwyczajenie jeszcze z czasów pracy na starych systemach, że jak zapisuję plik, to zawsze bez spacji i bez polskich liter 🙂

  2. Ciekawy wpis, zaintrygowała mnie ta platforma, pracuję teraz nad projektem szkoleniowym i zastanawiam się , bo tego nie mogę się dogrzebać, jak będą wyglądały opłaty, np jeśli film ma 450mb i obejrzy go 10 osób czyli mam 4,5gb to ile mnie to wyniesie? Bo znalazłem info nt cen First 50 TB / Month $0.023 per GB czyli puki nie przekrocze 50tb to będę płacił 0.023 za gb przesyłu czy składowania? czy sumy jednego i drugiego?? 🙂 w założeniu jeśłi mam 5gb filmów i obejrzy je 100 osób to wychodzi mi 11 usd miesięcznie? czy tak? z góry dziękuję za informacje 🙂

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Privacy Policy Settings