ホームページ > ウェブフロントエンド > H5 チュートリアル > Bilibili のオープンソース HTML5 プレーヤー コア flv.js についてどう思いますか?

Bilibili のオープンソース HTML5 プレーヤー コア flv.js についてどう思いますか?

PHP中文网
リリース: 2017-03-18 09:41:10
オリジナル
12873 人が閲覧しました

flv.js は 3 つのことを行います:

1. HTML5 は mp4/webm 形式の再生のみをネイティブでサポートし、flv.js は HTML5 での FLV 形式のビデオの再生を実装します
2. Bilibili Web ページを HTML5 プレーヤーにスムーズに移行し、ビデオのライブの場合はもう障害になりません
3.ブロードキャストは、HTML5 での非常に低遅延の HTTP FLV 再生をサポートし、Flash での Web ライブ ブロードキャストへの依存を排除​​します
一部の人は、なぜ MP4 形式を直接使用しないのかと尋ね、FLV 形式に対する嫌悪感を表明しました
一方で、この問題は歴史の遺産です。ビデオ Web サイトは初期段階で完全に Flash 再生に依存しており、FLV 形式を選択しているためです
一方で、FLV/MP4 パッケージ形式を注意深く研究すると、次のことがわかります。 FLV 形式は非常にシンプルですが、MP4 の内部ボックスには多くの種類があり、複雑で堅牢な構造になっており、冗長データが多すぎます。 FLV は固有のストリーミング特性を備えており、ネットワーク ストリーミングに適していますが、最も広く使用されているストレージ形式である MP4 は、必ずしもデザインが洗練されているわけではありません。
ここではマルチメディアカプセル化形式の長所と短所について話したいわけではありません。 flv.js は、HTML5 でカスタム ビデオ形式の再生を実装し、メディア ソース拡張機能、Fetch API、ECMAScript 6 などの HTML5/Web 上の新しいテクノロジを最大限に活用し、これらの API をテストする良い例です。 Edge の Fetch API のサポートにバグがあることが発見されました。 さまざまなブラウザで MSE の実装の詳細にいくつかの違いと問題があることが発見されました。 Safari の MSE 実装は堅牢ではないことが発見されました (面白い)
初期の頃。 flv.js プロジェクトの Media Source Extensions (MSE) は中国では知られていませんが、MSE API は過去 4 年間で進化しており、HTML5 マルチメディアに関連する最も重要な API の 1 つです。 MSE は、HTML5 でカスタム フォーマットの再生を実現するための鍵です。flv.js のオープン ソースも、MSE がより広く理解され、適用されることを期待しています。
最後に、Chrome などのブラウザーは Flash を廃止するプロセスを加速しています。MSE は、現在の HTML5 マルチメディア テクノロジーを補完するものとして、さまざまなブラウザー メーカーによって実装されています。旧フラッシュを超えました。 すごいですね、弟...
h5 プレーヤーが最初に登場したとき、ステーション B は emscripten を使用して flv2mp4 などの C++ プログラム (とにかく asm.js があります) をカプセル化し、それらを Blob API にスライスしたのではないかと推測しました。次に、Stream がビデオにタグを付けます... 結局、私は MIDI プレーヤー (ACGSounds.com) を構築しました。これがおそらく私が演奏した方法です... その後、flv.js が開きました出典…びっくりしました!実際にネイティブ JS を使用してメタデータ、AAC ストリーム、ビデオ ストリームを直接読み取りました...そして remux
(videojs-contrib-hls に触発されて、大きなニュースにするために ffmpeg などに emscripten を使用しました...あのパックは本当に怖い... この flv.js は、flv をビデオ コンテナとして使用し、html5 プレーヤーで再生する際の問題を解決します。
しかし。 。 。需要は高くありません。 。 。完全なhtml5のウェブサイトを作りたい場合、mp4で保存した方が良いのではないでしょうか?
ただし、これはメディア ソース拡張機能によって実装されており、このインターフェイスを使用する良い例を示しています。 それは良いことですが、大きな制限があります
flv を使用する他のサイトは、ハイエンドの広告機能 (mp4 など) を実装するために引き続き Flash を使用する予定です
私たちのようなサードパーティは cors によってブロックされています。実現は困難です
(以前、関係者になぜ flv がまだ残っているのかと尋ねた人がいました。フラッシュは遅かれ早かれ消滅するでしょう。答えは「単なる remux であり、リソースはあまりかかりません」です... …)
しかし完全に不可能ではありません
サードパーティがステーション b の flv を再生するために flv.js を導入する必要がある場合、最も簡単な方法は、 http://
を使用することです。 ideo.com を使用して、任意のドメイン名の再生サポートを取得しますアドレス今夜サポートを試してみます一晩中取り組んできましたが、キャッシュがジャンプしてもまだ cor がありません。諦めるという選択をする このフレームワークを使用して HLS プレーヤーを変更できるのは非常に優れています。これにより、ブラウザ側のビデオ ライブ ブロードキャストが、FLASH と WebRTC に加えて 3 番目のユニバーサル オプションになります。
訂正: hls.js のコードは見ていないので、C++ コードから変換され、保守や変更ができないものと推測します。コメントに修正がありますので、コメントを読むことができます。
さらに、Web 側のビデオ再生のインフラストラクチャが徐々に成長しているようです。http+WebSocket+MSE+MPEG ダッシュ+ビデオ タグ+オーディオ タグ+WebGL+WebRTC を組み合わせてビデオを作成できるはずです。ネイティブレベルに劣らない再生システム(ノンライン編集(非ライン編集)、ミキシングは今のところ考えないでください、現実的ではありません) 現時点では各モジュールの内部成熟度は十分ではありませんが、複雑な開発条件が整っています。 Webビデオアプリケーションはすでに準備が整っています。 広告目的で Flash にこだわる他のメーカーにとって、bilibili は新鮮な空気の息吹です。 。 。
私はこのくだらないウェブサイトが大好きです。 。 (゜-゜)つろ 一つだけ言わせてください、これができることは確かに誇りと誇りに値しますし、これを行うプロセスは確かに賞賛に値します。
最前列の膜Qianqian。 @qianqian もも肉のフラッシュローストなどはどうでもいいのですが、とにかく神舟がたっぷり入った時の温度は50~60度しかありません。 。 。私が気になるのは!
HTML5 はクラッシュすることなく数十のビデオを開くことができます!
フラッシュが7回以上あると確実に死亡します! 優れたオープンソース プロジェクト。ただし、実験的なバックアップ ソリューションになる可能性が高くなります。
本質的に、これはメディア ソース拡張機能の実装に依存します。
これは、この問題が基本的にモバイル側で ios safari の解決不可能なことに直面していることを意味し、したがって、ブラウザでの flv 再生をモバイル側にもたらす可能性は短期的には遮断されます。
実装のアイデアに関しては、ビデオ リソースのスライスを自分で取得し、それらを結合してビデオ要素にフィードするという hls.js に近いです。
最後に、これがフラッシュとビデオ Web サイトのソリューションに対するもう 1 つの前向きな課題であると考えているため、これが長期間続くことを本当に願っています。さらに、それはオープンソース、オープンソース、オープンソースです。 MacでBilibili視聴時にパソコンが起動する問題を解決しました
ちなみに、大手動画サイトは連打機能をオンにしているので、そういえば連打機能をオンにするとすぐにパソコンが起動します。私は RTB 会社のフロントエンドで働いており、一部のビデオ再生を flv.js で置き換えることができず、うまくいくことを願っています。 be better

上記は、Bilibili (bilibili) のオープンソース HTML5 プレーヤー コア flv を表示する方法です。js の詳細については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

flv.jsコードの包括的な解釈

オープンソースコードflv.jsの使用手順

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート