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

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

Mar 18, 2017 am 09:41 AM
bilibili com flv github https

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の使用手順

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

携帯電話のbilibiliによってビデオはどこにキャッシュされますか? 携帯電話のbilibiliによってビデオはどこにキャッシュされますか? Mar 21, 2024 pm 02:28 PM

Bilibili によってキャッシュされたビデオの保存場所は、携帯電話のストレージ パスにあり、具体的な場所は次のとおりです: Android/data/tv.danmaku.bili/download/。 Bilibili を開き、保存するビデオをキャッシュし、パスの下で時系列順にビデオ フォルダーを見つけます。ここには、video.m4s と audio.m4s にそれぞれビデオとオーディオが含まれています。

紅夢ネイティブアプリケーションのランダムな詩 紅夢ネイティブアプリケーションのランダムな詩 Feb 19, 2024 pm 01:36 PM

オープン ソースの詳細については、次のサイトを参照してください。 51CTO Honmeng 開発者コミュニティ https://ost.51cto.com 実行環境 DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. アプリケーションを作成するには、[ファイル] をクリックします。 >新しいファイル ->プロジェクトの作成。テンプレートを選択します: [OpenHarmony] EmptyAbility: プロジェクト名 shici、アプリケーション パッケージ名 com.nut.shici、およびアプリケーションの保存場所 XXX (中国語、特殊文字、スペースは含まれません) を入力します。 CompileSDK10、モデル: ステージ。デバイス

Windows 11/10にGitHub Copilotをインストールする方法 Windows 11/10にGitHub Copilotをインストールする方法 Oct 21, 2023 pm 11:13 PM

GitHubCopilot は、コードを適切に予測してオートコンプリートする AI ベースのモデルを備えた、プログラマーにとっての次のレベルです。ただし、この AI の天才をデバイスに導入して、コーディングをさらに簡単にする方法を疑問に思っているかもしれません。ただし、GitHub の使用は必ずしも簡単ではなく、初期設定プロセスは難しいものです。したがって、Windows 11、10 の VSCode に GitHub Copilot をインストールして実装する方法に関するステップバイステップのチュートリアルを作成しました。 Windows に GitHubCopilot をインストールする方法 このプロセスにはいくつかの手順があります。したがって、今すぐ以下の手順に従ってください。ステップ 1 – 最新バージョンの Visual Studio がコンピューターにインストールされている必要があります

Nginx Proxy Manager を使用して HTTPS プロトコルでリバース プロキシを実装する方法 Nginx Proxy Manager を使用して HTTPS プロトコルでリバース プロキシを実装する方法 Sep 26, 2023 am 08:40 AM

NginxProxyManager を使用して HTTPS プロトコルでリバース プロキシを実装する方法 近年、インターネットの普及とアプリケーション シナリオの多様化に伴い、Web サイトやアプリケーションへのアクセス方法はますます複雑になっています。 Web サイトへのアクセス効率とセキュリティを向上させるために、多くの Web サイトはユーザーのリクエストを処理するためにリバース プロキシを使用し始めています。 HTTPS プロトコルのリバース プロキシは、ユーザーのプライバシーを保護し、通信のセキュリティを確保する上で重要な役割を果たします。この記事ではNginxProxyの使い方を紹介します。

Nginx プロキシ マネージャーを使用して HTTP から HTTPS への自動ジャンプを実装する方法 Nginx プロキシ マネージャーを使用して HTTP から HTTPS への自動ジャンプを実装する方法 Sep 26, 2023 am 11:19 AM

NginxProxyManager を使用して HTTP から HTTPS への自動ジャンプを実装する方法 インターネットの発展に伴い、ますます多くの Web サイトが HTTPS プロトコルを使用してデータ送信を暗号化し、データ セキュリティとユーザーのプライバシー保護を向上させ始めています。 HTTPS プロトコルは SSL 証明書のサポートを必要とするため、HTTPS プロトコルを展開する際には特定の技術サポートが必要です。 Nginx は強力で一般的に使用される HTTP サーバーおよびリバース プロキシ サーバーであり、NginxProxy

SSL を使用した Nginx: HTTPS を構成して Web サーバーを保護する SSL を使用した Nginx: HTTPS を構成して Web サーバーを保護する Jun 09, 2023 pm 09:24 PM

Nginx は、高性能 Web サーバー ソフトウェアであり、強力なリバース プロキシ サーバーおよびロード バランサーです。インターネットの急速な発展に伴い、機密性の高いユーザー データを保護するために SSL プロトコルを使用する Web サイトが増えています。Nginx は強力な SSL サポートも提供し、Web サーバーのセキュリティ パフォーマンスをさらに強化しています。この記事では、SSL プロトコルをサポートし、Web サーバーのセキュリティ パフォーマンスを保護するように Nginx を構成する方法を紹介します。 SSLプロトコルとは何ですか? SSL (セキュアソケット)

bilibili動画をローカルに保存するにはどうすればいいですか?サイト b の PC 版でビデオをローカルにキャッシュする方法 bilibili動画をローカルに保存するにはどうすればいいですか?サイト b の PC 版でビデオをローカルにキャッシュする方法 Mar 13, 2024 pm 10:25 PM

bilibili は現在最も人気のある動画配信サイトであり、興味のある動画を見つけた場合、多くのユーザーはそれをキャッシュすることを選択します。では、サイト B はダウンロードしたビデオをローカルにどのようにキャッシュするのでしょうか?実際、この方法は難しくありません。以下では、編集者がサイト B のコンピュータ版でビデオをローカルにキャッシュする方法を共有します。ステーション B でダウンロードしたビデオをローカル エリアにキャッシュするにはどうすればよいですか? ブラウザのアドレス バーに「ibilibili」と入力し、Enter キーを押します。ダウンロード ページが表示されるので、ビデオの上にマウスを置き、[名前を付けて保存] を選択するとビデオをローカルにダウンロードできます。 2. bilibiliの後にjjを付けてbilibilijjにするのも同様で、ダウンロードページもあります。 3. 紹介文とコメントを見て、UP オーナーや他の人が

Ubuntu での Git インストール プロセス Ubuntu での Git インストール プロセス Mar 20, 2024 pm 04:51 PM

Git は、高速で信頼性が高く、適応性に優れた分散バージョン管理システムです。分散型の非線形ワークフローをサポートするように設計されており、あらゆる規模のソフトウェア開発チームに最適です。各 Git 作業ディレクトリは、すべての変更の完全な履歴を備えた独立したリポジトリであり、ネットワーク アクセスや中央サーバーがなくてもバージョンを追跡できます。 GitHub は、分散リビジョン管理のすべての機能を提供する、クラウド上でホストされる Git リポジトリです。 GitHub は、クラウド上でホストされる Git リポジトリです。 CLI ツールである Git とは異なり、GitHub には Web ベースのグラフィカル ユーザー インターフェイスがあります。これは、他の開発者との共同作業や、スクリプトへの変更の追跡などのバージョン管理に使用されます。

See all articles