MP3ファイルを埋め込むためのHTML5プレイヤー

以下のコードをディスコースのトピックに貼り付けて、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

おおお、それはまさに問題そのものですね……WP サイトを許可するように CSP を拡張して調整してみます . . .

「いいね!」 1

ブラウザのコンソールエラーログを確認してください。

「いいね!」 1

セキュリティの観点から、Discourse の投稿にはランダムに貼り付けられた JavaScript を実行させることは決してありません。

必要な機能が iframe で提供される場合のみ、サイト設定で特定のドメインを許可し、トピックに貼り付けることができます。

「いいね!」 2

管理者設定で CSP を完全に無効にしました(iframe が正しく動作しない原因がそれかどうかを確認するためだけです)。完全に貼り付けたコードは、私の最初の投稿にあるコードブロックにあります。

それでも動作しません…奇妙なことに、コンソールエラーは 3 つだけ表示され、すべて 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 を送信していますが、十分な「賢さ」を持った 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/ はメディアアイテムの WP URL ですが、やはり WP は本当に賢いワンボックス化に必要な十分な OG 情報を送信するほどスマートではありません…

…MP3 ファイルを直接アップロードしてみます。~40MB の MP3 ファイル(エピソード 80 本以上分)をホストされている Discourse に直接アップロードできるかどうかわかりません…

「いいね!」 1

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

…ああ、まさに私が心配していた壁ですね。ポッドキャストのホスティング/ソリューション全体をやり直す必要があります。(不可能ではありませんが、簡単でもありません。)

…もしかしたら、現在使用している WordPress 用プラグイン「Seriously Simple Podcasting」を開発している Castos に対して、美しく SoundCloud のようなワンボックスプレーヤーを作成するために必要な OG 情報を詳しく説明する機能リクエストを出せるかもしれません。

:man_shrugging:

「いいね!」 1

いくつかのサービスでは、提供内容に埋め込み可能なプレイヤーが含まれているようです。例えば、私の最初の Google 検索結果には以下のようなものがあります:

「いいね!」 3

はい。私の夢は、ポッドキャストで一般的になった MP3 ファイルの章マーカーを理解・サポートし、特定の時間コードに「スキップ」できるプレーヤーを見つけることです。私は、ショーのメモを含み、プレイヤーをオーディオの正しい場所に移動させ、章間をスキップできる機能を持つエピソード用の複雑なトピック投稿を作成しようとしていました。(しかし、話がそれました。これは Discourse 自体とは関係ありません。:))

「いいね!」 2

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