如何降低HLS的延遲？

對於需要較低延遲的場景，可以對HLS進行設定，比如減少同步持續時間(liveSyncDurationCount)和延遲時間(liveMaxLatencyDurationCount)。

一文搞懂HLS.js使用指南與最佳實踐，附程式碼範例和M3U8線上播放器案例

Q: HLS如何處理CORS問題?

如果後端設定了跨域校驗，HLS.js在載入跨域資源時需要正確設定CORS標頭。

Q: 如何最佳化啟動時間？

HLS.js會自動處理直播延遲問題，透過設定設定項lowLatencyMode和enableWorker來調整延遲時間。

一文搞懂HLS.js使用指南與最佳實踐

本文是HLS.js的終極使用指南，深入解釋HLS.js是什麼及其運作原理，闡述其最佳應用場景與優缺點。您將學到React/Vue.js如何整合HLS.js，並透過一個本站的M3U8線上播放器找到開發靈感，同時提供了解決CORS錯誤、直播延遲高、播放卡頓等常見問題的實用方案，附有程式碼範例與SEO最佳化建議，助您輕鬆建構相容所有瀏覽器的自適應影片播放體驗。

什麼是HLS.js

HLS（HTTP Live Streaming）是蘋果公司開發的基於HTTP的串流媒體傳輸協定，它透過將整個影片串流分割成一系列小的HTTP檔案（ts片段）來運作，並透過一個m3u8播放清單檔案來索引這些片段。HLS.js則是一個用JavaScript編寫的開源函式庫，它允許在支援Media Source Extensions的瀏覽器中播放HLS影片，而無需任何外掛程式。具體實作可以參考Github上的儲存庫：HLS.js

javascript

// HLS.js基本使用範例
if (Hls.isSupported()) {
  const video = document.getElementById('video');
  const hls = new Hls();
  hls.loadSource('https://example.com/playlist.m3u8');
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    video.play();
  });
}

HLS.js協定的核心思想

HLS（HTTP Live Streaming）協定的核心思想是將影片串流切分為小的TS（Transport Stream）檔案片段，並透過M3U8索引檔案來組織這些片段。這種設計使得影片播放可以適應不同網路條件，實現自適應位元率切換。

HLS檔案結構範例

plaintext

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.0,
segment0.ts
#EXTINF:10.0,
segment1.ts
#EXTINF:10.0,
segment2.ts
#EXT-X-ENDLIST

HLS的優缺點

優點

廣泛相容性：幾乎所有現代裝置（包括iOS、Android、桌面瀏覽器）都支援HLS
防火牆友善：使用標準的HTTP連接埠，避免了防火牆問題
自適應串流媒體：自動適應網路條件，提供最佳觀看體驗
內容保護：支援AES-128加密和DRM整合
易於CDN分發：可以利用現有的HTTP CDN基礎設施

缺點

延遲較高：相比WebRTC等協定，HLS的延遲通常更高（通常10-30秒）
檔案碎片化：產生大量小檔案，可能增加儲存和管理的複雜性
編碼複雜度：需要準備多個品質等級的影片版本

HLS的最佳使用場景

1.跨平台直播串流媒體

HLS是直播應用程式的理想選擇，特別是需要涵蓋多種裝置和平台的情況。由於HLS基於HTTP協定，它可以輕鬆穿越防火牆和代理伺服器，這是傳統RTMP等協定難以實現的。

HLS工作流程示意圖

2. 自適應位元率串流媒體

HLS支援自適應位元率（ABR）串流媒體，這意味著播放器可以根據使用者的網路條件自動選擇最合適的影片品質。這種能力對於提供順暢的觀看體驗至關重要。下面是一段自適應位元率切換demo:

javascript

// 監聽HLS.js級別切換事件
hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
  console.log(`切換到級別 ${data.level}，位元率: ${hls.levels[data.level].bitrate}`);
});

3. 大規模內容分發

由於HLS使用標準的HTTP伺服器和CDN，它可以輕鬆擴展到數百萬觀眾，而無需專門的串流媒體伺服器基礎設施，像Wowza、IIS等。

實際專案中的整合應用

HLS.js在React專案中的整合範例如下：

React整合範例

javascript

import React, { useRef, useEffect, useState } from 'react';
import Hls from 'hls.js';

