2012-07-04 9 views
10

Mam wideo 1080p, które wyświetlam w tagu HTML5 <video> na mojej stronie.Wideo HTML5: wykrywanie przepustowości

Czy istnieje prosta (ish) metoda wykrywania przepustowości javascript, więc mogę przełączać wideo na wersje o niższej jakości, jeśli połączenie użytkownika jest zbyt wolne, aby przesłać strumieniowo wideo? Podobnie jak w logice "automatycznego" wyboru rozmiaru wideo w YouTube.

+0

Jest trochę stary, ale warto rzucić okiem na test prędkości [api] (http://speedof.me/api). – advncd

Odpowiedz

0

Nienawidzę tej funkcji! Zwykle jest źle, i jeśli chcę poczekać 2 godziny, aby załadować moje wideo dang, niż czekać, będę! Nie ma żadnego wiarygodnego sposobu na dokładne zmierzenie tego bez wysłania dużego fikcyjnego pliku do użytkownika i zmierzenia czasu, jaki potrzebował, aby do niego dotrzeć.

Powinieneś liczyć na wprowadzanie danych przez użytkownika (i pamiętaj o tym poprawnie! Również w przeciwieństwie do YouTube!).

Podsumowując, nie należy traktować YouTube jako przykładu.

+0

Ale na pewno, jeśli prędkość połączenia spowolni się podczas odtwarzania, chcesz, aby wideo automatycznie tymczasowo przełączyło się na strumień o niższej przepustowości, zamiast przerywać odtwarzanie. Nie? –

+0

@DanHerbert: Nie, jeśli przełącznik jest przeszkodą, która zwykle jest (jakość wideo jest znacznie pogorszona, często powodując, że jakikolwiek poprzedni bufor trafia do piekła, co oznacza, że ​​nie można go odpowiednio przewinąć). Nie. Jeśli użytkownik chciał to zrobić, zrobi to sam, zaufaj mi. Wystarczy, że opcja zmiany jakości będzie widoczna i wystarczająco wyraźna. Nie wszystko musi być automatyczne. –

3

w Google Chrome przynajmniej tam są te właściwości na elemencie wideo:

webkitVideoDecodedByteCount: 0 
webkitAudioDecodedByteCount: 0 

To powinno wystarczyć, aby ustalić, jak szybko klient może dekodować wideo. Podczas odtwarzania wideo można śledzić wielkość delta tych bajtów, co daje bajtów/s klient przetwarza wideo.

+2

Wszelkie aktualizacje tej metody lub jakiejkolwiek innej od teraz, że jest 2015? Dzięki –

0

Istnieją płatne usługi, które mogą wskazywać przepustowość łącza, na przykład netspeed.

Dokładność danych może być dla ciebie wystarczająca, ale nie miałem okazji przetestować jej dla siebie.

+0

Sprawdziłem prędkość netto ... To wskaźnik, ale jest bardzo gruby, mówi tylko "Kabel/DSL", "Telefon", "Telefon komórkowy" itd. – schieferstapel

+0

Tak, monitorowanie prędkości i buforowania byłoby najlepsza alternatywa :) –

3

W zależności od używanego odtwarzacza i platformy kodowania, możesz użyć kodowania HLS do swoich filmów. HLS oznacza HTTP Live Streaming, protokół opracowany przez Apple w celu rozwiązania przede wszystkim tego problemu (między innymi).

HLS zasadniczo dzieli plik wideo na wiele małych plików, aby można je było "pseudo" przesyłać strumieniowo za pomocą prostego serwera WWW. Dzięki HLS możesz również kodować w wielu rozdzielczościach, a gracz może mieć możliwość przejścia na mniejszą lub wyższą przepustowość.

Jedynym minusem jest to, że większość odtwarzaczy używa Flasha do odtwarzania zakodowanych treści HLS. Sprawdź to w akcji tutaj: http://www.flashls.org/latest/examples/chromeless/

Oto HLS demo Flowplayer: http://demos.flowplayer.org/basics/hls.html

I tu jest plugin dla VideoJS: https://github.com/videojs/videojs-contrib-hls

Aby zakodować w HLS, można użyć ffmpeg za darmo i przesyłać pliki na serwer: https://www.ffmpeg.org/ffmpeg-formats.html#hls-1

lub można użyć w chmurze rozwiązanie jak AWS Transcoder lub Brightcove https://aws.amazon.com/elastictranscoder/

+2

'videojs-contrib-hls':" * Ten projekt rozwiązuje ten problem, zapewniając polyfill dla HLS w przeglądarkach, które obsługują rozszerzenia Media Source, lub jeśli to nie działa, obsługują Flash. Możesz wdrożyć pojedynczy strumień HLS , koduj przeciwko zwykłym API wideo HTML5 i twórz szybki, wysokiej jakości obraz wideo we wszystkich kategoriach dużych urządzeń internetowych. * "Niesamowite! Dokładnie to, czego potrzebowałem! Wielkie dzięki! –

+0

Dla klienta HLS, który jest agnostykiem gracza, wypróbuj hls.js, wprowadzony przez DailyMotion. videojs-contrib-hls jest związany z video.js. – Fawntasia

2

Aby uzyskać bardziej aktualną odpowiedź: MPEG-DASH jest w trakcie wymiany HLS. HLS jest używany głównie na ziemi iOS. Większość przeglądarek na komputery stacjonarne nie planuje go obsługiwać, a DASH to standard, do którego zmierzają. (Jest jednak mnóstwo graczy zaprojektowanych, aby umożliwić używanie HLS z odtwarzaczem wideo HTML5, takim jak hls.js). Gracze DASH to Bitmovin, Google Shaka i inni. Wiele osób koduje obecnie zarówno HLS, jak i DASH. HLS obsługuje także fragmentację mp4.Pamiętaj, że musisz odpowiednio zakodować swoje filmy po stronie serwera. Dodatkowe źródło: http://www.streamingmedia.com/Articles/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-2016-110099.aspx

0

Do tej pory, to trzeba mieć treści dostępnych w MPEG-DASH i HLS, aby zapewnić szerokie poparcie wszystkich platformach tam. HLS obsługuje teraz fragmentację MP4, możesz używać one single output format, który jest odtwarzany na każdym urządzeniu. Co więcej, potrzebujesz 50% less storage, a ponieważ fMP4 jest bardziej wydajny niż MPEG-TS, który jest obecnie używany w HLS, możesz zaoszczędzić jeszcze więcej miejsca i przepustowości.

Bitmovin zapewnia example, jak tworzyć zawartość HMP FMP4 i jak ją odtwarzać.