Istnieje kilka sposobów dodawania multimediów do strony internetowej. Wcześniej dowiedziałeś(-aś) się, jak używać standardowego tagu <video>. Z tego artykułu dowiesz się więcej o kilku dostępnych platformach (lub bibliotekach) multimedialnych, które możesz wykorzystać do rozszerzenia lub zastąpienia działania domyślnego odtwarzacza wideo HTML5.
Platformy mediów są dostępne w wersjach zastrzeżonych i open source. Ich podstawę stanowi zestaw interfejsów API, które obsługują odtwarzanie dźwięku lub wideo w różnych formatach kontenerów i protokołach transmisji. Dobry framework ma architekturę modułową i zawiera przejrzystą i szczegółową dokumentację. W idealnej sytuacji powinien być też stosunkowo łatwy w konfigurowaniu i używaniu. Możesz się zastanawiać, dlaczego używać frameworku lub biblioteki, skoro odtwarzacz wideo HTML5 już udostępnia większość funkcji. To świetne pytanie. Zacznijmy.
Zalety korzystania z ramy
W większości sytuacji, w których nie wystarczają podstawowe strony internetowe, do wyświetlania treści warto użyć frameworku multimedialnego. Jeśli nie jesteś gotowy opracować i utrzymywać bogatego zestawu funkcji, takich jak odtwarzanie offline, streaming, analityka, obraz w obrazie, miniatury podglądu, umieszczanie i zarabianie (np. optymalizacja współczynnika wypełnienia, harmonogramowanie reklam czy licytowanie na nagłówku), prawdopodobnie powinieneś skorzystać z dotychczasowego rozwiązania.
Właśnie tutaj przydają się ramy mediów. Zawierają one zestaw funkcji oraz warunki, w jakich można ich używać. Następnie musisz zdecydować, która platforma jest odpowiednia dla Twojego projektu. W następnym artykule omówimy, jak zbudowaliśmy PWA z streamingiem offline, który implementuje kilka złożonych funkcji. Spoiler alert: wymagało to dużo pracy i nadal nie jest to rozwiązanie gotowe do wdrożenia. Użyj frameworka, aby zaoszczędzić sobie bólu głowy.
Dostępnych jest wiele opcji, ale w tym artykule skupimy się na 3 z nich: Shaka Player, JW Player i Video.js.
Shaka Player
Według dokumentacji Shaka Player Google to biblioteka JavaScript open source do obsługi mediów adaptacyjnych. Odtwarza ona adaptacyjne formaty multimediów (takie jak DASH i HLS) w przeglądarce bez użycia wtyczek. Zamiast tego odtwarzacz Shaka używa otwartych standardów internetowych MediaSource Extensions i Encrypted Media Extensions.
Odtwarzacz Shaka 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.
W dokumentacji Shaka Player znajdziesz wskazówki dotyczące podstawowego korzystania. Krótko mówiąc, aby korzystać z odtwarzacza Shaka, musisz najpierw utworzyć stronę HTML z elementem wideo lub audio. Następnie w pliku JavaScript aplikacji zainstaluj polyfille i sprawdź, czy przeglądarka je obsługuje. Gdy przeglądarka potwierdzi obsługę odtwarzacza Shaka, skrypt utworzy obiekt odtwarzacza, aby owinąć element multimediów, sprawdzać błędy, a następnie wczytać plik manifestu. Od tego momentu przejmie to zadanie odtwarzacz Shaka.
W przypadku Shaka musisz samodzielnie hostować i kodować pliki multimedialne. Utworzenie serwera multimediów nie jest zbyt skomplikowane, ale kodowanie lub transkodowanie multimediów może być czasochłonne i skomplikowane. Prawdopodobnie zechcesz przekazać tę część do usługi takiej jak Zencoder, Amazon Elastic Encoder lub Google Transcoder API, aby zautomatyzować powtarzalne zadania i przyspieszyć proces.
Wspaniałą rzeczą w sprawie odtwarzacza Shaka jest to, że zawiera on również fantastyczne narzędzie i pakiet SDK do pakowania multimediów na potrzeby pakowania i szyfrowania DASH i HLS o nazwie Shaka Packager. Może ona przygotowywać i pakować treści multimedialne na potrzeby strumieniowania online. Informacje na ten temat znajdziesz w artykułach Konwersja multimediów i Szyfrowanie multimediów.
JW Player
Jeśli szukasz opcji, która zapewnia usługi hostingu i kodowania/transkodowania, możesz rozważyć JW Player, ale pamiętaj, że jest to oprogramowanie własnościowe. Oznacza to, że nie masz dużej kontroli nad platformą ani roadmapą. Dostępna jest podstawowa bezpłatna wersja, w której filmy są wyświetlane z wodą, oraz wersja komercyjna.
JW Player obsługuje strumieniowanie z MPEG-DASH (tylko w wersji płatnej), zarządzanie prawami cyfrowymi (DRM) (za pomocą Vualto), reklamy interaktywne, dostosowywanie interfejsu i osadzanie. Dobrze udokumentowany interfejs API i pakiet SDK. Jeśli jednak szukasz szybkiego i bezpłatnego sposobu na przechowywanie multimediów, umieszczanie filmów w YouTube będzie najlepszą bezpłatną opcją.
Video.js
Według informacji na stronie internetowej Video.js został stworzony od podstaw z myślą o świecie HTML5. Obsługuje ona formaty wideo HTML5 i nowoczesne formaty strumieniowego przesyłania danych, takie jak DASH i HLS, a także YouTube i Vimeo. Obsługuje odtwarzanie filmów na komputerach i urządzeniach mobilnych oraz dobrze wygląda wszędzie dzięki skórkom opartych na kodzie CSS.
Z Video.js można korzystać na kilka sposobów, ale najłatwiej jest użyć bezpłatnej wersji CDN udostępnianej przez Fastly. Więcej informacji o konfigurowaniu odtwarzacza znajdziesz na stronie Początkujący. Video.js to bardzo wydajny odtwarzacz wideo. Podobnie jak w przypadku Shaka Player, musisz też hostować i kodować film. Różnica polega na tym, że w systemie wtyczek możesz m.in. odtwarzać filmy z YouTube w odtwarzaczu Video.js, który również można dostosować.
Inne platformy
Dostępnych jest wiele różnych frameworków i bibliotek, a ten artykuł tylko zarysowuje ich możliwości. Wybierając framework, weź pod uwagę, jakich funkcji potrzebujesz w projekcie i jak zamierzasz hostować oraz kodować lub konwertować swoje multimedia. Czy potrzebujesz reklam przed filmem lub innych strategii zarabiania? Czy Twoje multimedia będą dostępne offline? Jaki masz budżet? lub inne czynniki. Przeprowadź badania i poproś o sugestie osoby z Twojej sieci. Do wyboru jest kilkadziesiąt innych świetnych opcji. Zanim się zdecydujesz, zastanów się, która z nich będzie odpowiednia dla Twojego zespołu i nie spowoduje niepotrzebnego zadłużenia technicznego ani nieskomplikuje utrzymania projektu w trakcie jego cyklu życia.
Następnie poznasz aplikację internetową z transmisją offline, którą stworzyliśmy, aby pokazać, jak rozwiązać główne problemy związane z własnym rozwiązaniem, korzystając tylko z obiektu wideo HTML5 bez ramowego rozwiązania, które wykonuje większość pracy.