const VideoPlayer = ({ source, config = {} }) => {
  const videoRef = useRef(null);
  const hlsRef = useRef(null);
  const [playerState, setPlayerState] = useState({
    isPlaying: false,
    currentTime: 0,
    duration: 0,
    volume: 1,
    qualityLevels: [],
    currentQuality: 0,
    buffering: false
  });

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const initializePlayer = () => {
      if (Hls.isSupported()) {
        const hls = new Hls({
          enableWorker: true,
          lowLatencyMode: true,
          backBufferLength: 90,
          ...config
        });

        hlsRef.current = hls;
        
        // 設定事件監聽
        setupHlsEvents(hls);
        
        hls.loadSource(source);
        hls.attachMedia(video);
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = source;
      }
    };

    const setupHlsEvents = (hls) => {
      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
        console.log('影片媒體已附加');
      });

      hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
        console.log('播放清單解析完成', data);
        setPlayerState(prev => ({
          ...prev,
          qualityLevels: data.levels,
          duration: video.duration
        }));
      });

      hls.on(Hls.Events.LEVEL_LOADED, (event, data) => {
        console.log('品質等級載入:', data);
      });

      hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
        setPlayerState(prev => ({
          ...prev,
          currentQuality: data.level
        }));
      });

      hls.on(Hls.Events.ERROR, (event, data) => {
        console.error('HLS錯誤:', data);
        handleHlsError(data);
      });
    };

    const handleHlsError = (data) => {
      if (data.fatal) {
        switch (data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            console.log('網路錯誤，嘗試重新載入...');
            hlsRef.current.startLoad();
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            console.log('媒體錯誤，嘗試恢復...');
            hlsRef.current.recoverMediaError();
            break;
          default:
            console.log('無法恢復錯誤，銷毀實例');
            hlsRef.current.destroy();
            break;
        }
      }
    };

    initializePlayer();

    return () => {
      if (hlsRef.current) {
        hlsRef.current.destroy();
      }
    };
  }, [source, config]);

  const handlePlayPause = () => {
    const video = videoRef.current;
    if (playerState.isPlaying) {
      video.pause();
    } else {
      video.play();
    }
    setPlayerState(prev => ({ ...prev, isPlaying: !prev.isPlaying }));
  };

  const changeQuality = (level) => {
    if (hlsRef.current) {
      hlsRef.current.currentLevel = level;
      setPlayerState(prev => ({ ...prev, currentQuality: level }));
    }
  };

  return (
    <div className="video-player">
      <video
        ref={videoRef}
        className="video-element"
        controls={false}
        onTimeUpdate={() => setPlayerState(prev => ({
          ...prev,
          currentTime: videoRef.current.currentTime
        }))}
      />
      
      <div className="player-controls">
        <button onClick={handlePlayPause}>
          {playerState.isPlaying ? '暫停' : '播放'}
        </button>
        
        <div className="quality-selector">
          <label>畫質選擇: </label>
          <select 
            value={playerState.currentQuality}
            onChange={(e) => changeQuality(parseInt(e.target.value))}
          >
            {playerState.qualityLevels.map((level, index) => (
              <option key={index} value={index}>
                {Math.round(level.bitrate / 1000)} kbps
              </option>
            ))}
          </select>
        </div>
        
        <div className="time-display">
          {formatTime(playerState.currentTime)} / {formatTime(playerState.duration)}
        </div>
      </div>
    </div>
  );
};

