Podlove Player Embed Code konfigurieren (Meta-Daten on the fly ersetzen)

Podlove Publisher
1

Gibt es eine Möglichkeit, den Embed Code vom Podlove-Player individuell zu konfigurieren? Derzeit wird in den Meta-Daten vom Publisher ja einfach die Konfiguration des Publishers mitgeliefert. Es gibt aber genug Gründe, bestimmte Elemente davon nicht oder anders im Embed Code haben zu wollen.

Bei mir geht es konkret um:

  • Episoden Thumbnail an/aus machen
  • Ein anderes CSS laden bzw. andere Farben (die gewählten Farben sehen zwar auf meinem Wordpress gut aus, aber auf anderen Seiten hätte ich gerne was neutrales - und das vom CDN mitgeliefertes CSS wird ja dann sofort durch das von Wordpress ersetzt).

Ich frage mich, ob ich hier direkt im Embed-Code etwas ändern kann, was bequem nur diese Sachen überschreibt, ohne dass ich jetzt die Meta-Daten komplett manuell bzw. doppelt anlegen müsste.

2

Hi,

ich erneuere diese Frage mal, da ich gerade etwas Ähnliches probiere. Offenbar kann man nämlich übers Config-Menü des Webplayers (Wordpress: Einstellungen/Webplayer) seinen Player beliebig konfigurieren und über die Embed-URL jeweils via config/theme/template/ anpassen.

Das klappt bei mir fürs Theme, nicht aber für Template und Config. Ich hätte nämlich gerne die Share-Buttons und den Abo-Button, der laut der config/default auch angezeigt werden müsste. Tut er aber nicht:

https://astrogeo.de/wp-content/plugins/podlove-web-player/web-player/share.html?config=https://astrogeo.de/wp-json/podlove-web-player/shortcode/config/default/theme/riffreporter/template/default&episode=https://astrogeo.de/wp-json/podlove-web-player/shortcode/publisher/2902

Mache ich was falsch? @ericteubert

3

Hier nochmal der Vergleich - Shortcode vs. iframe-embed mit gleicher config/template/theme-Angabe:

[podlove-web-player theme="riffreporter" config="riffreporter" template="riffreporter" post="2902"]

<iframe title="Podlove Web Player: AstroGeo - Fehlende Neutrinos: Als die Sonne kaputt war" width="100%" height="250" src="https://astrogeo.de/wp-content/plugins/podlove-web-player/web-player/share.html?config=https%3A%2F%2Fastrogeo.de%2Fwp-json%2Fpodlove-web-player%2Fshortcode%2Fconfig%2Friffreporter%2Ftheme%2Friffreporter%2Ftemplate%2Friffreporter&episode=https%3A%2F%2Fastrogeo.de%2Fwp-json%2Fpodlove-web-player%2Fshortcode%2Fpublisher%2F2902" frameborder="0" scrolling="no" tabindex="0"></iframe>

Resultat:

player

4

Mache ich was falsch oder ist das ein Bug, @ericteubert ?

5

Das würde mich ja auch mal interessieren.

6

Was mir hier auffällt, ist, dass nicht post, sondern post_id (oder publisher) als Attribut verwendet werden muss:

[podlove-web-player theme="riffreporter" config="riffreporter" template="riffreporter" post_id="2902"]

Ich habe bei mir lokal testweise eine eigene config angelegt und wenn ich die via [podlove-web-player config="foobar" post_id="123"], dann wird die auch angezeigt.

1 Like
7

Danke, @ericteubert, aber mit dem Shortcode funktioniert ja alles. Das Problem entsteht beim Einbetten mit dem iFrame-Code. Da fehlen Share- und Kapitelbuttons. Siehe obiges Beispiel.

Interessant ist, dass mit dem Podlove-CDN Kapitelbuttons etc. angezeigt werden, aber dafür das Farbschema verschwindet:

https://cdn.podlove.org/web-player/share.html?config=https%3A%2F%2Fastrogeo.de%2Fwp-json%2Fpodlove-web-player%2Fshortcode%2Fconfig%2Fdefault%2Ftheme%2Fdefault&episode=https%3A%2F%2Fastrogeo.de%2Fwp-json%2Fpodlove-web-player%2Fshortcode%2Fpublisher%2F3213

Während eine lokale share.html das meiste verschwinden lässt - dafür stimmt das Farbschema:

https://freakshow.fm/wp-content/plugins/podlove-web-player/web-player/share.html?config=https%3A%2F%2Ffreakshow.fm%2Fwp-json%2Fpodlove-web-player%2Fshortcode%2Fconfig%2Fdefault%2Ftheme%2Flnp&episode=https%3A%2F%2Ffreakshow.fm%2Fwp-json%2Fpodlove-web-player%2Fshortcode%2Fpublisher%2F10523

(Beispiel direkt aus den Playern von meinem und Tims Podcast kopiert.)

8

Ich habe noch etwas herumgespielt. Es sieht so aus, dass das CDN https://cdn.podlove.org/web-player/share.html die via get übergebenden config-Parameter komplett ignoriert. Die lokale share.html meines Webplayers übernimmt dagegen das Farbschema, ignoriert aber die Vorgaben zu Buttons etc.

9

Hallo zusammen,

nach langen Problemen habe ich nun endlich eine Lösung gefunden. Der Webplayer übernimmt schlicht Einstellungen des extern eingebetteten Players nicht, weil der Template-Code fest in der share.html steht.

Und so sieht meine Lösung aktuell aus:

Die share.html liegt unter /wp-content/plugins/podlove-web-player/web-player/ - diese Datei am besten umbenennen, damit sie nicht später durch ein Wordpress-Upgrade überschrieben wird.

Die Datei sieht so aus:

<!doctype html><html lang="en"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta charset="utf-8"/><style>html,
    body {
      height: 100%;
      overflow: hidden;
    }</style><script>window.resourceBaseUrl = '5.12.0/player/';</script><script defer="defer" src="share.js"></script></head>
<body>

<div id="app">
  <root data-test="player--share"><div class="p-4 flex flex-col"><div class="flex flex-grow"><div class="w-20 mr-4"><poster class="rounded-sm shadow overflow-hidden"></poster></div><div class="w-full my-2"><show-title class="text-sm"></show-title><episode-title class="text-base"></episode-title></div></div><divider class="w-full my-4"></divider><div class="flex w-full items-center justify-center"><play-button class="block mr-5" variant="simple"></play-button><timer-current class="text-sm mr-5"></timer-current><progress-bar class="mr-5"></progress-bar><timer-duration class="text-sm"></timer-duration></div></div><error></error></root>
</div>

<link rel="stylesheet" href="5.12.0/player/styles.css"><script src="5.12.0/player/vendor.js"></script><script src="5.12.0/player/styles.js"></script><script src="5.12.0/player/bootstrap.js"></script></body></html>

Eigentlich ist darin alles zwischen <root> und </root> ein Webplayer-Template! Aber eines, das über das Backend nicht zugänglich ist.

Ich habe mir also einfach einen schönen Player konfiguriert (einfach im Backend), diesen Code aber dann kopiert und in meine share_neu.html eingefügt.

Diese so konfigurierte spielt nun mit den entsprechenden Parametern in jedem iframe einen perfekten Player aus.

1 Like