API リファレンス

const player = new M3U8Player(options);

const options = {
  container: '#player', // プレイヤーコンテナのセレクタ
  autoplay: false, // 自動再生
  muted: true, // ミュート状態
  preload: 'metadata', // プリロード設定
  width: '100%', // プレイヤー幅
  height: 'auto', // プレイヤー高さ
  controls: true, // コントロール表示
  fluid: true, // レスポンシブ
  responsive: true, // レスポンシブ対応
  playbackRates: [0.5, 1, 1.25, 1.5, 2], // 再生速度
  defaultPlaybackRate: 1, // デフォルト再生速度
  language: 'ja', // 言語設定
  techOrder: ['html5'], // 技術の優先順位
  html5: {
    vhs: {
      overrideNative: true, // ネイティブ HLS をオーバーライド
      enableLowInitialPlaylist: true,
      smoothQualityChange: true,
      handlePartialData: true,
    },
  },
};

player.load(url);

try {
  await player.load('https://example.com/stream.m3u8');
  console.log('ストリームが正常に読み込まれました');
} catch (error) {
  console.error('ストリームの読み込みに失敗しました:', error);
}

player.play();

player.pause();

// 現在の再生時間を取得
const currentTime = player.currentTime();

// 再生時間を設定
player.currentTime(120); // 2分に設定

const duration = player.duration();

// 音量を取得 (0.0 - 1.0)
const volume = player.volume();

// 音量を設定
player.volume(0.5); // 50% に設定

// ミュート状態を取得
const isMuted = player.muted();

// ミュート状態を設定
player.muted(true); // ミュート
player.muted(false); // ミュート解除

const isPaused = player.paused();

const isEnded = player.ended();

const readyState = player.readyState();

const networkState = player.networkState();

player.on('loadstart', () => {
  console.log('ストリームの読み込みを開始しました');
});

player.on('loadedmetadata', () => {
  console.log('メタデータが読み込まれました');
  console.log('総時間:', player.duration());
});

player.on('loadeddata', () => {
  console.log('最初のフレームが読み込まれました');
});

player.on('canplay', () => {
  console.log('再生可能になりました');
});

player.on('canplaythrough', () => {
  console.log('最後まで再生可能になりました');
});

player.on('play', () => {
  console.log('再生を開始しました');
});

player.on('pause', () => {
  console.log('再生を一時停止しました');
});

player.on('ended', () => {
  console.log('再生が終了しました');
});

player.on('timeupdate', () => {
  const currentTime = player.currentTime();
  const duration = player.duration();
  const progress = (currentTime / duration) * 100;
  console.log(`再生進捗: ${progress.toFixed(1)}%`);
});

player.on('volumechange', () => {
  console.log('音量:', player.volume());
  console.log('ミュート:', player.muted());
});

player.on('error', (error) => {
  console.error('プレイヤーエラー:', error);
});

const hls = player.hls;

const levels = player.hls.levels;
console.log('利用可能な品質レベル:', levels);

// 現在の品質レベルを取得
const currentLevel = player.hls.currentLevel;

// 品質レベルを設定
player.hls.currentLevel = 2; // 3番目の品質レベルに設定

const nextLevel = player.hls.nextLevel;

const loadLevel = player.hls.loadLevel;

const bandwidth = player.hls.bandwidth;
console.log('推定帯域幅:', bandwidth, 'bps');

// 開始品質レベルを設定
player.hls.startLevel = 1;

player.hls.startLoad();

player.hls.stopLoad();

player.hls.swapAudioCodec();

player.hls.recoverMediaError();

player.on('hlsEvent', (event, data) => {
  console.log('HLS イベント:', event, data);
});

player.on('levelLoaded', (event, data) => {
  console.log('品質レベルが読み込まれました:', data);
});

player.on('levelSwitched', (event, data) => {
  console.log('品質レベルが切り替わりました:', data);
});

player.on('fragLoaded', (event, data) => {
  console.log('フラグメントが読み込まれました:', data);
});

player.on('eventName', callback);

player.off('eventName', callback);

player.one('eventName', callback);

player.trigger('customEvent', data);

player.on('qualitychange', (event, data) => {
  console.log('品質変更:', {
    from: data.from,
    to: data.to,
    reason: data.reason,
  });
});

player.on('bufferwarning', (event, data) => {
  console.log('バッファ警告:', data);
});

player.on('error', (error) => {
  if (error.code === 1) {
    console.log('メディアエラー: 中止');
  } else if (error.code === 2) {
    console.log('メディアエラー: ネットワーク');
  } else if (error.code === 3) {
    console.log('メディアエラー: デコード');
  } else if (error.code === 4) {
    console.log('メディアエラー: ソースがサポートされていません');
  }
});

player.on('error', (error) => {
  if (error.type === 'networkError') {
    console.log('ネットワークエラー');
  } else if (error.type === 'mediaError') {
    console.log('メディアエラー');
  }
});

player.on('error', (error) => {
  console.log('エラーが発生しました:', error);
  // プレイヤーが自動的に回復を試みます
});

player.on('error', (error) => {
  if (error.type === 'mediaError') {
    // メディアエラーの場合は手動で回復を試みる
    player.hls.recoverMediaError();
  }
});

function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  } else {
    return `${minutes}:${secs.toString().padStart(2, '0')}`;
  }
}

// 使用例
const currentTime = player.currentTime();
console.log('現在の時間:', formatTime(currentTime));

function getQualityLevels() {
  return player.hls.levels.map((level, index) => ({
    index: index,
    height: level.height,
    width: level.width,
    bitrate: level.bitrate,
    name: `${level.height}p`,
  }));
}

const qualityLevels = getQualityLevels();
console.log('利用可能な品質レベル:', qualityLevels);

function setQualityLevel(levelIndex) {
  if (levelIndex >= 0 && levelIndex < player.hls.levels.length) {
    player.hls.currentLevel = levelIndex;
    console.log(`品質レベルを ${levelIndex} に設定しました`);
  } else {
    console.error('無効な品質レベルです');
  }
}