如何在Slider Revolution中嵌入radio.co在线电台流媒体代码

核心问题原因 #

你直接粘贴代码到文本层不生效，是因为Slider Revolution的文本层默认会转义<script>等可执行代码标签，不会实际执行对应的脚本，也不会渲染出播放器。

推荐操作方法 #

方法1：使用自定义HTML层（首选） #

• 进入目标Slider Revolution幻灯片的编辑界面，点击「添加层」，选择自定义内容分类下的「HTML」层，不要使用普通文本层
• 将播放器代码直接粘贴到HTML层的代码输入框：
  <script src="https://embed.radio.co/player/070d154.js"></script>
• 调整HTML层的尺寸、位置，建议高度设置不小于50px，避免播放器内容被裁切，保存后预览即可。

方法2：自定义脚本注入（方法1失效时使用） #

如果自定义HTML层内的脚本未自动执行，可以通过轮播全局自定义JS实现加载：

• 给你创建的空HTML层设置唯一ID为radio-player-container
• 打开当前轮播的全局设置面板，找到自定义CSS/JS选项卡，切换到JS编辑页，粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const playerWrap = document.querySelector('#radio-player-container');
  if(playerWrap) {
    const playerScript = document.createElement('script');
    playerScript.src = 'https://embed.radio.co/player/070d154.js';
    playerWrap.appendChild(playerScript);
  }
});

• 保存轮播设置，清除站点缓存后预览即可。

常见异常排查 #

如果配置完成后仍不显示播放器，优先检查两个点：

1. 站点是否配置了内容安全策略(CSP)，拦截了来自radio.co的脚本加载
2. 站点缓存/优化插件是否压缩、转义了插入的脚本代码，临时关闭缓存插件测试即可定位问题

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