HLS.js使用ガイドとベストプラクティス
HLSストリーミング再生の核心技術を1記事で理解。完全なコード例とよくある問題の解決策を収録。
続きを読む →プラグイン不要・高パフォーマンスなWeb FLVライブ配信再生ソリューション
FLV.jsはBilibili（B站）がオープンソース化した純JavaScript製FLVプレーヤーです。Flashプラグインを使用せずに、MSE（Media Source Extensions）に対応した最新ブラウザでFLV動画ストリームを再生できます。Flashの廃止後にWebブラウザでのFLVライブ配信再生が難しくなる中、その課題を解決するために登場しました。
Flash時代、RTMP/FLVはライブ配信の主流ソリューションでした。しかし各ブラウザがFlashのサポートを終了するにつれ、Webでのライブ配信は転換期を迎えました。FLV.jsの登場によりHTTP-FLVベースのライブ配信ソリューションが継続され、CDNのHTTP配信と組み合わせることで低遅延・高同時接続のライブ配信体験を実現できるようになりました。
FLV.jsプロジェクトはBilibiliフロントエンドチームから生まれました。当初はB站のライブ配信事業におけるプレーヤーの課題を解決するためのものでした。2016年、Flashの衰退に伴い、B站は純Webベースのライブ配信再生ソリューションを必要とし、このプロジェクトを立ち上げました。
FLV.jsは2016年に正式にオープンソース化され、フロントエンドによるライブ配信分野の代表的プロジェクトとして急速に普及し、数多くのライブ配信プラットフォームや動画サイトで採用されるようになりました。その成功はHTTP-FLVライブ配信ソリューションの普及を促し、MSEベースのプレーヤープロジェクトが次々と生まれるきっかけにもなりました。
FLV.jsの基本的な動作原理は以下の通りです：HTTPリクエストでFLVストリームデータを取得し、ブラウザ上でJavaScriptがFLVコンテナフォーマットを解析し、音声・動画データをMSE API経由でブラウザ標準のvideoタグに渡してデコード・再生します。
FLV.jsによるFLVファイルの解析プロセスは以下の通りです：
flv.jsとmpegts.jsを混同する方が多いですが、実は同じ作者が開発した2つの異なるプロジェクトです：
| 特徴 | flv.js | mpegts.js |
|---|---|---|
| 開発者 | Bilibili | 元flv.js作者個人 |
| 対応フォーマット | FLV | FLV、MPEG-TS |
| 更新状況 | 低速 | 活発 |
| 機能 | 基本機能 | 多くの新機能 |
| 推奨シーン | FLV再生のみ必要な場合 | より多くのフォーマットと機能が必要な場合 |
以下に完全な例を示し、WebページでFLV.jsを使用してFLV動画ストリームを再生する方法を解説します。
最も簡単な方法はCDN経由で導入することです：
<script src="https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js"></script>npm経由でインストールすることもできます：
npm install flv.js --saveページにvideo要素を追加します：
<video id="videoElement" controls autoplay muted playsinline></video>FLV.jsを使用してプレーヤーインスタンスを作成し、動画ストリームをロードします：
if (flvjs.isSupported()) {
const videoElement = document.getElementById('videoElement');
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'https://example.com/live/stream.flv',
isLive: true
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}type：メディアタイプ。'flv' または 'mp4'url：動画ストリームのURLisLive：ライブストリームかどうかcors：CORSクロスドメインを有効にするかどうかwithCredentials：Cookieを送信するかどうかhasAudio：音声を含むかどうかhasVideo：動画を含むかどうかライブ配信シーンでは、遅延は非常に重要な指標です。FLV.jsには遅延を最適化するための様々な設定オプションが用意されています。
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'https://example.com/live/stream.flv',
isLive: true
}, {
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
liveBufferLatencyChasing: true,
liveBufferLatencyMaxLatency: 1.5,
liveBufferLatencyMinRemain: 0.5,
autoCleanupSourceBuffer: true
});enableWorker: true：Web Workerを有効化し、解析によるメインスレッドのブロックを回避enableStashBuffer: false：スタッシュバッファを無効化し、遅延を削減stashInitialSize: 128：初期バッファサイズ（KB）。小さめに設定liveBufferLatencyChasing: true：ライブ遅延追いかけ再生を有効化liveBufferLatencyMaxLatency: 1.5：最大遅延1.5秒。超過すると加速再生liveBufferLatencyMinRemain: 0.5：最小バッファ0.5秒autoCleanupSourceBuffer: true：バッファを自動クリーンアップし、メモリ増加を防止FLV.jsは豊富なイベントシステムを提供しており、様々な状態変化を監視できます。
flvPlayer.on(flvjs.Events.ERROR, function(errorType, errorDetail, errorInfo) {
console.log('エラー:', errorType, errorDetail, errorInfo);
});
flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function() {
console.log('ロード完了');
});
flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, function() {
console.log('予期せぬ切断から復旧');
});
flvPlayer.on(flvjs.Events.MEDIA_INFO, function(mediaInfo) {
console.log('メディア情報:', mediaInfo);
});
flvPlayer.on(flvjs.Events.STATISTICS_INFO, function(statInfo) {
console.log('統計情報:', statInfo);
});本番環境では、充実したエラー処理が必須です。FLV.jsのエラーにはいくつかの種類があり、それぞれに対応した処理が必要です。
NETWORK_ERROR：ネットワークエラー。接続失敗、タイムアウトなどMEDIA_ERROR：メディアエラー。デコード失敗、フォーマット非対応などOTHER_ERROR：その他のエラーflvPlayer.on(flvjs.Events.ERROR, function(errorType, errorDetail, errorInfo) {
console.error('プレーヤーエラー:', errorType, errorDetail);
if (errorType === flvjs.ErrorTypes.NETWORK_ERROR) {
if (errorDetail === flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {
console.log('HTTPステータスコードエラー。リンクが無効になっている可能性があります');
} else if (errorDetail === flvjs.ErrorDetails.NETWORK_TIMEOUT) {
console.log('ネットワークタイムアウト。再接続を試みます...');
retryPlay();
}
} else if (errorType === flvjs.ErrorTypes.MEDIA_ERROR) {
console.log('メディアエラー。復旧を試みます...');
flvPlayer.recoverMediaError();
}
});
function retryPlay() {
flvPlayer.unload();
flvPlayer.load();
flvPlayer.play();
}ライブ配信シーンでは、ネットワークの変動による切断はよくある問題です。自動再接続機構の実装を推奨します：
let retryCount = 0;
const maxRetry = 5;
flvPlayer.on(flvjs.Events.ERROR, function(errorType) {
if (errorType === flvjs.ErrorTypes.NETWORK_ERROR && retryCount < maxRetry) {
retryCount++;
setTimeout(function() {
flvPlayer.unload();
flvPlayer.load();
flvPlayer.play();
}, 2000 * retryCount);
}
});
flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, function() {
retryCount = 0;
});初期化前にブラウザの対応状況を確認し、非対応の場合は親切なメッセージを表示しましょう：
if (flvjs.isSupported()) {
initPlayer();
} else {
alert('お使いのブラウザはFLV再生に対応していません。Chrome、Firefox、またはEdgeブラウザを使用してください');
}ページを離れる時や動画を切り替える時は、必ずプレーヤーを破棄してリソースを解放してください：
window.addEventListener('beforeunload', function() {
if (flvPlayer) {
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
}
});動画サーバーに正しいCORSヘッダーが設定されていることを確認してください。設定されていないとFLV.jsはロードできません。必要なレスポンスヘッダーは以下の通りです：
Access-Control-Allow-Origin: *（または特定のドメイン）Access-Control-Allow-Methods: GET, POST, OPTIONSAccess-Control-Expose-Headers: Content-Lengthライブストリームを一時停止してから再生を再開すると、一時停止した位置から再生が続くため、遅延が蓄積します。一時停止後の再生再開時は最新位置にシークすることを推奨します：
videoElement.addEventListener('play', function() {
if (flvPlayer && flvPlayer.config.isLive) {
const livePosition = videoElement.buffered.end(0) - 1;
if (videoElement.currentTime < livePosition - 3) {
videoElement.currentTime = livePosition;
}
}
});FLV.jsは優れたオープンソースのFLVプレーヤーで、Webブラウザでのライブ配信に高パフォーマンス・低遅延のソリューションを提供します。純JavaScript実装のためプラグインは不要で、HTTP-FLVプロトコルと組み合わせることで、Flash時代に迫る低遅延体験を実現できます。
手軽にFLV再生を試してみたい方は、ぜひ当サイトのFLV/RTMPオンラインプレーヤーをご利用ください。ライブ配信アドレスを貼り付けるだけで、コードを書くことなくブラウザで視聴できます。
当サイトの無料FLVオンラインプレーヤーで、アドレスを貼り付けるだけで再生できます。スクリーンショット、録画、低遅延モードに対応しています
今すぐ体験 ➡