嵌入 BuzzSprout 的播客

支持
1

我尝试嵌入一个热门播客播放器的代码，但无论我如何调整设置，播放器都无法显示。代码非常简单。iframe 很容易搞定，但这个我却怎么也弄不明白。

2

您能发布相关代码吗（请去掉任何私人数据）？

1 个赞
3

FireShot Capture 157 - Buzzsprout - www.buzzsprout.com
FireShot Capture 157 - Buzzsprout - www.buzzsprout.com378×208 11.8 KB

4

好的，就 CSP 而言，您只需将 https://www.buzzsprout.com 添加到您的 CSP 中，如下所示：

image
image1354×304 34.7 KB

但请确保此嵌入代码也放置在您主题的正确位置。

2 个赞
5

好的，我已经添加了 URL，但它仍然无法渲染。不确定如何调整主题。我只是将相关代码粘贴到社区中涉及播客的帖子顶部。

6

啊，在普通帖子中您无法发布 <script> 标签。如果我们允许这样做，用户很容易让您的网站陷入混乱。您是否尝试过将播客的 URL 单独放在一行发布？我们有一个名为“一键嵌入”的功能，无需任何复杂的嵌入代码即可满足您的需求。

2 个赞
7

好的，我会去查一下。

1 个赞
8

嗨，Penar，

我刚才试了一下，它并没有实现一键嵌入：

https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3

既然无法使用他们的脚本标签，我还有其他选择吗？

9

这个脚本是可以一次性嵌入到网站主题中，还是必须放在 iframe 旁边？

编辑：我自己找到答案了，它是专门针对 iframe 的，他们这样设计真的不太有用。

10

这是一个直接的 MP3 文件，在这种情况下，您可以使用 HTML 音频标签：

<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
5 个赞
11

@pmusaraj 这非常有用，谢谢！

你好 @Stephen，

你说的“特定于 iframe”是什么意思？他们提供的是以下内容：

<div id='buzzsprout-small-player-1306987'></div>
<script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small'></script>

实际上，@Aaron_Norris，我刚刚意识到我可以跟随那个 JavaScript 脚本，并简单地自己进行解码：

unescape(decodeURI("%0A%0A%3Ciframe%20src=%22https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player&amp;iframe=true&amp;referrer=https%253A%252F%252Fwww.buzzsprout.com%252F1306987.js%253Fcontainer_id%253Dbuzzsprout-small-player-1306987%2526player%253Dsmall%22%20width=%22100%25%22%20height=%22200%22%20frameborder=%220%22%20scrolling=%22no%22%3E%3C/iframe%3E%0A%0A%0A")); 
// 返回这个 iframe
<iframe src="https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player&amp;iframe=true&amp;referrer=https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>

我可以在“允许的 iframe”中将 buzzsprout 加入白名单，它就能完美运行：

image
image1063×332 44.3 KB

2 个赞
12

你能用像我这样的“技术小白”也能听懂的方式解释一下吗？我想在我们的论坛里直接播放这个（注意：它不是上面那种 .mp3 文件）：

https://www.buzzsprout.com/1717287/8537076

13

你好，Nathan，

步骤如下：

  1. 进入管理控制台，搜索“允许的 iframe”。

  2. 添加 https://www.buzzsprout.com，然后点击勾选标记以保存更改。

  3. 将以下内容添加到你的帖子中：

    <div data-theme-iframe="no-scroll">
<iframe src="https://www.buzzsprout.com/1717287/8537076?client_source=small_player&amp;iframe=true&amp;referrer=https://lacomunidad.deliberatespanish.com?player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>
</div>

周围的 <div> 是可选的，但我使用它是因为我不希望我的 iframe 中出现滚动条。如果你想启用滚动条，需要再执行两个步骤：

  1. 进入你的当前主题，点击“编辑 CSS/HTML”，然后选择 </head> 标签页。
  2. 粘贴以下内容并保存：
    <script type="text/discourse-plugin" version="0.8.42">
  api.decorateCookedElement(post =>
    post.querySelectorAll('div[data-theme-iframe="no-scroll"] iframe').forEach(iframe => {
      iframe.setAttribute('scrolling', 'no');
    }),
    { 
      id: 'iframe-decorator',
      onlyStream: true,
    }
  );
</script>
4 个赞
14

太棒了！移除滚动条确实让体验提升了不少。

感谢这份清晰的指南——非常有帮助！！

1 个赞