const formatTime = (seconds) => {
  if (!seconds) return '00:00';
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

export default VideoPlayer;

Vue.js整合範例

本範例中使用了Vue3和HLS.js，本站點提供的M3U8線上播放器就是基於以下範例實現的。

javascript

<template>
  <div class="video-player">
    <video 
      ref="videoElement" 
      class="video-element"
      @timeupdate="onTimeUpdate"
      @waiting="onBuffering"
      @canplay="onCanPlay"
    ></video>
    
    <div class="player-controls">
      <button @click="togglePlay">
        {{ isPlaying ? '暫停' : '播放' }}
      </button>
      
      <select v-model="currentQuality" @change="changeQuality">
        <option 
          v-for="(level, index) in qualityLevels" 
          :key="index" 
          :value="index"
        >
          {{ Math.round(level.bitrate / 1000) }} kbps
        </option>
      </select>
      
      <div class="progress">
        <span>{{ formatTime(currentTime) }}</span>
        <input 
          type="range" 
          :max="duration" 
          :value="currentTime"
          @input="seekTo"
          class="progress-bar"
        >
        <span>{{ formatTime(duration) }}</span>
      </div>
    </div>
    
    <div v-if="buffering" class="buffering-indicator">
      緩衝中...
    </div>
  </div>
</template>

<script>
import Hls from 'hls.js';

export default {
  name: 'HlsVideoPlayer',
  props: {
    source: {
      type: String,
      required: true
    },
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      hls: null,
      isPlaying: false,
      currentTime: 0,
      duration: 0,
      currentQuality: -1,
      qualityLevels: [],
      buffering: false
    };
  },
  mounted() {
    this.initializePlayer();
  },
  beforeUnmount() {
    this.destroyPlayer();
  },
  methods: {
    initializePlayer() {
      const video = this.$refs.videoElement;
      
      if (Hls.isSupported()) {
        this.hls = new Hls({
          enableWorker: true,
          lowLatencyMode: true,
          ...this.config
        });
        
        this.setupHlsEvents();
        this.hls.loadSource(this.source);
        this.hls.attachMedia(video);
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = this.source;
      }
    },
    
    setupHlsEvents() {
      this.hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
        this.qualityLevels = data.levels;
        this.duration = this.$refs.videoElement.duration;
      });
      
      this.hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
        this.currentQuality = data.level;
      });
      
      this.hls.on(Hls.Events.ERROR, (event, data) => {
        this.handleHlsError(data);
      });
    },
    
    handleHlsError(data) {
      console.error('HLS錯誤:', data);
      if (data.fatal) {
        switch (data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            this.hls.startLoad();
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            this.hls.recoverMediaError();
            break;
          default:
            this.hls.destroy();
            break;
        }
      }
    },
    
    togglePlay() {
      const video = this.$refs.videoElement;
      if (this.isPlaying) {
        video.pause();
      } else {
        video.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    
    changeQuality(event) {
      const level = parseInt(event.target.value);
      if (this.hls) {
        this.hls.currentLevel = level;
      }
    },
    
    seekTo(event) {
      const time = parseFloat(event.target.value);
      this.$refs.videoElement.currentTime = time;
      this.currentTime = time;
    },
    
    onTimeUpdate() {
      this.currentTime = this.$refs.videoElement.currentTime;
    },
    
    onBuffering() {
      this.buffering = true;
    },
    
    onCanPlay() {
      this.buffering = false;
    },
    
    formatTime(seconds) {
      if (!seconds) return '00:00';
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    },
    
    destroyPlayer() {
      if (this.hls) {
        this.hls.destroy();
      }
    }
  }
};
</script>

<style scoped>
.video-player {
  position: relative;
  max-width: 800px;
}

.video-element {
  width: 100%;
  background: #000;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5;
}

.progress {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 10px;
}

.progress-bar {
  flex-grow: 1;
}

.buffering-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

進階功能與最佳實踐

即時監控與統計

javascript

class HlsMonitor {
  constructor(hlsInstance) {
    this.hls = hlsInstance;
    this.stats = {
      bandwidth: 0,
      buffering: 0,
      qualitySwitches: 0,
      errors: 0
    };
    
    this.setupMonitoring();
  }
  
  setupMonitoring() {
    // 監控頻寬變化
    this.hls.on(Hls.Events.FRAG_LOADED, (event, data) => {
      this.updateBandwidthStats(data);
    });
    
    // 監控緩衝狀態
    this.hls.on(Hls.Events.BUFFER_CREATED, () => {
      this.stats.buffering++;
    });
    
    // 監控品質切換
    this.hls.on(Hls.Events.LEVEL_SWITCHED, () => {
      this.stats.qualitySwitches++;
    });
    
    // 錯誤監控
    this.hls.on(Hls.Events.ERROR, () => {
      this.stats.errors++;
    });
  }
  
  updateBandwidthStats(data) {
    const stats = data.stats;
    const loadTime = stats.loading.end - stats.loading.first;
    const bytesLoaded = stats.loaded;
    
    if (loadTime > 0) {
      this.stats.bandwidth = Math.round((bytesLoaded * 8) / (loadTime / 1000));
    }
  }
  
  getPerformanceReport() {
    return {
      ...this.stats,
      currentLevel: this.hls.currentLevel,
      levels: this.hls.levels,
      loadLevel: this.hls.loadLevel,
      nextLoadLevel: this.hls.nextLoadLevel
    };
  }
}

