流媒体协议：HLS、DASH、MSE 与低延迟直播的完整技术图谱

#EXTM3U
#EXT-X-VERSION:3
 
# 1080p 版本
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080,CODECS="avc1.64002A,mp4a.40.2",FRAME-RATE=30
https://cdn.example.com/1080p/playlist.m3u8
 
# 720p 版本
#EXT-X-STREAM-INF:BANDWIDTH=2800000,RESOLUTION=1280x720,CODECS="avc1.4D401F,mp4a.40.2",FRAME-RATE=30
https://cdn.example.com/720p/playlist.m3u8
 
# 360p 版本（弱网兜底）
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360,CODECS="avc1.42E01E,mp4a.40.2",FRAME-RATE=30
https://cdn.example.com/360p/playlist.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:6        ← 每个分片的最大时长（秒）
#EXT-X-MEDIA-SEQUENCE:0        ← 第一个分片的序号（直播时滚动更新）
 
#EXTINF:6.006,                 ← 该分片实际时长
seg000.ts
#EXTINF:6.006,
seg001.ts
#EXTINF:6.006,
seg002.ts
 
#EXT-X-ENDLIST               ← 点播视频有此标签；直播没有，播放器持续轮询

# 使用 fMP4 分片的 HLS 媒体播放列表
#EXTM3U
#EXT-X-VERSION:7                       ← 必须是 v7+
#EXT-X-TARGETDURATION:6
#EXT-X-MAP:URI="init.mp4"              ← 初始化片段（包含 moov 信息）
 
#EXTINF:6.000,
seg001.m4s
#EXTINF:6.000,
seg002.m4s
#EXT-X-ENDLIST

# 生成单码率 HLS
ffmpeg -i input.mp4 \
  -c:v libx264 -crf 23 -preset fast \
  -c:a aac -b:a 128k \
  -f hls \
  -hls_time 6 \              # 分片时长（秒）
  -hls_list_size 0 \         # 保留所有分片（0=全部，点播用）
  -hls_segment_filename "segments/seg%03d.ts" \
  output.m3u8
 
# 生成多码率 HLS（自适应码率的核心）
ffmpeg -i input.mp4 \
  -map 0:v -map 0:a -c:v libx264 -crf 28 -vf scale=640:-2  -c:a aac -b:a 96k  \
    -f hls -hls_time 6 -hls_list_size 0 \
    -hls_segment_filename "360p/seg%03d.ts" 360p/playlist.m3u8 \
  -map 0:v -map 0:a -c:v libx264 -crf 23 -vf scale=1280:-2 -c:a aac -b:a 128k \
    -f hls -hls_time 6 -hls_list_size 0 \
    -hls_segment_filename "720p/seg%03d.ts" 720p/playlist.m3u8 \
  -map 0:v -map 0:a -c:v libx264 -crf 20 -vf scale=1920:-2 -c:a aac -b:a 192k \
    -f hls -hls_time 6 -hls_list_size 0 \
    -hls_segment_filename "1080p/seg%03d.ts" 1080p/playlist.m3u8

<?xml version="1.0" encoding="UTF-8"?>
<MPD
  xmlns="urn:mpeg:dash:schema:mpd:2011"
  type="static"                          <!-- static=点播; dynamic=直播 -->
  mediaPresentationDuration="PT2M30S"    <!-- 总时长 2分30秒 -->
  minBufferTime="PT4S"                   <!-- 最小缓冲时间 -->
  profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">
 
  <Period id="1" start="PT0S">
 
    <!-- 视频 AdaptationSet -->
    <AdaptationSet
      contentType="video"
      mimeType="video/mp4"
      segmentAlignment="true">
 
      <!-- 1080p 版本 -->
      <Representation
        id="v-1080p"
        bandwidth="5000000"
        width="1920" height="1080"
        codecs="avc1.64002A"
        frameRate="30">
        <SegmentTemplate
          initialization="1080p/init.mp4"
          media="1080p/seg$Number$.m4s"
          startNumber="1"
          duration="180000"
          timescale="30000"/>
      </Representation>
 
      <!-- 720p 版本 -->
      <Representation
        id="v-720p"
        bandwidth="2800000"
        width="1280" height="720"
        codecs="avc1.4D401F"
        frameRate="30">
        <SegmentTemplate
          initialization="720p/init.mp4"
          media="720p/seg$Number$.m4s"
          startNumber="1"
          duration="180000"
          timescale="30000"/>
      </Representation>
 
    </AdaptationSet>
 
    <!-- 音频 AdaptationSet -->
    <AdaptationSet
      contentType="audio"
      mimeType="audio/mp4"
      lang="zh">
      <Representation
        id="a-128k"
        bandwidth="128000"
        codecs="mp4a.40.2"
        audioSamplingRate="44100">
        <SegmentTemplate
          initialization="audio/init.mp4"
          media="audio/seg$Number$.m4s"
          startNumber="1"
          duration="192000"
          timescale="44100"/>
      </Representation>
    </AdaptationSet>
 
  </Period>
</MPD>

