Встраивание HTML5-плеера для MP3-файла

Я надеялся просто вставить приведённый ниже код в тему Discourse и получить HTML5-плеер для MP3. (Этот встроенный источник поступает из плагина на моём сайте WordPress.)

Советы, мысли, … ??

<blockquote class="wp-embedded-content"><a href="https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/">083. Кара-Мишель Нидер: Айкидо, благополучие и честность</a></blockquote>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
		/*! This file is auto-generated */
		!function(d,l){"use strict";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){var r,a,i,s,n,o=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),c=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]');for(r=0;r<c.length;r++)c[r].style.display="none";for(r=0;r<o.length;r++)if(a=o[r],e.source===a.contentWindow){if(a.removeAttribute("style"),"height"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;a.height=i}if("link"===t.message)if(s=l.createElement("a"),n=l.createElement("a"),s.href=a.getAttribute("src"),n.href=t.value,n.host===s.host)if(l.activeElement===a)d.top.location.href=t.value}}},e)d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",t,!1),d.addEventListener("load",t,!1);function t(){if(!o){o=!0;var e,t,r,a,i=-1!==navigator.appVersion.indexOf("MSIE 10"),s=!!navigator.userAgent.match(/Trident.*rv:11\./),n=l.querySelectorAll("iframe.wp-embedded-content");for(t=0;t<n.length;t++){if(!(r=n[t]).getAttribute("data-secret"))a=Math.random().toString(36).substr(2,10),r.src+="#?secret="+a,r.setAttribute("data-secret",a);if(i||s)(e=r.cloneNode(!0)).removeAttribute("security"),r.parentNode.replaceChild(e,r)}}}}(window,document);
//--><!]]>
</script><iframe sandbox="allow-scripts allow-same-origin" security="restricted" src="https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/embed/" width="500" height="350" title="&#8220;083. Кара-Мишель Нидер: Айкидо, благополучие и честность&#8221; &#8212; movers mindset" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>

Возможно, CSP?

Вы вставляете это в пост или как-то иначе?

О-о-о, это выглядит точно как проблема… Я попробую настроить расширение CSP, чтобы разрешить сайт WP…

Проверьте журнал ошибок консоли браузера ..

Сообщения в Discourse никогда не позволят выполнять случайно вставленный JS-код из соображений безопасности.

Если вам достаточно того, что предоставляет iframe, вы можете разрешить этот конкретный домен в настройках сайта и вставить его в тему.

Я полностью отключил CSP в админке (просто чтобы проверить, не она ли мешает моему iframe работать корректно) обратите внимание, что полный код, который я вставляю, находится в блоке кода в моём первом сообщении.

Всё ещё не работает… странно, но в консоли я вижу только три ошибки, и все они исходят от CDN Discourse. . . код вставляется сразу перед фразой «узнать больше».

:confused: …а, теперь, когда вы это говорите, всё становится понятным.

Я надеялся просто скопировать и вставить кучу кода для встраивания из плагина WordPress, который я использую; я хотел встроить HTML5-плеер для аудиофайлов mp3. Так что, похоже, это не сработает. Обидно.

У нас есть широкая поддержка встраиваемых и невстраиваемых плееров «из коробки».

YouTube

Vimeo

SoundCloud

https://soundcloud.com/silkmusic/silkm265-1?in=silkmusic/sets/silkm265

Вы также можете загружать файлы MP3 и MP4 напрямую, и они автоматически превращаются в плееры.

…да, но разве всё это не основано на том, что Open Graph корректно отправляется с другого сервера? (Я видел/использовал такие встраивания SoundCloud раньше — они потрясающие.)

Мой сайт на WordPress отправляет Open Graph, но не достаточно умный OG…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ — это страница с HTML5-плеером… она точно так же превращается в одну карточку, как я и ожидал/надеялся…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/ — это URL в WordPress для медиафайла… но, опять же, WordPress недостаточно умен, чтобы отправить достаточно информации OG для действительно умной карточки…

…Я попробую загрузить MP3-файл напрямую… не уверен, смогу ли я разместить ~40 Мб mp3 (по 80+ эпизодов) на своём размещённом Discourse…

Добавление ссылки на mp3-файл в одну строку, например:

https://moversmindset.com/podcast-player/7711/083-cara-michele-nether-aikido-wellness-and-honesty.mp3

превращается в

Я разрешил загрузку файлов с расширением mp3, но столкнулся с ограничением по размеру.

…что вполне логично.

Фактически они уже размещены на сервисе обмена файлами (на нашем собственном веб-сайте)… но когда я вставляю прямую ссылку на mp3-файл, появляется простой браузерный плеер [по крайней мере, я так полагаю, это следующая строка].

Это хороший первый шаг.

Отсюда вы можете начать поиск:

  • Более подходящей платформы для встраивания подкастов, которую можно использовать как в WordPress, так и в Discourse с помощью iframes
  • Переноса вашего текущего плеера из WordPress в Discourse.

…да, это именно та скала, о которую я боялся разбиться. Пришлось бы полностью переделывать наше решение для хостинга подкастов. (Не невозможно, но и не просто.)

…может быть, я могу отправить запрос на добавление функции в Castos (разработчики плагина Seriously Simple Podcasting для WordPress, который мы используем), объяснив, какая именно OG-информация нужна для создания красивого одностраничного плеера в стиле SoundCloud.

:man_shrugging:

Похоже, что некоторые сервисы действительно включают в свои предложения возможность встраивания плееров, как, например, в первом результате поиска Google:

Да. Моя мечта — найти плеер, который понимает и поддерживает метки глав в MP3-файлах, что сейчас стало распространённым в подкастах, а также умеет переходить к конкретным временным меткам. Я пытался создать сложную тему для выпуска с заметками из шоу, которые отправляли бы слушателя к нужному моменту в аудио и позволяли перемещаться между главами. (Но я отвлекаюсь. Это не имеет прямого отношения к Discourse. :slight_smile: