Incrusta reproductor HTML5 para archivo MP3

[craigconstantine]

Esperaba simplemente pegar lo siguiente en un tema de Discourse y obtener un reproductor mp3 HTML5. (Esta fuente incrustada proviene de un plugin en mi sitio de WordPress.)

¿Alguna orientación, opinión…? ??

<script type='text/javascript'>
<!--//--><![CDATA[//><!--
		/*! Este archivo se generó automáticamente */
		!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, bienestar y honestidad&#8221; &#8212; movers mindset" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>```

[Overgrow]

¿Quizás CSP?

Mitigate XSS Attacks with Content Security Policy

This guide explains how to use Content Security Policy (CSP) to mitigate Cross-Site Scripting (XSS) attacks in Discourse. It covers CSP basics, configuration, and best practices. Required user level: Administrator Summary Content Security Policy (CSP) is a crucial security feature in Discourse that helps protect against Cross-Site Scripting (XSS) and other injection attacks. This guide covers the basics of CSP, how it’s implemented in Discourse, and how to c…

¿Lo estás pegando en una publicación o…?

[craigconstantine]

¡Oh, oh, oh! Eso parece exactamente el problema… Voy a experimentar ampliando la CSP para permitir el sitio de WP…

[Overgrow]

Verifica el registro de errores de la consola del navegador..

[Falco]

Los mensajes en Discourse nunca permitirán la ejecución de JS pegado al azar por razones de seguridad.

Si todo lo que necesitas está disponible a través del iframe, puedes permitir este dominio específico en la configuración del sitio y pegarlo en un tema.

[craigconstantine]

Desactivé por completo el CSP en el panel de administración (solo para ver si eso era lo que impedía que mi iframe funcionara correctamente) ten en cuenta que todo el contenido que estoy pegando está en el bloque de código en mi publicación original.

Aún así no funciona… curiosamente, solo obtengo tres errores en la consola, todos provenientes del CDN de Discourse… el código se inserta justo antes de “saber más”

[craigconstantine]

@Falco

Los mensajes en Discourse nunca permitirán la ejecución de JS pegado al azar por razones de seguridad.

…oh, tiene sentido ahora que lo dices.

Esperaba simplemente copiar y pegar un montón de código de inserción del plugin de WordPress que estoy usando; quería insertar un reproductor HTML5 para archivos de audio mp3. Así que eso no va a funcionar. Qué pena.

[Falco]

@craigconstantine

Quería incrustar un reproductor HTML5 para archivos de audio mp3. Así que eso no va a funcionar. Qué pena.

Tenemos un soporte extenso para reproductores incrustados y no incrustados, listo para usar.

Youtube

lofi hip hop radio - beats to relax/study to

Vimeo

WE ARE GEORGE FLOYD

SoundCloud

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

Incluso puedes subir archivos MP3 y MP4 directamente y se convertirán en un reproductor.

[craigconstantine]

…sí, pero ¿no todo eso depende de que Open Graph se envíe correctamente desde el otro servidor? (He visto y usado esos embeds de SoundCloud antes; son geniales.)

Mi sitio de WordPress envía Open Graph, pero no lo suficientemente inteligente…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ es una página con un reproductor HTML5… esta genera una onebox exactamente como esperaba/esperaba que lo hiciera…

Cara-Michele Nether: Aikido, wellness, and honesty

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/ es la URL de WP para el elemento multimedia… pero, de nuevo, WP no es lo suficientemente inteligente para enviar información OG suficiente para una onebox realmente inteligente…

083. Cara-Michele Nether: Aikido, wellness, and honesty

…Intentaré subir el archivo MP3 directamente… no estoy seguro de si puedo cargar un mp3 de ~40 Mb (por más de 80 episodios) en mi Discourse alojado…

[Falco]

Agregar un enlace a un archivo mp3 en una sola línea como:

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

se convierte en

[craigconstantine]

Permití la extensión mp3 para la carga, pero me encontré con un límite de tamaño

…lo cual tiene sentido.

En realidad, ya los tengo en un servicio de intercambio de archivos (nuestro propio sitio web)… pero cuando inserto una URL directa de un archivo mp3, solo obtengo un reproductor básico basado en el navegador [al menos, eso es lo que creo que es la siguiente línea]

[Falco]

Ese es un buen primer paso.

A partir de aquí, puedes empezar a buscar:

• Una plataforma de podcast incrustable mejor que puedas usar tanto en WordPress como en Discourse, aprovechando los iframes.

• Migrar tu reproductor actual de WordPress a Discourse.

[craigconstantine]

@Falco

Desde aquí puedes empezar a buscar entre:

• Una plataforma de podcasts integrada mejor que puedas usar tanto en WordPress como en Discourse aprovechando los iframes.

…sí, esa es la roca en la que temía estrellarme. Tendría que rehacer toda nuestra solución de alojamiento de podcasts. (No es imposible, pero tampoco es trivial.)

…quizá pueda enviar una solicitud de función a Castos (que crea el plugin Seriously Simple Podcasting para WordPress que estamos usando) explicando exactamente qué información OG se necesita para crear un reproductor onebox hermoso, al estilo de SoundCloud.

[Falco]

Parece que algunos servicios incluyen reproductores incrustables en su oferta, como mi primer resultado de Google:

[craigconstantine]

Sí. Mi sueño es encontrar uno que entienda y soporte las marcas de capítulos en archivos MP3, que ahora son comunes en los podcasts, y que permita saltar a códigos de tiempo específicos. Estaba intentando crear una publicación compleja sobre un tema para un episodio que incluyera notas del programa que llevaran al reproductor al punto correcto del audio y la capacidad de saltar entre capítulos. (Pero, me desvío. Esto no tiene nada que ver con Discourse en sí.