UczymyOnline - Jak osadzić wideo w kursie na WordPress?
Jak osadzić wideo na stronie kursu?

Jak osadzić wideo na stronie kursu w CMS WordPress?

Nie ma większego znaczenia jakiej wtyczki do tworzenia kursów używasz w swoim WordPressie. Jeśli dostępny jest edytor HTML, możesz bez problemu osadzać dowolne pliki multimedialne. Wtedy taki plik można odtwarzać bezpośrednio w oknie przeglądarki, bez konieczności pobierania i uruchamiania w programie systemowym. Chyba, że jest taka potrzeba, wtedy z pomocą specjalnej wtyczki, użytkownik będzie mieć możliwość zapisania pliku na własny dysk.

Jeżeli chodzi o osadzanie plików multimedialnych, WordPress udostępnia własne, wbudowane odtwarzacze. Można też korzystać ze specjalnych wtyczek. Z darmowych rozwiązań mogę Ci polecić wtyczkę FV Player. Jest to dość rozbudowany odtwarzacz wideo, którego możesz używać do odtwarzania plików z własnego serwera albo z serwerów Amazona. Player wspiera popularne formaty wideo typu MP4, WEBM, OGV, MOV lub FLV. Jeśli używasz plików MP4 to praktycznie masz 98% przeglądarek, które ten format obsłużą.

FV Flowplayer Video Player
FV Flowplayer Video Player

W takim razie jak osadzić wideo na stronie?

Po instalacji i aktywacji wtyczki, w oknie edytora wpisu (lekcji), obok przycisku Dodaj medium, powinien pojawić się przycisk FV player. Z pomocą tego przycisku wygeneruję shortcode dla mojego pliku *.mp4. Dla przypomnienia dodam, że shortcode to taki fragment kodu, który mogę umieścić w dowolnym miejscu strony i którego zadaniem jest wyświetlenie w określonym miejscu żądanej treści. W moim przypadku chodzi o wyświetlenie playera.

Shortcode FV Flowplayer Video Player
Shortcode FV Flowplayer Video Player

Wybieram Add Video, a następnie wybieram z biblioteki mediów właściwy film. Jeżeli nie ma go w bibliotece, przechodzę do zakładki Dodaj nowe i wczytuję swój film z dysku. Zatwierdzam przyciskiem Choose. Aplikacja automatycznie rozpozna długość trwania, rozmiar oraz rozdzielczość mojego filmu. Jeśli chciałabym w tym miejscu dodać plik w innym formacie to klikam Add another format. Pozostaje jeszcze tylko dodać planszę tytułową, czyli plik graficzny, który pojawi się na początku filmu, przed wciśnięciem przycisku Play. Jeśli nie wgram żadnej grafiki będzie po prostu czarne tło, co nie będzie zbyt ciekawie wyglądać.

FV Flowplayer Video Player - dodajemy plik
FV Flowplayer Video Player – dodajemy plik

Plansza tytułowa (Splash Image) powinna być wykonana w takiej samej rozdzielczości jak film – skoro wgrałam film w rozdzielczości 1920×1080 to mój plik (*.jpg, bądź *.png) również powinien mieć taki rozmiar.

FV Flowplayer Video Player - plansza tytułowa
FV Flowplayer Video Player – plansza tytułowa

Zamierzam w tym miejscu wstawić pojedynczy plik więc mogę po prostu nacisnąć Insert. Jeśli chciałabym dodać kolejny plik i utworzyć playlistę, wtedy wybieram przycisk „dodaj kolejny plik wideo do playlisty” (Add another video into playlist).

W edytorze pojawił mi się shortcode, który pozwoli mi wyświetlić player na stronie z lekcją:

[fvplayer src="http://test.iszkola24.pl/wordpress/wp-content/uploads/2017/03/Domena.mp4" splash="http://test.iszkola24.pl/wordpress/wp-content/uploads/2017/03/Domena-tytul.png" width="1920" height="1080"]

A jak prezentuje się na stronie? Sprawdźmy!

FV Flowplayer Video Player - jak osadzić wideo na stronie
FV Flowplayer Video Player – player na stronie kursu

Odtwarzacz wideo wypełnia całą szerokość strony mojej lekcji, natomiast zmieniając rozmiar okna przeglądarki, automatycznie dopasuje się do nowej szerokości. Responsywność odtwarzacza jest tutaj kluczowa.

Kolory odtwarzacza, jak i przyciski social media, przycisk osadzania kodu na innej stronie – te wszystkie elementy można zmienić w ustawieniach playera.

Ustawienia odtwarzacza

Przechodzę więc na stronę Ustawienia -> FV Player. W zakładce Setup znajdziemy sporo ustawień, ale tak naprawdę interesuje mnie tylko kilka.

FV Flowplayer Video Player - ustawienia odtwarzacza
FV Flowplayer Video Player – ustawienia odtwarzacza

Generalnie mamy do dyspozycji ustawienia dla osadzania odtwarzacza we wpisach, ustawienia globalne oraz ustawienia związane z kompatybilnością.

