if (Hls.isSupported()) {
  // 1. 配置參數(shù)（官方常用配置，按需調(diào)整）
  const hlsConfig = {
    startLevel: -1, // 自動選擇清晰度
    maxBufferLength: 30, // 視頻最大緩沖時長（秒）
    enableWorker: true, // 啟用 Web Worker 解析
    backBufferLength: 90 // 后臺緩沖保留時長（秒）
  };

  // 2. 創(chuàng)建 hls 實例
  const hls = new Hls(hlsConfig);
  const video = document.getElementById('videoPlayer');

  // 3. 綁定媒體元素（觸發(fā) MEDIA_ATTACHING → MEDIA_ATTACHED）
  hls.attachMedia(video);

  // 4. 監(jiān)聽媒體綁定成功事件，加載資源
  hls.on(Hls.Events.MEDIA_ATTACHED, () => {
    console.log('媒體元素綁定成功，加載 HLS 流');
    hls.loadSource('https://example.com/stream/main.m3u8'); // 加載主 m3u8
  });

  // 5. 可選：監(jiān)聽初始化相關(guān)事件
  hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
    console.log('主 m3u8 解析完成，可用清晰度：', data.levels.length);
    video.play().catch(err => console.log('自動播放失敗：', err));
  });

  // 6. 錯誤處理（按官方錯誤參數(shù)結(jié)構(gòu)）
  hls.on(Hls.Events.ERROR, (event, data) => {
    if (data.fatal) {
      switch (data.type) {
        case Hls.ErrorTypes.NETWORK_ERROR:
          console.log('網(wǎng)絡(luò)錯誤：', data.details, data.url);
          hls.startLoad(); // 重試加載
          break;
        case Hls.ErrorTypes.MEDIA_ERROR:
          console.log('媒體錯誤：', data.details);
          hls.recoverMediaError(); // 恢復媒體錯誤
          break;
        default:
          hls.destroy();
          break;
      }
    }
  });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // 降級：瀏覽器原生支持 HLS（如 Safari）
  video.src = 'https://example.com/stream/main.m3u8';
  video.play();
}

MEDIA_ATTACHING → MEDIA_ATTACHED → 
MANIFEST_LOADING → MANIFEST_LOADED → MANIFEST_PARSED → 
LEVEL_LOADING（首個清晰度） → LEVEL_LOADED → LEVEL_UPDATED → 
FRAG_LOADING（首個片段） → FRAG_LOADED → FRAG_DECRYPTED（加密片段） → 
FRAG_PARSING_INIT_SEGMENT → FRAG_PARSED → 
BUFFER_APPENDING → BUFFER_APPENDED → FRAG_BUFFERED → 
（播放開始）

LEVEL_SWITCHING → BUFFER_RESET → 
LEVEL_LOADING（新清晰度） → LEVEL_LOADED → LEVEL_UPDATED → 
FRAG_LOADING（新清晰度首個片段） → FRAG_LOADED → ...（片段處理流程） → 
LEVEL_SWITCHED → FRAG_BUFFERED → （繼續(xù)播放）

FRAG_CHANGED → FRAG_LOADING → FRAG_LOADED → 
（加密片段觸發(fā) KEY_LOADING → KEY_LOADED → FRAG_DECRYPTED） → 
FRAG_PARSED → BUFFER_APPENDING → BUFFER_APPENDED → FRAG_BUFFERED → 
（循環(huán)直到播放結(jié)束或切換清晰度）

ERROR（fatal: true） → 
（根據(jù)錯誤類型分支）
  - 網(wǎng)絡(luò)錯誤：MANIFEST_LOADING/FRAG_LOADING（重試）
  - 媒體錯誤：BUFFER_RESET → FRAG_LOADING（重新加載片段）
  - 幀率下降：FPS_DROP → FPS_DROP_LEVEL_CAPPING → LEVEL_SWITCHING（降清晰度）
→ 錯誤恢復 → 回到對應流程繼續(xù)播放

destroy() → DESTROYING → MEDIA_DETACHING → MEDIA_DETACHED