const video = document.querySelector('video');
const mediaSource = new MediaSource();
 
// 第一步：将 MediaSource 绑定到 video
video.src = URL.createObjectURL(mediaSource);
 
// 第二步：等待 sourceopen 事件，创建 SourceBuffer
mediaSource.addEventListener('sourceopen', async () => {
  // 创建视频 SourceBuffer（必须是 fMP4 格式）
  const videoBuffer = mediaSource.addSourceBuffer(
    'video/mp4; codecs="avc1.64002A"'
  );
  // 创建音频 SourceBuffer
  const audioBuffer = mediaSource.addSourceBuffer(
    'audio/mp4; codecs="mp4a.40.2"'
  );
 
  // 第三步：下载初始化片段（init.mp4，包含 moov 信息）
  const initData = await fetch('init.mp4').then(r => r.arrayBuffer());
 
  // 第四步：追加初始化数据
  await appendBuffer(videoBuffer, initData);
 
  // 第五步：持续下载并追加媒体分片
  for (let i = 1; i <= totalSegments; i++) {
    const segData = await fetch(`seg${i}.m4s`).then(r => r.arrayBuffer());
    await appendBuffer(videoBuffer, segData);
  }
 
  // 第六步：通知 MSE 数据已全部追加完毕（点播时）
  mediaSource.endOfStream();
});
 
// 辅助函数：等待 SourceBuffer 空闲后追加数据
function appendBuffer(sourceBuffer, data) {
  return new Promise((resolve, reject) => {
    if (sourceBuffer.updating) {
      // 等待上一次 append 完成
      sourceBuffer.addEventListener('updateend', () => {
        sourceBuffer.appendBuffer(data);
      }, { once: true });
    } else {
      sourceBuffer.appendBuffer(data);
    }
    sourceBuffer.addEventListener('updateend', resolve, { once: true });
    sourceBuffer.addEventListener('error', reject, { once: true });
  });
}

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls></video>
 
<script>
const video = document.getElementById('video');
const hlsSrc = 'https://cdn.example.com/master.m3u8';
 
if (Hls.isSupported()) {
  // 大多数浏览器：使用 hls.js + MSE
  const hls = new Hls({
    // 核心配置
    maxBufferLength: 30,          // 最大缓冲时长（秒）
    maxMaxBufferLength: 60,       // 缓冲上限
    startLevel: -1,               // -1 = 自动选择起始码率
    abrEwmaDefaultEstimate: 500000, // 初始带宽估算（bps）
    lowLatencyMode: false,        // 低延迟模式（直播用）
  });
 
  hls.loadSource(hlsSrc);
  hls.attachMedia(video);
 
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    console.log('m3u8 解析完成，可用码率数:', hls.levels.length);
    video.play();
  });
 
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // iOS Safari：原生支持 HLS，直接赋值 src
  video.src = hlsSrc;
  video.play();
}
</script>

hls.on(Hls.Events.ERROR, (event, data) => {
  console.error('[HLS Error]', data.type, data.details, data.fatal);
 
  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.error('致命错误，销毁播放器');
        hls.destroy();
        showErrorUI('视频播放失败，请刷新页面');
        break;
    }
  }
});
 
// 监听码率切换事件
hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
  const level = hls.levels[data.level];
  console.log(`码率切换到: x @ kbps`);
});

// 安装：npm install shaka-player
import shaka from 'shaka-player';
 
async function initShakaPlayer(videoEl, manifestUrl) {
  // 安装 polyfill
  shaka.polyfill.installAll();
 
  if (!shaka.Player.isBrowserSupported()) {
    console.error('浏览器不支持 Shaka Player');
    return;
  }
 
  const player = new shaka.Player();
  await player.attach(videoEl);
 
  // 配置
  player.configure({
    streaming: {
      bufferingGoal: 30,           // 目标缓冲时长
      rebufferingGoal: 2,          // 重新缓冲触发阈值
      bufferBehind: 30,            // 保留的已播放缓冲
    },
    abr: {
      enabled: true,               // 启用自适应码率
      defaultBandwidthEstimate: 1e6, // 初始带宽估算 1Mbps
    },
  });
 
  // 错误处理
  player.addEventListener('error', (event) => {
    console.error('Shaka Error:', event.detail.code, event.detail.message);
  });
 
  // 加载媒体（自动识别 HLS 或 DASH）
  try {
    await player.load(manifestUrl);
    await videoEl.play();
    console.log('播放器加载成功');
  } catch (err) {
    console.error('加载失败:', err);
  }
 
  return player;
}

class AIVideoStreamPlayer {
  constructor(videoEl) {
    this.video = videoEl;
    this.mediaSource = new MediaSource();
    this.sourceBuffer = null;
    this.queue = [];           // 待追加的分片队列
    this.isAppending = false;  // 防止并发 append
 
    this.video.src = URL.createObjectURL(this.mediaSource);
    this.mediaSource.addEventListener('sourceopen', () => this.onSourceOpen());
  }
 
