2012-07-04 3 views
10

Ich habe ein 1080p Video, das ich in einem HTML5Tag auf meiner Seite anzeigen.HTML5 Video: Bandbreite erkennen

Gibt es eine einfache (ish) Javascript-Methode zum Erkennen der Bandbreite, sodass ich das Video für Versionen mit geringerer Qualität ausschalten kann, wenn die Verbindung des Benutzers zu langsam ist, um das Video zu streamen? Ähnlich wie bei der automatischen Video-Auswahlfunktion von YouTube.

+0

Es ist ein bisschen alt, aber vielleicht möchten Sie sich Speed ​​Test [api] (http://speedof.me/api) ansehen. – advncd

Antwort

0

Ich hasse diese Funktion! Es ist normalerweise falsch, und wenn ich 2 Stunden warten möchte, um mein dang Video zu laden, dann warte ich! Es gibt keine zuverlässige Möglichkeit, dies genau zu messen, ohne eine große Dummy-Datei an den Benutzer zu senden und die Zeit zu messen, die benötigt wurde, um zu ihm zu gelangen.

Sie sollten sich auf Benutzereingaben verlassen (und erinnern Sie sich daran! Auch im Gegensatz zu YouTube!).

Kurz gesagt, nehmen Sie nicht YouTube als Beispiel.

+0

Wenn sich die Verbindungsgeschwindigkeit während der Wiedergabe jedoch verlangsamt, sollte das Video automatisch vorübergehend in den Stream mit geringerer Bandbreite wechseln, anstatt die Wiedergabe zu unterbrechen. Nein? –

+0

@DanHerbert: Nicht, wenn der Schalter hinderlich ist, was er normalerweise ist (Die Qualität eines Videos ist stark verschlechtert, was dazu führt, dass ein vorhergehender Puffer in die Hölle kommt, was bedeutet, dass man nicht richtig zurückspulen kann). Nein. Wenn der Benutzer es tun wollte, wird er es selbst tun, vertrau mir. Machen Sie einfach die Option zum Ändern der Qualität sichtbar und deutlich genug. Nicht alles muss automatisch sein. –

3

in Google Chrome zumindest gibt es diese Eigenschaften auf einem Videoelement:

webkitVideoDecodedByteCount: 0 
webkitAudioDecodedByteCount: 0 

Diese sollten genug sein, um zu bestimmen, wie schnell der Client das Video dekodieren kann. Während das Video abgespielt wird, würden Sie die Delta-Menge dieser Bytes verfolgen, die Ihnen Bytes/s geben, die der Client das Video verarbeitet.

+2

Irgendwelche Updates zu dieser Methode oder zu anderen, jetzt wo es 2015 ist? Danke –

0

Es gibt kostenpflichtige Dienste, die einen Hinweis darauf geben können, auf welcher Bandbreite die andere Partei steht, z. B. netspeed.

Die Datengenauigkeit kann für Sie ausreichen, aber ich hatte nicht die Möglichkeit, es für mich selbst zu testen.

+0

Ich habe in netspeed geschaut ... Es ist ein Indikator, aber es ist wirklich sehr grob, es sagt nur "Kabel/DSL", "Dialup", "Mobile" usw. – schieferstapel

+0

Ja, Feature Erkennung und Pufferung Geschwindigkeit Überwachung wäre beste Alternative :) –

3

Je nachdem, welchen Player und welche Encoding-Plattform Sie verwenden, können Sie möglicherweise die HLS-Codierung für Ihre Videos verwenden. HLS steht für HTTP Live Streaming, ein von Apple entwickeltes Protokoll zur primären Lösung dieses Problems (unter anderem).

HLS zerlegt Ihre Videodatei im Grunde in mehrere kleine Dateien, sodass sie mit einem einfachen Webserver "Pseudo" -Stream werden können. Mit HLS können Sie auch in mehreren Auflösungen kodieren und ein Player kann möglicherweise zu einer niedrigeren oder höheren Bandbreite wechseln.

Der einzige Nachteil ist, dass die meisten Spieler Flash verwenden, um HLS-kodierten Inhalt zu spielen. Check it out in Aktion hier: http://www.flashls.org/latest/examples/chromeless/

Hier ist HLS Demo für flowplayer: http://demos.flowplayer.org/basics/hls.html

Und hier ein Plugin für VideoJS ist: https://github.com/videojs/videojs-contrib-hls

in HLS zu kodieren, können Sie entweder ffmpeg kostenlos und hochladen von Dateien auf dem Server: https://www.ffmpeg.org/ffmpeg-formats.html#hls-1

Alternativ können Sie verwenden, um eine Cloud-basierte Lösung wie AWS Transcoder oder Brightcove https://aws.amazon.com/elastictranscoder/

+2

'videojs-contrib-hls':" * Dieses Projekt behebt diese Situation, indem ein HLW-fähiger Polyfill für Browser bereitgestellt wird, die Unterstützung für Media Source Extensions bieten oder, falls dies nicht möglich ist, Flash unterstützen. Sie können einen einzelnen HLS-Stream bereitstellen Code, der gegen die regulären HTML5-Video-APIs codiert und ein schnelles, hochwertiges Videoerlebnis in allen großen Webgerätekategorien ermöglicht. * "Erstaunlich! Genau das, was ich brauchte! Danke vielmals! –

+0

Für einen HLS-Client, der Player-agnostisch ist, versuchen Sie hls.js, eingeführt von DailyMotion. videojs-contrib-hls ist an video.js gebunden. – Fawntasia

2

Für eine aktuellere Antwort: MPEG-DASH ersetzt HLS. HLS wird hauptsächlich in iOS Land verwendet. Die meisten Desktop-Browser planen nicht, es zu unterstützen, und DASH ist der Standard, auf den sie hinarbeiten. (Es gibt jedoch viele Player, mit denen Sie HLS mit HTML5-Videoplayern wie hls.js verwenden können). Zu den DASH-Playern gehören Bitmovin, Google Shaka und mehr. Viele Menschen codieren derzeit sowohl für HLS als auch für DASH. HLS unterstützt auch fragmentierte mp4.Bitte beachten Sie, dass Sie Ihre Videos serverseitig korrekt codieren müssen. Zusätzliche Ressource: http://www.streamingmedia.com/Articles/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-2016-110099.aspx

0

Bis jetzt müssten Sie Ihre Inhalte in MPEG-DASH und HLS zur Verfügung stellen, um eine breite Unterstützung aller Plattformen da draußen zu bieten. HLS unterstützt jetzt fragmentiertes MP4, Sie können one single output format verwenden, das auf jedem Gerät abgespielt wird. Außerdem benötigen Sie 50% less storage, und da fMP4 effizienter ist als MPEG-TS, das derzeit für HLS verwendet wird, können Sie noch mehr Speicher und Bandbreite sparen.

Bitmovin bietet eine example, wie HLS fMP4 Inhalt erstellen und wie man es spielt.