2015-05-21 25 views
7

Próbuję odtworzyć strumienie HLS w HTML5 bez użycia Flasha. Wypróbowaliśmy wiele odtwarzaczy wideo, ale wszystkie odtwarzają na odtwarzaczu flash. Moje pytanie, czy można odtwarzać strumienie HLS (dowolne) w HTML5 bez użycia Flash?Odtwórz HLS z HTML5

(wiem z https://github.com/RReverser/mpegts ale to nie działa na urządzeniach mobilnych i jest dość laggy.)

Odpowiedz

5

HLS nie jest obsługiwany przez wszystkie przeglądarki. Używam programu jwPlayer obsługującego strumieniowanie zarówno w formacie flash, jak i HTML5 (jeśli jest dostępny). Obsługa strumieniowania HLS niestety nadal musi polegać na Flashu, aby działał poprawnie w różnych przeglądarkach. Zobacz Obsługa HTML5 HLS: http://www.jwplayer.com/html5/hls/

+1

Ale czy to w każdy możliwy sposób, aby ją wspierać? Podobnie jak usuwanie strumienia w JavaScript i odtwarzanie wideo h264? – Dallox

+0

RReverser ma interesującą implementację, ale konwersja w JavaScript byłaby ciężka dla przeglądarki (stąd opóźnienie na telefonie komórkowym). Nie sądzę, że twoje rozwiązanie powinno opierać się na JavaScript, aby wykonać ciężki lifting. Wiele witryn korzysta z silników strumieniowych, które mogą zapewnić wiele formatów (hls, rtmp, mpeg-dash), aby objąć jak najwięcej przeglądarek natywnie używając HTML5. Następnie przełączają się na flashowanie jako awaryjne. Aby odpowiedzieć na twoje pytanie, jest to możliwe. Ale myślę, że może nie warto. – Sixthpoint

+0

cóż, to będzie projekt z otwartym kodem źródłowym, więc myślę, że będzie on stanowczo wart dla innych ludzi. Przekazywanie na serwerze do wykonania pracy nie jest rozwiązaniem dla nas, więc myślę, że musimy przejść z konwersją .. – Dallox

5

Nie ma dojrzałego stabilnego odtwarzacza HTML HLS HTML5 AFAIK. Istnieją jednak dwie oferty komercyjne:

  • Viblast Player - bardzo tanie i stosunkowo łatwe w użyciu. Ten jest tylko minimalnym odtwarzaniem HTML5 HLS. Programista musi sam wykonać interfejs użytkownika lub zintegrować go z Video.js/Flowplayer/JWPlayer.
  • Theo Player - Nie miałem zbyt dużego doświadczenia z tym. Ceny nie są publiczne. Wersja demo wygląda dobrze i działa nawet w większości wersji Firefoksa.

Oba te odtwarzacze polegają na MSE API i nie działają w przeglądarkach, w których nie są obsługiwane (IE < = 10, Firefox).

+0

THEOplayer w rzeczywistości nie wymaga MSE. Działa również na Firefox, IE10, Opera, ... – MrP

1

THEOplayer jest bardzo interesująca w tym przypadku. Pozwalają na przesyłanie strumieniowe za pomocą HLS do wszystkich popularnych przeglądarek i platform bez użycia Flasha.

Mają obsługę przeglądarki Internet Explorer, Firefox, Chrome, Opera i Safari w systemach Windows, Linux, Mac, iOS, Android i Windows Phone.

Również, w przeciwieństwie do wcześniejszych odpowiedzi, nie polegają na MSE, aby funkcjonować. W rezultacie odtwarzacz ten działa na wszystkich platformach, a nawet starych wersjach IE (10 i nowszych) i przeglądarkach, które nie obsługują MSE.

+0

Ale jestem ciekawy, w jaki sposób osiągnęli to wszystko? Czy jest to w połączeniu z Emscripten do korzystania z dekoderów C++? – Dallox

+0

Wygląda na to, że korzystają ze wsparcia sprzętowego przeglądarki, dekodowanie odbywa się w samej przeglądarce. Wygląda na to, że nie jest to emscripten. Emscripten byłby prawdopodobnie zbyt wolny (zobacz projekt broadway.js) – MrP

4

Zasadniczo wszystkie odtwarzacze HTML5 muszą transmuxować segmenty MPEG2-TS (transport) do MP4, ponieważ większość przeglądarek nie obsługuje natywnie MPEG2-TS.

W rzeczywistości dostępnych jest kilka odtwarzaczy HTML5, które mogą odtwarzać strumienie HLS. Jednym z przykładów może być Bitmovin Player, który oferuje profesjonalne wsparcie oraz awarię dla starszych przeglądarek. Jest to produkt komercyjny, ale zapewnia również bezpłatny abonament. Dostępne są również projekty typu open source, takie jak hls.js.

Jednak z Apple's announcement z tegorocznego WWDC możliwe jest teraz użycie segmentów MP4 z HLS, co eliminuje potrzebę transmuxowania. Więcej szczegółów na temat tego, jak to zrobić i korzyści są przedstawione całkiem dobrze w . Nie masz pewności, którzy gracze go obsługują, przynajmniej natywna implementacja Apple w Safari na iOS 10 i macOS; również Bitmovin już to obsługuje.

5

Projekt HLS.js jest dość niezawodny w dzisiejszych czasach (https://github.com/video-dev/hls.js/tree/master). Obsługiwany jest w najnowszych wersjach przeglądarek. Nie polega na Flashu. Może być używany w Flowplayer. hls.js jest zgodny z przeglądarkami obsługującymi MSE z wejściami "video/MP4".obsługiwana w systemach:

  • Chrome dla Androida 34+
  • Chrome for Desktop 34+
  • Firefox dla Androida 41+
  • Firefox for Desktop 42+
  • IE11 + for Windows 8.1+
  • krawędzi na Windows 10+
  • Opera na komputer stacjonarny
  • Vivaldi na komputer stacjonarny
  • Safari dla Mac 8+ (beta)