Istnieje kilka sposobów dodawania multimediów do strony internetowej. Wiesz już, jak używać
standardowego tagu <video>. W tym artykule poznasz kilka dostępnych platform (czyli bibliotek), których możesz użyć, aby rozszerzyć lub zastąpić działanie domyślnego odtwarzacza wideo HTML5.
Platformy medialne występują zarówno w wersji zastrzeżonej, jak i o otwartym kodzie źródłowym, a ich podstawą jest zestaw interfejsów API do odtwarzania dźwięku i wideo na potrzeby różnych formatów kontenerów i protokołów transmisji. Dobra platforma ma architekturę modułową i zapewnia przejrzystą i szczegółową dokumentację. Najlepiej, gdyby konfiguracja i obsługa były stosunkowo łatwe. Możesz zadawać sobie pytanie: „Jeśli odtwarzacz wideo HTML5 ma już większość funkcji, to po co używać ramki lub biblioteki?”. Dobre pytanie. Zajmijmy się teraz.
Zalety korzystania z platformy
W większości przypadków, gdy prosta strona internetowa nie jest potrzebna, i chcesz wyświetlać treści za pomocą platformy medialnej. Jeśli nie jesteś w stanie opracować i utrzymać rozbudowanego zestawu funkcji, takich jak odtwarzanie offline, strumieniowanie, statystyki, obraz w obrazie, miniatury podglądu, umieszczanie na stronach i zarabianie, np. optymalizacja współczynnika wypełnienia, harmonogram wyświetlania reklam czy określanie stawek przez kod w nagłówku, prawdopodobnie lepiej będzie, jeśli nie będziesz od razu wykorzystywać tego kompleksowego rozwiązania.
Właśnie tu do akcji wkraczają schematy mediów. Zawierają one zestaw funkcji oraz warunki, w jakich możesz z nich korzystać. Następnie musisz zdecydować, która platforma sprawdzi się w Twoim projekcie. W następnym artykule omówimy, jak stworzyć aplikację PWA z funkcją strumieniowania offline, która udostępnia kilka złożonych funkcji. Uwaga, spojler: kosztowało Cię sporo pracy, a rozwiązanie produkcyjne nie jest jeszcze gotowe. Oszczędź sobie problemów i użyj platformy.
Dostępnych jest wiele opcji, jednak na razie w tym artykule skupimy się na 3 z nich: Shaka Player, JW Player i Video.js.
Gracz Shaka
Zgodnie z dokumentacją Shaka Player Google to biblioteka JavaScript typu open source do obsługi adaptacyjnych multimediów. Odtwarza w przeglądarce adaptacyjne formaty multimediów (takie jak DASH i HLS) bez używania wtyczek. Zamiast niego Shaka Player wykorzystuje rozszerzenia MediaSource Extensions i Encrypted Media Extensions, które odpowiadają otwartym standardom internetowym.
Shaka Player obsługuje też przechowywanie w trybie offline i odtwarzanie multimediów za pomocą IndexedDB. Treść może być przechowywana w dowolnej przeglądarce. Ilość miejsca na licencje zależy od obsługi przeglądarki.
Wskazówki dotyczące podstawowego użytkowania znajdziesz na stronie dokumentacji Shaka Playera. Krótko mówiąc, aby używać odtwarzacza Shaka, musisz najpierw utworzyć stronę HTML z elementem wideo lub audio. Następnie instalujesz kod polyfill w kodzie JavaScript aplikacji i sprawdzasz, czy przeglądarka obsługuje ten kod. Gdy przeglądarka potwierdzi obsługę odtwarzacza Shaka, skrypt utworzy obiekt Player, aby opakować element multimedialny, nasłuchiwać błędów i wczytać plik manifestu. Stąd zajmie się Shaka Player.
W przypadku Shaka musisz samodzielnie hostować i kodować pliki multimedialne. Tworzenie serwera multimediów nie jest zbyt skomplikowane, ale kodowanie i transkodowanie multimediów może być czasochłonne i skomplikowane. Zapewne zechcesz przenieść tę część do usług takich jak Zencoder, Amazon Elastic Encoder czy Google Transcoder API, aby zautomatyzować powtarzające się zadania i przyspieszyć cały proces.
Świetną zaletą odtwarzacza Shaka jest to, że jest też fantastyczne narzędzie i pakiet SDK do pakietów multimedialnych do pakietów DASH i HLS oraz do szyfrowania, o nazwie Shaka Packager. Pomaga przygotować i opakować treści multimedialne do strumieniowania online. O tym, jak już słyszeliśmy w artykułach Konwersja multimediów i Szyfrowanie multimediów,
JW Player
Jeśli interesuje Cię usługa oferująca usługi hostingu, kodowania i transkodowania, rozważ skorzystanie z JW Player. Pamiętaj jednak, że JW Player to oprogramowanie zastrzeżone. Oznacza to, że nie masz dużej kontroli nad platformą ani planem rozwoju. Istnieje podstawowa wersja bezpłatna, w której filmy są wyświetlane ze znakiem wodnym, oraz wersja komercyjna.
JW Player obsługuje strumieniowanie w formacie MPEG-DASH (tylko w wersji płatnej), cyfrowe zarządzanie prawami (DRM) (z systemem Vualto), reklamy interaktywne, dostosowywanie interfejsu i umieszczanie elementów. Istnieje dobrze udokumentowany interfejs API i pakiet SDK. Jeśli jednak szukasz szybkiego i bezpłatnego sposobu przechowywania multimediów, umieszczanie filmów z YouTube na ogół jest najlepszą opcją bezpłatną.
Video.js
Strona Video.js została stworzona od podstaw z myślą o środowisku HTML5. Obsługuje formaty wideo HTML5 i nowoczesne formaty strumieniowania, np. DASH i HLS, oraz YouTube i Vimeo. Obsługuje odtwarzanie filmów na komputerach i urządzeniach mobilnych, a dzięki skórkom opartym na CSS dobrze wygląda na każdym urządzeniu.
Jest kilka sposobów korzystania z Video.js, ale najłatwiej jest użyć bezpłatnej wersji CDN dostępnej w witrynie Fastly. Więcej informacji o tym, jak skonfigurować odtwarzacz, znajdziesz na stronie Pierwsze kroki. Video.js to bardzo zaawansowany odtwarzacz wideo. Podobnie jak Shaka Player, musisz go umieścić i zakodować. Jedna z różnic dotyczy jednak systemu wtyczek, w którym możesz np. odtwarzać filmy z YouTube w odtwarzaczu Video.js, który również można dostosować.
Inne platformy
Dostępnych jest wiele różnych platform i bibliotek. Ten artykuł pokazuje tylko najistotniejsze informacje. Wybierając platformę, weź pod uwagę funkcje potrzebne w projekcie i sposób, w jaki planujesz hostować i kodować lub transkodować multimedia. Czy potrzebujesz reklam przed filmem lub innych strategii zarabiania? Czy Twoje multimedia będą dostępne offline? Jak duży lub mały jest Twój budżet? Ile trzeba wziąć pod uwagę. Poszukaj informacji i poproś o sugestie osoby ze swojej sieci. Istnieją dziesiątki innych doskonałych opcji, ale zanim podejmiesz decyzję, poświęć trochę czasu na wybór tej, która będzie odpowiednia dla Twojego zespołu i uniknie powstawania niepotrzebnych długów technicznych i skomplikowanych rozwiązań, które trzeba będzie utrzymywać w trakcie cyklu życia projektu.
W następnej kolejności zapoznasz się z PWA z funkcją strumieniowania offline, którą opracowaliśmy, aby zademonstrować, jak podejść do głównych wyzwań, jakie pojawiają się podczas pracy nad własnym rozwiązaniem, przy użyciu samego obiektu wideo HTML5 bez platformy do obsługi najcięższych zadań.