嵌入MP3文件的HTML5播放器

我本来希望直接把下面的内容粘贴到 Discourse 话题中,就能得到一个 HTML5 的 MP3 播放器。(这个嵌入源来自我 WordPress 网站上的一个插件。)

有什么建议、想法……吗?

<blockquote class="wp-embedded-content"><a href="https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/">083. Cara-Michele Nether: Aikido, wellness, and honesty</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. Cara-Michele Nether: Aikido, wellness, and honesty&#8221; &#8212; movers mindset" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>
1 个赞

可能是 CSP 吗?

你是把它粘贴到帖子中了吗,还是……?

1 个赞

哦,这看起来和那个问题一模一样……我会调整 CSP 设置,允许 WordPress 站点……

1 个赞

请检查浏览器控制台的错误日志..

1 个赞

出于安全考虑,Discourse 中的帖子绝不会允许运行随意粘贴的 JavaScript 代码。

如果您所需的功能已由 iframe 提供,您可以在站点设置中允许该特定域名,并将其粘贴到主题中。

2 个赞

我完全在后台管理中关闭了 CSP(只是为了看看这是否是导致我的 iframe 无法正常工作的问题) 注意:我粘贴的完整内容位于我原始帖子中的代码块内。

仍然无法工作……奇怪的是,我只收到了三个控制台错误,全部来自 Discourse 的 CDN……代码被插入在“了解更多”之前

1 个赞

:confused: ……哦,听你这么一说,现在明白了。

我原本希望能直接复制粘贴我从正在使用的 WordPress 插件中获取的一堆嵌入代码;我想嵌入一个用于播放 mp3 音频文件的 HTML5 播放器。看来这行不通了,真遗憾。

1 个赞

我们开箱即用,全面支持嵌入和非嵌入播放器。

YouTube

Vimeo

SoundCloud

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

您甚至可以直接上传 MP3 和 MP4 文件,它们会自动变为播放器。

3 个赞

……是啊,但这不都是基于其他服务器正确发送了 Open Graph 信息吗?(我以前见过/用过那些 SoundCloud 嵌入——它们太棒了。)

我的 WordPress 站点会发送 Open Graph 信息,但还不够“聪明”……

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/ 是 WordPress 中该媒体项的 URL……但同样,WordPress 不够智能,无法发送足够的 Open Graph 信息来实现真正聪明的“一键预览”……

……我打算尝试直接上传 MP3 文件……不过不确定能否将大约 40MB 的 MP3(共 80 多集)上传到我托管的 Discourse 中……

1 个赞

在单行中添加指向 mp3 文件的链接,例如:

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

会变为

2 个赞

我允许上传 mp3 扩展名的文件,但刚刚遇到了文件大小限制

……这也在情理之中。

我实际上已经将这些文件托管在文件共享服务(我们自己的网站)上了……但当我直接粘贴一个 mp3 文件的 URL 时,只会得到一个简陋的基于浏览器的播放器 [至少我认为下一行就是这样的]

1 个赞

这是一个很好的第一步。

从这里开始,您可以考虑以下两种方案:

  • 寻找一个更优质的播客嵌入平台,该平台支持在 WordPress 和 Discourse 中通过 iframe 使用。

  • 将您当前的播放器从 WordPress 迁移到 Discourse。

2 个赞

……是的,这正是我担心会让我栽跟头的难题。我不得不重新搭建我们整个播客托管/解决方案。(并非不可能,但也绝非易事。)

……也许我可以向 Castos(我们使用的 WordPress 插件“Seriously Simple Podcasting”的开发者)提交一个功能请求,详细说明需要哪些 OG 信息,以打造一个类似 SoundCloud 的精美单盒播放器。
:man_shrugging:

1 个赞

看起来有些服务在其产品中确实提供了可嵌入的播放器,比如我的第一个谷歌搜索结果:

3 个赞

是的。我的梦想是找到一个能理解/支持 MP3 文件中章节标记的播放器,这些标记在播客中现已很常见,并且支持“跳转到”特定时间码。我曾尝试为一个剧集构建一个复杂的话题帖子,其中包含节目笔记,能让播放器跳转到音频的正确位置,并支持在章节之间跳转。(不过,我扯远了。这与 Discourse 本身无关。:slight_smile:

2 个赞

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.