ページの HTML5<video>
タグに表示している 1080p ビデオがあります。
ユーザーの接続が遅すぎてビデオをストリーミングできない場合に、ビデオを低品質のバージョンに切り替えることができるように、帯域幅を検出する単純な (ish) JavaScript メソッドはありますか? YouTube の「自動」ビデオ サイズ チューザーの背後にあるロジックに似ています。
ページの HTML5<video>
タグに表示している 1080p ビデオがあります。
ユーザーの接続が遅すぎてビデオをストリーミングできない場合に、ビデオを低品質のバージョンに切り替えることができるように、帯域幅を検出する単純な (ish) JavaScript メソッドはありますか? YouTube の「自動」ビデオ サイズ チューザーの背後にあるロジックに似ています。
使用しているプレーヤーとエンコーディング プラットフォームによっては、動画に HLS エンコーディングを使用できる場合があります。HLS は HTTP Live Streaming の略で、主にこの問題を (とりわけ) 解決するために Apple によって開発されたプロトコルです。
HLS は基本的にビデオ ファイルを複数の小さなファイルに分割するため、単純な Web サーバーを使用して「疑似」ストリーミングできます。HLS を使用すると、複数の解像度でエンコードすることもでき、プレーヤーはより低い帯域幅またはより高い帯域幅に切り替えることができる場合があります。
唯一の欠点は、ほとんどのプレイヤーが Flash を使用して HLS でエンコードされたコンテンツを再生することです。ここで動作を確認してください: http://www.flashls.org/latest/examples/chromeless/
flowplayer の HLS デモは次のとおりです: http://demos.flowplayer.org/basics/hls.html
そして、ここに VideoJS のプラグインがあります: https://github.com/videojs/videojs-contrib-hls
HLS でエンコードするには、無料で ffmpeg を使用してサーバーにファイルをアップロードします: https://www.ffmpeg.org/ffmpeg-formats.html#hls-1
または、AWS Transcoder や Brightcove https://aws.amazon.com/elastictranscoder/などのクラウドベースのソリューションを使用できます
Google Chrome では、少なくとも video 要素に次のプロパティがあります。
webkitVideoDecodedByteCount: 0
webkitAudioDecodedByteCount: 0
これらは、クライアントがビデオをデコードできる速度を判断するのに十分なはずです。ビデオが再生されると、クライアントがビデオを処理しているバイト/秒を与えるこれらのバイトのデルタ量を追跡します。
私はその機能が嫌いです!通常、それは間違っています。動画をロードするのに 2 時間待ちたい場合は、待つよりも待つ必要があります。大規模なダミー ファイルをユーザーに送信し、ユーザーに到達するまでの時間を測定せずに、これを正確に測定する信頼できる方法はありません。
ユーザーの入力を頼りにする必要があります (そしてそれを正しく覚えておいてください! YouTube とは異なります!)。
つまり、YouTube を例にとらないでください。
netspeedのように、相手が使用している帯域幅を示す有料サービスがあります。
データの精度は十分かもしれませんが、自分でテストする機会はありませんでした.