使用JavaScript生成HLS Manifest时动态添加分片URL报错排查

AI 小北

2026-8-1

问题修复方案

错误根源

你遇到的undefined错误是因为代码里的两个关键问题：

循环变量写错：for循环用ii当计数器，但增量部分写的是i++，i根本没定义，导致ii永远停在0，循环没法正常遍历分片列表，segment变量要么没正确赋值，要么只拿到第一个分片。
未拼接所有分片：当前代码只把单个segment塞进了manifest，没有遍历所有分片生成对应的#EXTINF行，就算循环正常，也只能播放最后一个分片。

修复后的代码

const segment_files = ["https://gib.s3.amazonaws.com/segment/first.ts", "https://gib.s3.amazonaws.com/segment/2nd.ts", "https://gib.s3.amazonaws.com/segment/first.ts"];
let hls;
let player;

function generate_manifest() {
  if (!hls) {
    player = document.createElement("video");
    document.body.appendChild(player);
    player.pause();
    player.src = "";

    // 遍历所有分片，生成对应的EXTINF行
    let segmentsContent = "";
    for (let ii = 0; ii < segment_files.length; ii++) {
      const segmentUrl = segment_files[ii];
      // 每个分片对应一行EXTINF和URL
      segmentsContent += `#EXTINF:10.000,\n${segmentUrl}\n`;
    }

    // 拼接完整的manifest内容
    const manifestContent = `#EXTM3U\n#EXT-X-VERSION:3\n#EXT-X-PLAYLIST-TYPE:VOD\n#EXT-X-TARGETDURATION:11\n${segmentsContent}#EXT-X-ENDLIST`;
    const manifestfile = btoa(manifestContent);

    if (Hls.isSupported()) {
      hls = new Hls({
        enableWorker: true,
        lowLatencyMode: true,
      });
      hls.attachMedia(player);
      hls.loadSource("data:application/x-mpegURL;base64," + manifestfile);
      player.muted = true;
      player.play();
    }
  }
}