離線播放支援

javascript

// 使用Service Worker快取HLS片段
class HlsCacheManager {
  constructor() {
    this.cacheName = 'hls-cache-v1';
    this.initCache();
  }
  
  async initCache() {
    if ('serviceWorker' in navigator && 'caches' in window) {
      await this.registerServiceWorker();
    }
  }
  
  async registerServiceWorker() {
    const registration = await navigator.serviceWorker.register('/sw.js');
    
    navigator.serviceWorker.addEventListener('message', event => {
      if (event.data.type === 'CACHE_STATUS') {
        console.log('快取狀態:', event.data.status);
      }
    });
  }
  
  async cacheSegment(url, data) {
    try {
      const cache = await caches.open(this.cacheName);
      const response = new Response(data, {
        headers: { 'Content-Type': 'video/MP2T' }
      });
      await cache.put(url, response);
    } catch (error) {
      console.error('快取片段失敗:', error);
    }
  }
}

DRM整合

javascript

// Widevine DRM整合範例
class HlsDrmManager {
  constructor(videoElement) {
    this.video = videoElement;
    this.setupDrm();
  }
  
  async setupDrm() {
    if (!this.video.mediaKeys) {
      await this.initializeMediaKeys();
    }
  }
  
  async initializeMediaKeys() {
    try {
      const config = [{
        initDataTypes: ['cenc'],
        videoCapabilities: [{
          contentType: 'video/mp4;codecs="avc1.42E01E"'
        }]
      }];
      
      const access = await navigator.requestMediaKeySystemAccess(
        'com.widevine.alpha', 
        config
      );
      
      const mediaKeys = await access.createMediaKeys();
      await this.video.setMediaKeys(mediaKeys);
      
      this.setupSessionHandling();
    } catch (error) {
      console.error('DRM初始化失敗:', error);
    }
  }
  
  setupSessionHandling() {
    this.video.addEventListener('encrypted', (event) => {
      this.handleEncryptedEvent(event);
    });
  }
  
  async handleEncryptedEvent(event) {
    const session = this.video.mediaKeys.createSession();
    await session.generateRequest(event.initDataType, event.initData);
    
    // 取得授權
    const license = await this.fetchLicense(session);
    await session.update(license);
  }
  
  async fetchLicense(session) {
    // 實作授權取得邏輯
    const response = await fetch('/drm/license', {
      method: 'POST',
      body: session.getLicenseRequest()
    });
    return await response.arrayBuffer();
  }
}

效能最佳化與除錯技巧

1.效能監控面板

javascript

class HlsDebugPanel {
  constructor(hlsInstance, container) {
    this.hls = hlsInstance;
    this.container = container;
    this.monitor = new HlsMonitor(hlsInstance);
    
    this.createDebugPanel();
    this.startMonitoring();
  }
  
  createDebugPanel() {
    this.panel = document.createElement('div');
    this.panel.style.cssText = `
      position: fixed;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 10px;
      font-family: monospace;
      font-size: 12px;
      z-index: 1000;
      max-width: 300px;
    `;
    
    this.container.appendChild(this.panel);
  }
  
  startMonitoring() {
    setInterval(() => {
      this.updatePanel();
    }, 1000);
  }
  
  updatePanel() {
    const report = this.monitor.getPerformanceReport();
    const levels = report.levels || [];
    const currentLevel = levels[report.currentLevel] || {};
    
    this.panel.innerHTML = `
      <div><strong>HLS.js 除錯面板</strong></div>
      <div>頻寬: ${(report.bandwidth / 1000000).toFixed(2)} Mbps</div>
      <div>目前品質: ${currentLevel.bitrate ? Math.round(currentLevel.bitrate / 1000) + ' kbps' : 'N/A'}</div>
      <div>品質切換: ${report.qualitySwitches} 次</div>
      <div>緩衝事件: ${report.buffering} 次</div>
      <div>錯誤數: ${report.errors}</div>
      <div>可用品質等級: ${levels.length}</div>
    `;
  }
}

HLS使用過程中常見的問題和解決辦法

1. 如何處理CORS問題？

如果後端設定了跨域校驗，HLS.js在載入跨域資源時需要正確設定CORS標頭，可以參考以下demo範例:

javascript

