如何在代码中回显变量（流媒体URL）实现HLS播放？

你遇到的核心问题是没有正确把PHP的$url变量值传递给JavaScript，还错误地把字面量字符串'#url'传给了hls.loadSource()，而非实际的流媒体URL。我来帮你修正代码并解释原因：

正确的代码实现 #

<?php 
$url = "http://149.56.21.86:25461/live/demivadoiscar/Quz2LG/158.ts"; 
?>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video height="600" id="video" controls></video>
<script>
// 安全将PHP变量转换为JavaScript字符串
const streamUrl = '<?php echo htmlspecialchars($url, ENT_QUOTES); ?>';
const videoElement = document.getElementById('video');

// 初始化hls.js并加载直播流
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(streamUrl); // 这里使用变量传递真实URL，而非字面量'#url'
  hls.attachMedia(videoElement);
  
  // 可选：清单解析完成后自动播放
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    videoElement.play();
  });
}
</script>
</body>
</html>

为什么之前的写法无效？ #

1. 字面量字符串错误：你写的hls.loadSource('#url')是直接传递了字符串'#url'，而不是PHP变量$url存储的实际流媒体地址，hls.js自然无法找到对应的资源。
2. PHP转JS的语法错误：之前的var url = <?ph...缺少引号包裹，且未对URL中的特殊字符转义，会导致JavaScript解析失败，变量无法正确赋值。

关键注意事项 #

• 必须用引号把PHP输出的内容包裹，让JavaScript识别这是一个合法字符串。
• 使用htmlspecialchars($url, ENT_QUOTES)可以安全转义URL中的特殊字符（比如引号、换行），避免破坏JS字符串结构，同时降低XSS风险。
• 确保JavaScript代码在PHP变量输出之后执行，这样才能获取到正确的URL值。

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