Встраивание подкастов из BuzzSprout

Поддержка
1

Я пытаюсь встроить код из популярного плеера подкастов, но ни одно изменение настроек не отображает плеер. Код очень простой. Еслиrames было легко. Этот я, кажется, не могу понять.

<div id=‘buzzsprout-small-player-1157708’></div><script type=‘text/javascript’ charset=‘utf-8’ src=‘Data Driven Real Estate’></script>

2

Можете ли вы опубликовать соответствующий код (без каких-либо конфиденциальных данных)?

3

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

4

OK, что касается CSP, вам просто нужно добавить https://www.buzzsprout.com в ваш CSP, как показано ниже:

image
image1354×304 34.7 KB

Но убедитесь, что этот элемент также размещён в правильном месте вашей темы.

5

Хорошо, я добавил URL, но он всё равно не отображается. Не уверен, как настроить тему. Я просто вставлял код в начало постов, связанных с подкастами в сообществе.

6

Ах, вы не можете вставить тег <script> в обычном посте. Если бы мы это разрешили, пользователи могли бы легко навести бардак на вашем сайте. Вы пробовали разместить просто URL подкаста на отдельной строке? У нас есть функция под названием oneboxing, и она может сработать в вашем случае без каких-либо сложных вставок.

7

Хорошо, я это проверю.

8

Привет, Пена,

Я только что попробовал это, и это не работает в режиме onebox:

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

Так как использование их тега скрипта невозможно, есть ли у меня другие варианты?

9

Можно ли внедрить этот скрипт один раз в тему сайта или он должен находиться рядом с iframe?

edit: ответил сам на свой вопрос — это специфично для iframe, что от них совсем не очень полезно.

10

Это прямой файл MP3, в этом случае вы можете использовать HTML-тег audio:

<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
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, я только что понял, что могу следовать за этим JS-скриптом и просто выполнить декодирование самостоятельно:

unescape(decodeURI("%0A%0A%3Ciframe%20src=%22https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player%26amp;iframe=true%26amp;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&iframe=true&referrer=https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>

Я могу добавить buzzsprout в белый список в allowed iframes, и всё работает идеально:

image
image1063×332 44.3 KB

12

Можете объяснить это так, чтобы такие простаки, как я, поняли? Я хочу, чтобы это воспроизводилось прямо на нашем форуме (обратите внимание: это не .mp3, как выше):

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

13

Привет, Натан,

Вот шаги:

  1. Перейдите в консоль администратора и найдите «allowed iframes» (разрешённые фреймы).

  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> необязателен, но я использую его, потому что не хочу видеть полосы прокрутки в моих фреймах. Если вы хотите включить их, вам нужно выполнить ещё два шага:

  1. Перейдите к активной теме, нажмите «Edit CSS/HTML» (Редактировать 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>
14

Отлично! Удаление прокрутки действительно улучшает ситуацию.

Спасибо за понятное руководство — очень полезно!!