Pliki multimedialne do strony internetowej można dodawać na kilka sposobów. Wiesz już, jak używać standardowego tagu <video>. W tym artykule poznasz dostępne platformy (lub biblioteki) multimediów, których możesz użyć do rozszerzenia lub zastąpienia działania domyślnego odtwarzacza wideo HTML5.
Platformy multimediów występują zarówno w formie zastrzeżonej, jak i na licencji open source, a ich podstawowym elementem są interfejsy API do obsługi odtwarzania dźwięku i wideo w różnych formatach kontenerów i protokołach przesyłania. Dobra platforma ma architekturę modułową oraz przejrzystą i szczegółową dokumentację. Powinny też być stosunkowo łatwe w konfiguracji i obsłudze. Możesz zadać sobie pytanie: „Jeśli odtwarzacz wideo HTML5 oferuje już większość funkcji, to po co mam korzystać z platformy lub biblioteki?” Dobre pytanie, przyjrzyjmy się temu.
Zalety korzystania z platformy
W większości sytuacji, które wykraczają poza potrzeby podstawowej strony internetowej, do wyświetlania swoich treści przyda się wykorzystanie struktury medialnej. Jeśli nie jesteś w stanie opracować i obsługiwać rozbudowanego zestawu funkcji, takich jak odtwarzanie offline, strumieniowanie, analityka, obraz w obrazie, miniatury podglądu, umieszczanie na stronie i zarabianie, np. optymalizacja współczynnika wypełnienia, harmonogram wyświetlania reklam czy określanie stawek przez kod w nagłówku, lepiej wykorzystać je na rzecz istniejącego rozwiązania.
Właśnie tu do akcji wkraczają schematy mediów. Udostępniają Ci zestaw funkcji i warunki, w których możesz ich używać, a Ty musisz zdecydować, która platforma jest odpowiednia dla Twojego projektu. W kolejnym artykule omówimy, jak tworzymy aplikację PWA ze strumieniowaniem offline, która obejmuje kilka złożonych funkcji. Uwaga, spojler – wymagało dużo pracy i wciąż jeszcze daleko nie jest w wersji produkcyjnej. Oszczędź sobie czasu i zacznij korzystać z schematu.
Dostępnych jest wiele opcji. W tym artykule skupimy się na trzech z nich: Shaka Player, JW Player i Video.js.
Odtwarzacz Shaka
Zgodnie z dokumentacją Shaka Player to biblioteka JavaScript typu open source przeznaczona do adaptacyjnych multimediów. Odtwarza adaptacyjne formaty multimediów (np. DASH i HLS) w przeglądarce bez konieczności używania wtyczek. Zamiast tego Shaka Player używa otwartych standardów internetowych rozszerzeń MediaSource i rozszerzeń zaszyfrowanych multimediów.
Shaka Player obsługuje też przechowywanie i odtwarzanie offline multimediów za pomocą IndexedDB. Treści można przechowywać w dowolnej przeglądarce. Przechowywanie licencji zależy od obsługi przeglądarki.
Wskazówki dotyczące podstawowego użycia znajdziesz na stronie dokumentacji odtwarzacza Shaka. Ogólnie mówiąc, aby zacząć korzystać z programu Shaka Player, trzeba najpierw utworzyć stronę HTML z elementem wideo lub audio. Następnie w kodzie JavaScript aplikacji zainstaluj kod polyfill i sprawdź, czy przeglądarka obsługuje ten kod. Po potwierdzeniu przez przeglądarkę obsługi Shaka Player skrypt utworzy obiekt odtwarzacza w celu opakowania elementu multimedialnego, nasłuchuje błędów, a następnie wczyta plik manifestu. Od tego momentu zajmie się Shaka Player.
Korzystając z Shaki, musisz samodzielnie hostować i kodować pliki multimedialne. Tworzenie serwera multimediów nie jest zbyt skomplikowane, ale kodowanie/transkodowanie multimediów może być czasochłonne i skomplikowane. Najlepiej będzie przenieść tę część do Zencoder, Amazon Elastic Encoder lub Google Transcoder API, aby zautomatyzować powtarzalne zadania i przyspieszyć ten proces.
Wspaniałą cechą Shaka Playera jest to, że oferuje on też fantastyczne narzędzie i pakiet SDK do obsługi pakietów DASH i HLS oraz szyfrowania o nazwie Shaka Packager. Umożliwia przygotowywanie i pakietowanie treści multimedialnych do strumieniowego przesyłania danych online. Rozwiązania te znasz już w sekcjach Konwersja multimediów i Szyfrowanie multimediów.
JW Player
Jeśli szukasz opcji obejmującej usługi hostingu, kodowania i transkodowania, być może warto rozważyć JW Player, ale pamiętaj, że JW Player jest oprogramowaniem zastrzeżonym. Oznacza to, że nie masz dużej kontroli nad platformą ani planem rozwoju. Istnieje bezpłatna wersja podstawowa, w której filmy są wyświetlane ze znakiem wodnym, oraz wersja komercyjna.
JW Player obsługuje strumieniowanie z użyciem formatu MPEG-DASH (tylko w wersji płatnej), zarządzanie prawami cyfrowymi (DRM) (w przypadku Vualto), interaktywne reklamy, dostosowywanie interfejsu i umieszczanie. Istnieje dobrze udokumentowany interfejs API i pakiet SDK. Jeśli jednak szukasz szybkiego i bezpłatnego sposobu na przechowywanie swoich multimediów, umieszczanie filmów z YouTube na innych stronach jest zwykle najlepszym rozwiązaniem.
Video.js
Według strony internetowej Video.js jest to projekt stworzony od podstaw na potrzeby środowiska HTML5. Obsługuje wideo w formacie HTML5 i nowoczesne formaty strumieniowego przesyłania danych (np. DASH i HLS) oraz YouTube i Vimeo. Obsługuje odtwarzanie filmów na komputerach i urządzeniach mobilnych i wygląda dobrze dzięki skórkom opartym na CSS.
Istnieje kilka sposobów korzystania z elementu Video.js, ale najprostszym jest skorzystanie z bezpłatnej wersji CDN udostępnianej przez Fastly. Więcej informacji o tym, jak go skonfigurować, znajdziesz na stronie wprowadzenia. Video.js to bardzo zaawansowany odtwarzacz i, tak jak w przypadku Shaka Player, musisz też hostować i kodować filmy. Jedyna różnica polega na tym, że system wtyczek umożliwia odtwarzanie filmów z YouTube w odtwarzaczu Video.js, który również można dostosować.
Inne platformy
Dostępnych jest wiele różnych platform i bibliotek, a ten artykuł jedynie rzuca w błąd. Wybierając platformę, musisz się zastanowić, jakie funkcje są Ci potrzebne w projekcie, oraz jak planujesz hostować, kodować lub transkodować multimedia. Czy potrzebujesz reklam przed filmem lub innych strategii zarabiania? Czy multimedia będą dostępne offline? Jak duży czy mały jest Twój budżet? lub innych kwestii. Poszukaj informacji i zapytaj osoby w sieci o sugestie. Są dziesiątki innych świetnych opcji, a zanim dokonasz wyboru, poświęć trochę czasu, by wybrać tę, która będzie odpowiednia dla Twojego zespołu. Dzięki temu unikniesz tworzenia niepotrzebnego długu technicznego i złożoności w trakcie cyklu życia projektu.
Później zapoznasz się z PWA ze strumieniowaniem offline, które stworzyliśmy, aby pokazać, jak radzić sobie z najważniejszymi wyzwaniami, jakie niesie ze sobą wdrożenie własnego rozwiązania przy użyciu obiektu wideo HTML5 bez struktury do obsługi najtrudniejszych zadań.