如何将PHP接口返回的流媒体地址传入Clappr播放器

问题根因 #

你当前写法无法播放的核心原因是：Clappr播放器的source参数需要直接传入可解析的流媒体地址（即你PHP接口返回的.m3u8地址），直接传入PHP接口地址时，Clappr会将该接口当作流媒体文件本身解析，自然无法识别播放。

方案1：前端先请求接口获取真实地址，再初始化播放器（无需修改PHP代码） #

前端代码修改为如下写法

<div id="player"></div>
<script>
// 先请求PHP接口拉取真实流地址
fetch("https://myexample.com/test.php?id=xyz")
  .then(response => response.text()) // 读取接口返回的纯文本地址
  .then(streamUrl => {
    // 拿到地址后初始化播放器，trim用于清除可能存在的多余换行、空格
    var player = new Clappr.Player({
      source: streamUrl.trim(),
      autoPlay: true,
      height: 360,
      width: '100%',
      parentId: "#player"
    });
  })
  .catch(err => console.error("流地址获取失败：", err));
</script>

额外注意事项

如果前端页面和PHP接口不在同一个域名下，需要在PHP接口顶部添加CORS头允许跨域请求：

<?php
// 生产环境建议替换为你前端页面的实际域名，不要用*
header('Access-Control-Allow-Origin: *');
// 你原有接口代码
$_GET["id"];
// curl请求逻辑
$stream = $result;
echo $stream;
?>

方案2：PHP接口做302跳转（无需修改前端原有代码） #

这是更简便的方案，Clappr发起请求时会自动跟随302重定向，你只需要修改PHP接口的返回逻辑即可，原有前端代码完全不用动：

<?php
$_GET["id"];
// 原有curl请求逻辑
$stream = $result;
// 替换原来的echo输出，改为302跳转
header("Location: " . $stream);
exit;
?>

该方案无需处理跨域问题，适配性更高。

内容的提问来源于stack exchange，提问作者Khoa Hoc