高度な機能
M3U8 オンラインプレイヤーの高度な機能と設定オプションについて詳しく説明します。
プレイヤー設定
基本設定オプション
プレイヤーは様々な設定オプションを提供し、ストリーミング体験をカスタマイズできます:
自動再生設定
const playerConfig = {
autoplay: false, // 自動再生を無効化
muted: true, // 自動再生時はミュート
preload: 'metadata', // プリロード設定
};
品質設定
const qualityConfig = {
defaultQuality: 'auto', // デフォルト品質
qualityLevels: [
// 利用可能な品質レベル
{ name: '1080p', height: 1080 },
{ name: '720p', height: 720 },
{ name: '480p', height: 480 },
],
};
高度な設定
バッファリング設定
const bufferConfig = {
bufferSize: 30, // バッファサイズ(秒)
maxBufferLength: 60, // 最大バッファ長
minBufferLength: 5, // 最小バッファ長
bufferForPlayback: 10, // 再生開始前のバッファ
};
ネットワーク設定
const networkConfig = {
timeout: 10000, // タイムアウト(ミリ秒)
retryAttempts: 3, // 再試行回数
retryDelay: 1000, // 再試行遅延
maxBandwidth: 5000000, // 最大帯域幅(bps)
};
ストリーミング分析
リアルタイム統計
プレイヤーは詳細なストリーミング統計を提供します:
パフォーマンスメトリクス
// 統計情報の取得
const stats = player.getStats();
console.log({
bitrate: stats.bitrate, // 現在のビットレート
resolution: stats.resolution, // 現在の解像度
fps: stats.fps, // フレームレート
droppedFrames: stats.droppedFrames, // ドロップフレーム数
bufferHealth: stats.bufferHealth, // バッファの健全性
});
ネットワーク統計
const networkStats = player.getNetworkStats();
console.log({
downloadSpeed: networkStats.downloadSpeed, // ダウンロード速度
latency: networkStats.latency, // レイテンシ
packetLoss: networkStats.packetLoss, // パケットロス率
connectionType: networkStats.connectionType, // 接続タイプ
});
品質分析
品質メトリクス
// 品質分析の開始
player.startQualityAnalysis();
// 品質イベントの監視
player.on('qualitychange', (data) => {
console.log('品質変更:', {
from: data.from,
to: data.to,
reason: data.reason,
timestamp: data.timestamp,
});
});
エラーハンドリング
高度なエラー処理
エラー分類
// エラータイプの分類
const errorTypes = {
NETWORK_ERROR: 'network',
DECODE_ERROR: 'decode',
MANIFEST_ERROR: 'manifest',
SEGMENT_ERROR: 'segment',
};
// エラーハンドラーの設定
player.on('error', (error) => {
switch (error.type) {
case errorTypes.NETWORK_ERROR:
handleNetworkError(error);
break;
case errorTypes.DECODE_ERROR:
handleDecodeError(error);
break;
default:
handleGenericError(error);
}
});
自動回復機能
const recoveryConfig = {
autoRetry: true, // 自動再試行
maxRetries: 3, // 最大再試行回数
retryDelay: 2000, // 再試行遅延
fallbackQuality: '480p', // フォールバック品質
emergencyMode: true, // 緊急モード
};
エラー監視
エラーログ
// エラーログの設定
const errorLogger = {
logLevel: 'error',
logToConsole: true,
logToServer: true,
logToLocalStorage: true,
};
// エラー統計の取得
const errorStats = player.getErrorStats();
console.log({
totalErrors: errorStats.total,
errorRate: errorStats.rate,
lastError: errorStats.last,
errorHistory: errorStats.history,
});
パフォーマンス最適化
メモリ管理
メモリ使用量の監視
// メモリ使用量の監視
const memoryMonitor = {
enabled: true,
threshold: 100 * 1024 * 1024, // 100MB
cleanupInterval: 30000, // 30秒
maxMemoryUsage: 200 * 1024 * 1024, // 200MB
};
// メモリクリーンアップ
player.on('memorywarning', () => {
player.cleanupMemory();
console.log('メモリクリーンアップを実行しました');
});
リソース管理
// リソース管理の設定
const resourceConfig = {
maxConcurrentRequests: 6, // 最大同時リクエスト数
requestTimeout: 10000, // リクエストタイムアウト
cacheSize: 50 * 1024 * 1024, // キャッシュサイズ
cleanupOnPause: true, // 一時停止時のクリーンアップ
};
バッファ最適化
適応的バッファリング
const adaptiveBufferConfig = {
enabled: true,
minBuffer: 5, // 最小バッファ
maxBuffer: 30, // 最大バッファ
targetBuffer: 10, // 目標バッファ
bufferAdjustment: 0.1, // バッファ調整率
};
カスタムUI
UI カスタマイズ
カスタムコントロール
// カスタムコントロールの作成
const customControls = {
playButton: {
icon: 'custom-play-icon',
position: 'center',
size: 'large',
},
volumeSlider: {
orientation: 'vertical',
position: 'right',
width: 8,
},
progressBar: {
height: 6,
color: '#ff6b6b',
bufferColor: '#4ecdc4',
},
};
テーマ設定
const themeConfig = {
primaryColor: '#ff6b6b',
secondaryColor: '#4ecdc4',
backgroundColor: '#2c3e50',
textColor: '#ecf0f1',
borderRadius: 8,
fontSize: 14,
};
レスポンシブデザイン
ブレークポイント設定
const responsiveConfig = {
breakpoints: {
mobile: 768,
tablet: 1024,
desktop: 1200,
},
controls: {
mobile: ['play', 'volume', 'fullscreen'],
tablet: ['play', 'volume', 'progress', 'fullscreen'],
desktop: ['play', 'volume', 'progress', 'quality', 'fullscreen'],
},
};
イベント監視
イベントシステム
カスタムイベント
// カスタムイベントの定義
const customEvents = {
qualitychange: '品質変更',
bufferwarning: 'バッファ警告',
networkchange: 'ネットワーク変更',
userinteraction: 'ユーザー操作',
};
// イベントリスナーの設定
player.on('qualitychange', (data) => {
console.log('品質が変更されました:', data);
});
player.on('bufferwarning', (data) => {
console.log('バッファ警告:', data);
// 警告処理
});
イベント統計
// イベント統計の取得
const eventStats = player.getEventStats();
console.log({
totalEvents: eventStats.total,
eventTypes: eventStats.types,
eventFrequency: eventStats.frequency,
lastEvent: eventStats.last,
});
デバッグツール
デバッグモード
// デバッグモードの有効化
const debugConfig = {
enabled: true,
logLevel: 'debug',
showStats: true,
showNetworkInfo: true,
showBufferInfo: true,
};
// デバッグ情報の表示
player.enableDebugMode(debugConfig);
パフォーマンスプロファイリング
// パフォーマンスプロファイリング
const profiler = {
enabled: true,
sampleRate: 1000, // サンプルレート(ミリ秒)
metrics: ['cpu', 'memory', 'network'],
exportFormat: 'json',
};
// プロファイル結果の取得
const profile = player.getProfile();
console.log('パフォーマンスプロファイル:', profile);
高度な統合
API 統合
外部APIとの連携
// 外部APIとの統合
const apiIntegration = {
analytics: {
enabled: true,
endpoint: '/api/analytics',
events: ['play', 'pause', 'seek', 'qualitychange'],
},
recommendations: {
enabled: true,
endpoint: '/api/recommendations',
triggerEvents: ['ended', 'error'],
},
};
認証システム
// 認証システムの統合
const authConfig = {
enabled: true,
tokenEndpoint: '/api/auth/token',
refreshEndpoint: '/api/auth/refresh',
tokenExpiry: 3600000, // 1時間
autoRefresh: true,
};
プラグインシステム
カスタムプラグイン
// カスタムプラグインの作成
class CustomPlugin {
constructor(player) {
this.player = player;
this.init();
}
init() {
this.player.on('ready', () => {
this.setupCustomFeatures();
});
}
setupCustomFeatures() {
// カスタム機能の実装
}
}
// プラグインの登録
player.registerPlugin('custom', CustomPlugin);
これらの高度な機能により、M3U8 オンラインプレイヤーは様々な用途に応じてカスタマイズでき、最適なストリーミング体験を提供できます。