  onSourceOpen() {
    this.sourceBuffer = this.mediaSource.addSourceBuffer(
      'video/mp4; codecs="avc1.64002A, mp4a.40.2"'
    );
    this.sourceBuffer.addEventListener('updateend', () => {
      this.isAppending = false;
      this.processQueue(); // 每次 append 完成后处理队列
    });
    this.sourceBuffer.addEventListener('error', (e) => {
      console.error('SourceBuffer 错误:', e);
    });
  }
 
  // 接收新的分片数据（由 WebSocket/SSE 调用）
  appendChunk(arrayBuffer) {
    this.queue.push(arrayBuffer);
    this.processQueue();
  }
 
  processQueue() {
    if (this.isAppending || this.queue.length === 0) return;
    if (!this.sourceBuffer || this.sourceBuffer.updating) return;
 
    const chunk = this.queue.shift();
    this.isAppending = true;
 
    try {
      this.sourceBuffer.appendBuffer(chunk);
    } catch (e) {
      if (e.name === 'QuotaExceededError') {
        // 缓冲区满，清理已播放的数据
        this.evictBuffer();
        this.queue.unshift(chunk); // 放回队列重试
      } else {
        console.error('appendBuffer 失败:', e);
      }
      this.isAppending = false;
    }
  }
 
  // 清理已播放的缓冲区（避免内存溢出）
  evictBuffer() {
    const currentTime = this.video.currentTime;
    if (currentTime > 30) {
      // 删除当前位置 30s 之前的缓冲数据
      this.sourceBuffer.remove(0, currentTime - 30);
    }
  }
 
    // 通知生成完毕（点播场景）
  finalize() {
    const checkAndEnd = () => {
      if (this.queue.length === 0 && !this.isAppending) {
        this.mediaSource.endOfStream();
        console.log('视频流已全部推送完毕');
      } else {
        // 还有数据待处理，等待后再检查
        setTimeout(checkAndEnd, 100);
      }
    };
    checkAndEnd();
  }
 
  destroy() {
    if (this.mediaSource.readyState === 'open') {
      this.mediaSource.endOfStream();
    }
    URL.revokeObjectURL(this.video.src);
  }
}

// Node.js 服务端示例
app.get('/video-stream', async (req, res) => {
  res.setHeader('Content-Type', 'video/mp4');
  res.setHeader('Transfer-Encoding', 'chunked');
  res.setHeader('Access-Control-Allow-Origin', '*');
 
  // 先推送初始化片段（init.mp4）
  const initSegment = await generateInitSegment();
  res.write(initSegment);
 
  // 持续推送 AI 生成的媒体分片
  for await (const segment of aiVideoGenerator()) {
    res.write(segment);
  }
 
  res.end();
});
 
// 前端用 Fetch ReadableStream 接收
async function streamPlay(videoPlayer) {
  const response = await fetch('/video-stream');
  const reader = response.body.getReader();
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      videoPlayer.finalize();
      break;
    }
    videoPlayer.appendChunk(value.buffer);
  }
}

// 前端 WebSocket 接收
const ws = new WebSocket('wss://api.example.com/video-stream');
ws.binaryType = 'arraybuffer'; // 必须设置为 arraybuffer
 
const player = new AIVideoStreamPlayer(document.querySelector('video'));
 
ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    // 二进制数据：视频分片
    player.appendChunk(event.data);
  } else {
    // 文本数据：控制消息
    const msg = JSON.parse(event.data);
    if (msg.type === 'done') player.finalize();
    if (msg.type === 'progress') updateProgressUI(msg.percent);
  }
};
 
ws.onerror = (err) => console.error('WebSocket 错误:', err);
ws.onclose = () => console.log('连接关闭');

// 服务端通过 SSE 推送新分片的 URL
const eventSource = new EventSource('/video-events');
 
eventSource.onmessage = async (event) => {
  const { segmentUrl, type } = JSON.parse(event.data);
 
  if (type === 'init') {
    const data = await fetch(segmentUrl).then(r => r.arrayBuffer());
    player.appendChunk(data);
  } else if (type === 'segment') {
    const data = await fetch(segmentUrl).then(r => r.arrayBuffer());
    player.appendChunk(data);
  } else if (type === 'done') {
    player.finalize();
    eventSource.close();
  }
};

# Nginx 流媒体服务配置示例
 
server {
  # 1. 必须允许 Range 请求（支持视频跳转）
  add_header Accept-Ranges bytes;
 
  # 2. CORS 配置（允许跨域加载 m3u8 和分片）
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods "GET, OPTIONS";
  add_header Access-Control-Allow-Headers "Range";
 
  # 3. m3u8 文件不缓存（直播场景），分片文件长期缓存
  location ~* \.m3u8$ {
    add_header Cache-Control "no-cache, no-store";
    add_header Content-Type "application/vnd.apple.mpegurl";
  }
 
  location ~* \.(ts|m4s|mp4)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
 
  # 4. 开启 gzip（对 m3u8 和 MPD 文本文件有效）
  gzip on;
  gzip_types application/vnd.apple.mpegurl application/dash+xml;
}