Getting Started

Podlove Web Player 5 has a build in templating engine based on Vue component rendering in combination with the tailwind css framework 1.x. Each player part is available as an isolated component with an automatic store binding.

Variants

Based on this template engine, the player provides three different layouts out of the box. Each variant can be defined via the data-variant attribute on the targeted dom element.

Name

Control

Description

variant

XLLM

Player layout variant

// HTML
<div id="variant-xl" data-variant="xl"></div>
<div id="variant-l" data-variant="l"></div>
<div id="variant-m" data-variant="m"></div>

// Javascript
podlovePlayer('#variant-xl', 'episode.json', 'config.json');
podlovePlayer('#variant-l', 'episode.json', 'config.json');
podlovePlayer('#variant-m', 'episode.json', 'config.json');

Custom Templating

Podlove Web Player grants you access to the complete player dom with state bound components. Instead of using a predefined variant you can provide a template either via the data-template attribute or inline as part of the target dom. While creating a custom template keep in mind that the used player components still adhere their styles from the selected theme. Also if you aren't familiar yet with tailwind css framework or it's concept around responsive design, make sure to read the basic introduction. It is a fairly simple framework that should enable rapid player templating.

<!-- Inline Template -->
<div id="inline-template">
  <root style="max-width:950px;min-width:260px;" class="p-4 flex justify-center rounded">
    <play-button></play-button>
  </root>
</div>

<!-- External Template -->
<div id="external-template" data-template="/path/to/external/template.html"></div>

window.podlovePlayer("#inline-template", "episode.json", "config.json");
window.podlovePlayer("#external-template", "episode.json", "config.json");