Jeżeli na platformie będziesz mieć jakichś użytkowników, którzy będą mieć uprawnienia do zarządzania treścią kursów to powinieneś zaznaczyć opcję Allow User Uploads. Dzięki temu użytkownik (trener/nauczyciel) będzie mógł osadzać pliki wideo w edytorze HTML konkretnej lekcji lub tematu. W tym samym miejscu można udostępnić kilka dodatkowych opcji przy konfigurowaniu odtwarzacza, np. Video Actions pozwoli na odtwarzanie wideo w pętli albo przekierowanie pod inny adres po zakończeniu odtwarzania. Autoplay rozpocznie automatycznie odtwarzanie wideo po załadowaniu strony, Mobile video pozwoli wgrać plik zoptymalizowany do wyświetlania na urządzeniach mobilnych, Speed button będzie kontrolował szybkość odtwarzania filmu, a Enable video lightbox pozwoli odtwarzać wideo w oknie pop-up. Jeśli włączymy niektóre z tych opcji to oknie FV playera powinny się nam pojawić dodatkowe zakładki.

FV Flowplayer Video Player - dodatkowe opcje
FV Flowplayer Video Player – dodatkowe opcje

Pojawiła się dodatkowa zakładka, która pozwoli dopasować indywidualne parametry odtwarzania filmu.

Weźmy np. ten sam klip wideo co wcześniej…, poniżej pojawiło się dodatkowe pole Mobile video – jeżeli miałabym plik zoptymalizowany pod urządzenia mobilne, to w tym miejscu go wgrywam. Potem kolejno: plansza tytułowa i opcje (Options). Jeśli chcę ukryć przycisk osadzania kodu na innej stronie, ustawiam Embedding w pozycji OFF. Jeśli chcę pokazać przyciski kontroli prędkości odtwarzania, Speed buttons ustawiam na Yes. Jeżeli film ma się odtwarzać w oknie popup ustawiam szerokość i wysokość tego okna, np. 1280×720.

FV Flowplayer Video Player - opcje osadzania we wpisie
FV Flowplayer Video Player – opcje osadzania we wpisie

Zatwierdzam zmiany i sprawdzam efekty.

Jeśli okno popup nie wyświetli się w takich wymiarach jak są podane w opcjach, najlepiej jest ustawić bezpośrednio w shortcode: szerokość (width) na 1280, a wysokość (height) na 720.

FV Flowplayer Video Player - player w oknie popup
FV Flowplayer Video Player – player w oknie popup

Wymiary są OK, przyciski sterowania prędkością – też.

Co jeszcze?

Można globalnie ukryć ikony social media oraz przycisk osadzania kodu na innej stronie. Domyślnie będą się pojawiać w każdym odtwarzaczu, dlatego należy przejść do konfiguracji Sitewide Flowplayer Defaults, a następnie zaznaczyć Disable Embed Button oraz Disable Sharing.

Można również umieścić domyślną planszę dla wszystkich filmów wideo (Splash Image). Jest to przydatne w momencie jeśli zapomni się dodać indywidualną planszę tytułową. Zamiast czarnego ekranu, wyświetli się domyślna grafika.

Można też włączyć automatyczne buforowanie filmu (buforowane będą dwa pierwsze filmy na stronie), dzięki czemu będą się szybciej wczytywać przy słabszych parametrach łącza internetowego.

Dla kursu darmowego warto też rozważyć zintegrowanie statystyk Google Analytics. Jeśli masz konto GA i interesuje Ciebie popularność danego filmu uzupełniasz po prostu ID swojego konta GA w polu Google Analytics ID. Za każdym razem jak wideo będzie uruchamiane, wejścia będą zliczane w statystykach Google Analytics.

FV Flowplayer Video Player - ustawienia globalne
FV Flowplayer Video Player – ustawienia globalne

Kolorystyka

A co jeśli chciałabym zmienić kolory skórki odtwarzacza? Nic prostszego. W zakładce Skin znajdziesz ustawienia kolorystyczne playera, playlisty i napisów. Tak więc po kolei:

  • Border: ramka dookoła playera
  • Border color: kolor tej ramki
  • Bottom margin: margines pod odtwarzaczem
  • Buffer: kolor paska postępu buforowania
  • Canvas: kolor płótna (jeśli nie ma planszy tytułowej wyświetla się plansza w kolorze określonym w tym polu)
  • Controlbar: kolor paska z nawigacją odtwarzania
  • Font Face: krój czcionki
  • Player Position: pozycja playera względem tekstu
  • Progress: kolor paska odtwarzania
  • Time: kolor aktualnego czasu odtwarzania
  • Total time: kolor całkowitego czasu odtwarzania

Z prawej strony masz podgląd na żywo, więc od razu możesz sprawdzić wprowadzone zmiany bez konieczności ich zapisywania.

Chcę zmienić np. pasek postępu na kolor pomarańczowy… Wybieram próbkę z palety kolorów albo wklejam kod szesnastkowy.

FV Flowplayer Video Player - zmiana koloru elementów odtwarzacza
FV Flowplayer Video Player – zmiana koloru elementów odtwarzacza

Tak samo mogę zmienić kolor paska z nawigacją odtwarzania, albo kolory znaczników czasowych.

FV Flowplayer Video Player - efekt końcowy
FV Flowplayer Video Player – efekt końcowy

Opisany sposób osadzania wideo na stronie nadaje się dla kursów darmowych, gdyż nie ma tutaj kontroli nad nieautoryzowanym dostępem. Ktoś kto ma link (taki link może łatwo sobie skopiować ze źródła strony…) będzie miał bezpośredni dostęp do pliku.  Dobra wiadomość jest taka, że w playerze jest obsługa hostingu Amazon S3 (zakładka Hosting), więc tutaj już można pewne mechanizmy zabezpieczeń zastosować.

W następnym artykule pokażę jak to zrobić.

1 komentarz o “Jak osadzić wideo na stronie kursu w CMS WordPress?”

Zostaw komentarz

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

Privacy Policy Settings