hls.on(Hls.Events.FRAG_LOADING, (event, data) => {
  console.log('片段開始加載：');
  console.log('完整請求 URL：', data.frag.url); // 如 https://.../lhg_segment_000.ts
  console.log('片段原始路徑（m3u8中定義）：', data.frag.rawUrl); // 如 lhg_segment_000.ts
  console.log('目標緩沖時間：', data.targetBufferTime);
  console.log('所屬清晰度 ID：', data.frag.level); // 通過片段對象獲取清晰度 ID
});

hls.on(Hls.Events.FRAG_LOADED, (event, data) => {
  console.log('片段加載完成，大?。?, data.payload.byteLength + ' 字節(jié)');
  console.log('加載耗時：', data.stats.loadTime + ' 毫秒');
});

hls.on(Hls.Events.LEVEL_SWITCHING, (event, data) => {
  console.log('切換清晰度：目標 ID =', data.level);
  console.log('目標清晰度碼率：', data.bitrate / 1000 + 'kbps');
});

hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
  console.log('清晰度切換完成，當前 ID =', data.level);
  const currentLevel = hls.levels[data.level];
  console.log('當前清晰度分辨率：', currentLevel.width + 'x' + currentLevel.height);
});

hls.on(Hls.Events.KEY_LOADING, (event, data) => {
  console.log('開始加載密鑰，對應片段：', data.frag.url);
});

hls.on(Hls.Events.KEY_LOADED, (event, data) => {
  console.log('密鑰加載完成，片段即將解密：', data.frag.url);
});

完整事件列表如下：

- `Hls.Events.MEDIA_ATTACHING` - 在 MediaSource 附加到媒體元素之前觸發(fā)
  - 數(shù)據(jù)：{ media: 媒體元素 }
- `Hls.Events.MEDIA_ATTACHED` - 當 MediaSource 成功附加到媒體元素時觸發(fā)
  - 數(shù)據(jù)：{ media: 媒體元素 }
- `Hls.Events.MEDIA_DETACHING` - 在 MediaSource 從媒體元素分離之前觸發(fā)
  - 數(shù)據(jù)：{ }
- `Hls.Events.MEDIA_DETACHED` - 當 MediaSource 從媒體元素分離后觸發(fā)
  - 數(shù)據(jù)：{ }
- `Hls.Events.BUFFER_RESET` - 當緩沖區(qū)即將重置時觸發(fā)
  - 數(shù)據(jù)：{ }
- `Hls.Events.BUFFER_CODECS` - 當確定需要為其創(chuàng)建緩沖區(qū)以推入數(shù)據(jù)的編解碼器時觸發(fā)
  - 數(shù)據(jù)：{ audio? : `[軌道對象數(shù)組]`, video? : `[軌道對象數(shù)組]` }
- `Hls.Events.BUFFER_CREATED` - 當源緩沖區(qū)（SourceBuffer）創(chuàng)建完成時觸發(fā)
  - 數(shù)據(jù)：{ tracks : { audio? : `[軌道對象數(shù)組]`, video? : `[軌道對象數(shù)組]`, audiovideo?: `[軌道對象數(shù)組]` } }
    接口 Track { id: 'audio' | 'main'（軌道類型標識）, buffer?: SourceBuffer（關(guān)聯(lián)的源緩沖區(qū)）, container: string（容器格式）, codec?: string（編解碼器類型）, initSegment?: Uint8Array（初始化片段數(shù)據(jù)）, levelCodec?: string（層級編解碼器信息）, metadata?: any（元數(shù)據(jù)） }
- `Hls.Events.BUFFER_APPENDING` - 當向緩沖區(qū)追加片段時觸發(fā)
  - 數(shù)據(jù)：{ parent（父對象）, type（類型）, frag（片段對象）, part（分片對象）, chunkMeta（分片元數(shù)據(jù)）, data（數(shù)據(jù)內(nèi)容） }
- `Hls.Events.BUFFER_APPENDED` - 當媒體片段成功追加到緩沖區(qū)后觸發(fā)
  - 數(shù)據(jù)：{ parent : 觸發(fā) `BUFFER_APPENDING` 的播放列表類型, type（類型）, frag（片段對象）, part（分片對象）, chunkMeta（分片元數(shù)據(jù)）, timeRanges : { video?: 視頻時間范圍, audio?: 音頻時間范圍, audiovideo?: 音視頻合并時間范圍 } }
