如何在HTML网页中播放可在IPTV播放器运行的各类直播流URL？

一、替换原生video标签，使用HLS.js处理直播流 #

原生<video>标签对HLS（.m3u8）格式的支持存在局限性，尤其是Chrome浏览器对带特殊验证参数、非标准的流兼容性较差，改用HLS.js库可解决绝大多数播放问题。

实现步骤及代码示例 #

<!-- 引入HLS.js库 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- 视频播放器容器 -->
<video id="livePlayer" width="100%" height="100%" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjB3bOuf7_8FUI1wxGl4f-A3_C9LUpncH5FDp7N2uvXqNopsWb-XQj27o&s=10" controls></video>

<script>
// 检查浏览器是否支持HLS.js
if(Hls.isSupported()) {
  const video = document.getElementById('livePlayer');
  const hls = new Hls({
    // 配置请求头，适配需要验证的流
    xhrSetup: function(xhr) {
      // 针对需要特定User-Agent的流设置请求头
      xhr.setRequestHeader('User-Agent', 'REDLINECLIENT');
      // 若token需通过请求头传递，可在此添加配置
      // xhr.setRequestHeader('Authorization', 'Bearer RED_Hqqv1c3nXjqlzBGFPhFuTg==');
    }
  });
  // 替换为目标直播流URL
  const streamUrl = 'http://31.172.87.20:2200/EX/ptvsportshd-pa/tracks-v1a1/mono.m3u8?token=RED_Hqqv1c3nXjqlzBGFPhFuTg==,165803831455.4814651659=';
  hls.loadSource(streamUrl);
  hls.attachMedia(video);
  // 解析完成后自动播放
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play();
  });
}
// 兼容原生支持HLS的浏览器（如Safari）
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = streamUrl;
  video.addEventListener('loadedmetadata', () => {
    video.play();
  });
}
</script>

二、处理带特殊参数的m3u8链接 #

针对带有token、User-agent等参数的链接，需注意两点：

• 部分流服务器会验证请求的User-Agent，必须通过请求头传递（如上述代码的xhrSetup配置），不要将User-agent直接拼在URL中，避免URL格式错误导致解析失败。
• 确保URL中的token参数格式正确，不要包含非法字符。

三、解决跨域问题 #

若直播流服务器未配置CORS（跨域资源共享），浏览器会阻止加载流，可通过以下方式解决：

• 在自己的服务器配置反向代理，将直播流请求转发至目标服务器，使网页请求为同域地址。
• 示例Nginx代理配置：

location /live-proxy/ {
  proxy_pass http://31.172.87.20:2200/;
  proxy_set_header User-Agent "REDLINECLIENT";
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

配置完成后，网页中使用的流URL改为/live-proxy/EX/ptvsportshd-pa/tracks-v1a1/mono.m3u8?token=RED_Hqqv1c3nXjqlzBGFPhFuTg==,165803831455.4814651659=

四、处理非标准流链接 #

像http://103.99.249.107:81/play/a02m这类无后缀的链接，通常是服务器内部重定向到m3u8流，HLS.js会自动尝试解析，但需确保：

• 服务器返回的内容为标准m3u8格式。
• 若重定向过程需要验证，同样通过xhrSetup设置对应的请求头。

内容的提问来源于stack exchange，提问作者SF Saruf