// 在建立Hls實例時設定CORS
const hls = new Hls({
  xhrSetup: function(xhr, url) {
    xhr.withCredentials = true; // 如果需要發送憑證
  }
});

伺服器回應需要包含適當的CORS標頭：

text

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, OPTIONS
Access-Control-Expose-Headers: Content-Length, Content-Range

2. 如何最佳化啟動時間？

減少啟動時間的關鍵策略，可以參考以下demo範例：

javascript

// 設定HLS.js以最佳化啟動效能
const hls = new Hls({
  enableWorker: true, // 使用Web Worker提高效能
  lowLatencyMode: true, // 啟用低延遲模式
  backBufferLength: 90, // 設定合適的緩衝區長度
  maxBufferLength: 30,
  maxMaxBufferLength: 600,
  maxBufferSize: 60 * 1000 * 1000, // 60MB
  maxBufferHole: 0.5,
});

3. 如何處理播放錯誤？

在開發階段，可以新增錯誤處理邏輯，比如監聽錯誤事件，並給出友善提示給使用者。可以參考下方的demo範例：

javascript

hls.on(Hls.Events.ERROR, function(event, data) {
  console.error('播放錯誤:', data);
  
  if (data.fatal) {
    switch(data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        console.log('網路錯誤，嘗試恢復...');
        hls.startLoad();
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        console.log('媒體錯誤，嘗試恢復...');
        hls.recoverMediaError();
        break;
      default:
        console.log('無法恢復錯誤');
        hls.destroy();
        break;
    }
  }
});

4.如何實現低延遲HLS？

對於需要較低延遲的場景，可以對HLS進行設定，比如減少同步持續時間和延遲時間，可以參考下方的設定：

javascript

// 設定低延遲HLS
const hls = new Hls({
  lowLatencyMode: true,
  backBufferLength: 90,
  liveSyncDurationCount: 3, // 減少同步持續時間
  liveMaxLatencyDurationCount: 10, // 控制最大延遲
});

同時，伺服器端也需要相應設定：

使用較短的片段時長（2-4秒）
啟用LL-HLS（低延遲HLS）功能

總結

HLS.js是一個功能強大且高度可自訂的串流媒體播放解決方案。透過深入理解其架構和設定選項，開發者可以建構出適應各種場景的高效能影片播放應用程式。關鍵要點包括：

合理設定：根據應用場景調整緩衝區、網路逾時等參數
錯誤處理：實作完善的錯誤恢復機制，提升使用者體驗
效能監控：即時監控播放狀態，及時發現問題
框架整合：與現代前端框架深度整合，提供元件化解決方案
進階功能：充分利用DRM、離線快取等進階特性透過本文介紹的深度解析和實際應用技巧，開發者可以更好地掌握HLS.js，建構出專業級的串流媒體播放應用程式。

一文搞懂HLS.js使用指南與最佳實踐，附程式碼範例和M3U8線上播放器案例 ​

什麼是HLS.js ​

HLS.js協定的核心思想 ​

HLS檔案結構範例 ​

HLS的優缺點 ​

優點 ​

缺點 ​

HLS的最佳使用場景 ​

1.跨平台直播串流媒體 ​

2. 自適應位元率串流媒體 ​

3. 大規模內容分發 ​

實際專案中的整合應用 ​

React整合範例 ​

Vue.js整合範例 ​

進階功能與最佳實踐 ​

效能最佳化與除錯技巧 ​

HLS使用過程中常見的問題和解決辦法 ​

1. 如何處理CORS問題？ ​

2. 如何最佳化啟動時間？ ​

3. 如何處理播放錯誤？ ​

4.如何實現低延遲HLS？ ​

總結 ​

一文搞懂HLS.js使用指南與最佳實踐，附程式碼範例和M3U8線上播放器案例

什麼是HLS.js

HLS.js協定的核心思想

HLS檔案結構範例

HLS的優缺點

優點

缺點

HLS的最佳使用場景

1.跨平台直播串流媒體

2. 自適應位元率串流媒體

3. 大規模內容分發

實際專案中的整合應用

React整合範例

Vue.js整合範例

進階功能與最佳實踐

效能最佳化與除錯技巧

HLS使用過程中常見的問題和解決辦法

1. 如何處理CORS問題？

2. 如何最佳化啟動時間？

3. 如何處理播放錯誤？

4.如何實現低延遲HLS？

總結