- `Hls.Events.BUFFER_EOS` - 當流結(jié)束且需通知媒體緩沖區(qū)不再有新數(shù)據(jù)時觸發(fā)
  - 數(shù)據(jù)：{ type: 源緩沖區(qū)名稱（SourceBufferName） }
- `Hls.Events.BUFFER_FLUSHING` - 當媒體緩沖區(qū)需要刷新時觸發(fā)
  - 數(shù)據(jù)：{ startOffset（起始偏移量）, endOffset（結(jié)束偏移量）, type: 源緩沖區(qū)名稱（SourceBufferName） }
- `Hls.Events.BUFFER_FLUSHED` - 當媒體緩沖區(qū)刷新完成后觸發(fā)
  - 數(shù)據(jù)：{ type: 源緩沖區(qū)名稱（SourceBufferName） }
- `Hls.Events.BACK_BUFFER_REACHED` - 當達到 [backBufferLength](#backbufferlength) 配置項定義的后緩沖區(qū)閾值時觸發(fā)
  - 數(shù)據(jù)：{ bufferEnd: number（緩沖區(qū)結(jié)束位置時間戳） }
- `Hls.Events.MANIFEST_LOADING` - 標識清單文件（manifest）開始加載
  - 數(shù)據(jù)：{ url : 清單文件URL }
- `Hls.Events.MANIFEST_LOADED` - 清單文件加載完成后觸發(fā)
  - 數(shù)據(jù)：{ levels : [可用的質(zhì)量等級列表], audioTracks : [可用的音軌列表], captions? [可用的隱藏字幕媒體列表], subtitles?: [可用的字幕軌道列表], url : 清單文件URL, stats : [加載統(tǒng)計信息（LoaderStats）], sessionData: [解析后的 #EXT-X-SESSION-DATA 數(shù)據(jù)], networkDetails: [用于調(diào)試的加載器特定對象（XMLHttpRequest 或 fetch 響應對象）]}
- `Hls.Events.MANIFEST_PARSED` - 清單文件解析完成后觸發(fā)
  - 數(shù)據(jù)：{ levels : [可用的質(zhì)量等級列表 ], firstLevel : 清單中首次出現(xiàn)的質(zhì)量等級索引, audioTracks（音軌列表）, subtitleTracks（字幕軌道列表）, stats（加載統(tǒng)計信息）, audio: boolean（是否包含音頻）, video: boolean（是否包含視頻）, altAudio: boolean（是否包含備用音頻） }
- `Hls.Events.LEVEL_SWITCHING` - 當請求切換質(zhì)量等級時觸發(fā)
  - 數(shù)據(jù)：{ `level` 及等級對象屬性（詳見 [下方](#level) 說明） }
- `Hls.Events.LEVEL_SWITCHED` - 當質(zhì)量等級切換生效后觸發(fā)
  - 數(shù)據(jù)：{ level : 新等級的ID }
- `Hls.Events.LEVEL_LOADING` - 當請求加載等級播放列表時觸發(fā)（除非它是通過 `hls.loadSource()` 加載的唯一媒體播放列表）
  - 數(shù)據(jù)：{ url : 等級播放列表URL, level : 正在加載的等級ID, deliveryDirectives: 低延遲HLS（LL-HLS）傳輸指令，若不支持阻塞重載則為 `null` }
- `Hls.Events.LEVEL_LOADED` - 等級播放列表加載完成后觸發(fā)
  - 數(shù)據(jù)：{ details : [等級詳情（LevelDetails）], level : 已加載等級的ID, stats : [加載統(tǒng)計信息（LoadStats）] }
- `Hls.Events.LEVEL_UPDATED` - 當?shù)燃壖虞d完成后，基于歷史詳情更新該等級信息時觸發(fā)
  - 數(shù)據(jù)：{ details : [等級詳情（LevelDetails）], level : 已更新等級的ID }
- `Hls.Events.LEVEL_PTS_UPDATED` - 當解析片段后更新等級的PTS（演示時間戳）信息時觸發(fā)
  - 數(shù)據(jù)：{ details : [等級詳情（LevelDetails）], level : 已更新等級的ID, drift: 解析最后一個片段時觀察到的PTS偏移量, type（類型）, start（起始時間）, end（結(jié)束時間） }
- `Hls.Events.LEVELS_UPDATED` - 調(diào)用 `removeLevel()` 移除某個等級后觸發(fā)
  - 數(shù)據(jù)：{ levels : [可用的質(zhì)量等級列表 ] }
- `Hls.Events.AUDIO_TRACKS_UPDATED` - 通知音軌列表已更新時觸發(fā)
  - 數(shù)據(jù)：{ audioTracks : 音軌列表 }
- `Hls.Events.AUDIO_TRACK_SWITCHING` - 當請求切換音軌時觸發(fā)
  - 數(shù)據(jù)：{ id : 音軌ID, type : 播放列表類型 ('AUDIO' | 'main'), url : 音軌URL }
- `Hls.Events.AUDIO_TRACK_SWITCHED` - 當音軌實際切換完成后觸發(fā)
  - 數(shù)據(jù)：{ id : 音軌ID }
- `Hls.Events.AUDIO_TRACK_LOADING` - 音軌開始加載時觸發(fā)
  - 數(shù)據(jù)：{ url : 音軌URL, id : 音軌ID }
- `Hls.Events.AUDIO_TRACK_LOADED` - 音軌加載完成后觸發(fā)
  - 數(shù)據(jù)：{ details : [等級詳情（LevelDetails）], id : 音軌ID, stats : [加載統(tǒng)計信息（LoadStats）] }
- `Hls.Events.SUBTITLE_TRACKS_UPDATED` - 通知字幕軌道列表已更新時觸發(fā)
  - 數(shù)據(jù)：{ subtitleTracks : 字幕軌道列表 }
- `Hls.Events.SUBTITLE_TRACK_SWITCH` - 當字幕軌道切換時觸發(fā)
  - 數(shù)據(jù)：{ id : 字幕軌道ID, type? : 播放列表類型 ('SUBTITLES' | 'CLOSED-CAPTIONS'（隱藏字幕）), url? : 字幕軌道URL }
- `Hls.Events.SUBTITLE_TRACK_LOADING` - 字幕軌道開始加載時觸發(fā)
  - 數(shù)據(jù)：{ url : 字幕軌道URL, id : 字幕軌道ID } （原文此處字段描述有誤，已修正為字幕相關(guān)）
- `Hls.Events.SUBTITLE_TRACK_LOADED` - 字幕軌道加載完成后觸發(fā)
  - 數(shù)據(jù)：{ details : [等級詳情（LevelDetails）], id : 字幕軌道ID, stats : [加載統(tǒng)計信息（LoadStats）] }
- `Hls.Events.SUBTITLE_FRAG_PROCESSED` - 當字幕片段處理完成后觸發(fā)
  - 數(shù)據(jù)：{ success : boolean（處理是否成功）, frag : [已處理的片段對象], error?: [字幕解析錯誤信息（若有）] }
- `Hls.Events.INIT_PTS_FOUND` - 當找到第一個時間戳時觸發(fā)
  - 數(shù)據(jù)：{ d : 解復用器ID, initPTS: 初始演示時間戳, timescale: 時間刻度, frag : 片段對象 }
- `Hls.Events.FRAG_LOADING` - 片段開始加載時觸發(fā)
  - 數(shù)據(jù)：{ frag : 片段對象, targetBufferTime: number | null [期望通過該片段填充的緩沖區(qū)空白時間] }
- `Hls.Events.FRAG_LOAD_PROGRESS` - [已廢棄]
- `Hls.Events.FRAG_LOAD_EMERGENCY_ABORTED` - 標識因緊急降級切換而中止片段加載
  - 數(shù)據(jù)：{ frag : 片段對象 }
- `Hls.Events.FRAG_LOADED` - 片段加載完成后觸發(fā)
  - 數(shù)據(jù)：{ frag : 片段對象, payload : 片段數(shù)據(jù)負載, stats : [加載統(tǒng)計信息（LoadStats）]}
- `Hls.Events.FRAG_DECRYPTED` - 片段解密完成后觸發(fā)
  - 數(shù)據(jù)：{ id : 解復用器ID, frag : 片段對象, payload : 片段數(shù)據(jù)負載, stats : { tstart（開始時間）, tdecrypt（解密耗時）}}
- `Hls.Events.FRAG_PARSING_INIT_SEGMENT` - 當從片段中提取初始化片段（Init Segment）后觸發(fā)
  - 數(shù)據(jù)：{ id: 解復用器ID, frag : 片段對象, moov : MP4的moov盒數(shù)據(jù), codecs : 解析片段時發(fā)現(xiàn)的編解碼器信息 }
- `Hls.Events.FRAG_PARSING_USERDATA` - 當SEI（補充增強信息）文本解析完成后觸發(fā)
  - 數(shù)據(jù)：{ id : 解復用器ID, frag: 片段對象, samples : [ SEI樣本PES包 ], details: [等級詳情（LevelDetails）] }
- `Hls.Events.FRAG_PARSING_METADATA` - 當ID3元數(shù)據(jù)解析完成后觸發(fā)
  - 數(shù)據(jù)：{ id: 解復用器ID, frag : 片段對象, samples : [ ID3 PES包 - PTS和DTS時間戳為相對時間，單位為秒], details: [等級詳情（LevelDetails）] }
- `Hls.Events.FRAG_PARSING_DATA` - [已廢棄]
- `Hls.Events.FRAG_PARSED` - 片段解析完成后觸發(fā)
  - 數(shù)據(jù)：{ frag : 片段對象, partIndex（分片索引） }
- `Hls.Events.FRAG_BUFFERED` - 當片段重新封裝后的MP4盒數(shù)據(jù)全部追加到SourceBuffer后觸發(fā)
  - 數(shù)據(jù)：{ id: 解復用器ID, frag : 片段對象, stats : [加載統(tǒng)計信息（LoadStats）] }
- `Hls.Events.FRAG_CHANGED` - 當與當前視頻播放位置匹配的片段發(fā)生變化時觸發(fā)
  - 數(shù)據(jù)：{ id : 解復用器ID, frag : 片段對象 }
- `Hls.Events.FPS_DROP` - 當最近監(jiān)控周期內(nèi)的幀率下降超過設(shè)定閾值時觸發(fā)
  - 數(shù)據(jù)：{ curentDropped : 最近監(jiān)控周期內(nèi)的丟幀數(shù), currentDecoded : 最近監(jiān)控周期內(nèi)的解碼幀數(shù), totalDroppedFrames : 該視頻元素的總丟幀數(shù) }（原文curentDropped拼寫有誤，已保留原字段名）
- `Hls.Events.FPS_DROP_LEVEL_CAPPING` - 當幀率下降觸發(fā)自動質(zhì)量等級限制時觸發(fā)
  - 數(shù)據(jù)：{ level: 幀率控制器建議的新自動等級限制值, droppedLevel : 因丟幀過多將被限制的等級 }
- `Hls.Events.ERROR` - 錯誤事件標識
  - 數(shù)據(jù)：{ type : 錯誤類型, details : 錯誤詳情, fatal : 錯誤是否致命, 其他錯誤相關(guān)數(shù)據(jù) }
- `Hls.Events.DESTROYING` - 當 hls.js 實例開始銷毀時觸發(fā)。與 `MEDIA_DETACHED` 的區(qū)別在于：例如為了處理插播廣告（mid-rolls），可能需要分離并重新附加視頻到 hls.js 實例
  - 數(shù)據(jù)：{ }
- `Hls.Events.KEY_LOADING` - 解密密鑰開始加載時觸發(fā)
  - 數(shù)據(jù)：{ frag : 片段對象 }
- `Hls.Events.KEY_LOADED` - 解密密鑰加載完成后觸發(fā)
  - 數(shù)據(jù)：{ frag : 片段對象 }
- `Hls.Events.STREAM_STATE_TRANSITION` - [已廢棄]
- `Hls.Events.NON_NATIVE_TEXT_TRACKS_FOUND` - 當 `renderTextTracksNatively` 設(shè)為 `false` 時，發(fā)現(xiàn)新的隱藏字幕或字幕軌道時觸發(fā)（替代向視頻元素添加 TextTrack 的行為）
  - 數(shù)據(jù)：{ tracks: 軌道數(shù)組<{ label（軌道標簽）, kind（軌道類型）, default（是否默認軌道）, subtitleTrack（字幕軌道對象）}> }
- `Hls.Events.CUES_PARSED` - 當 `renderTextTracksNatively` 設(shè)為 `false` 時，解析到新的隱藏字幕或字幕提示（cues）時觸發(fā)
  - 數(shù)據(jù)：{ type（類型）, cues（提示信息列表）, track（所屬軌道） }