Skip to main content

Extensions

External Event Handling#

External control gives you the ability to control the player from other ui elements. This comes in handy if you want to trigger specific player actions from outside.

Installation#

<script src="extensions/external-events.js"></script>
<div id="player-id"></div>
<script>
podlovePlayer('#player-id', 'path/to/config')
.then(registerExternalEvents('player-id'));
</script>

Usage#

<a
href="javascript:void(0)"
rel="podlove-web-player" // Registeres event handler
data-ref="player-id" // ID of player to control, if undefined all players without an ID are controlled
data-action="play|pause" // Action that is triggered on click (optional)
data-time="00:10:10.500" // Time in simple time format that is selected (optional)
data-tab="info|chapters|transcripts|share|files|audio" // Tab that is selected on interaction (optional)
>External Element</a>

Example#

<button class="button" rel="podlove-web-player" data-ref="example-player" data-action="play">play</button>
<button class="button" rel="podlove-web-player" data-ref="example-player" data-action="pause">pause</button>
<button class="button" rel="podlove-web-player" data-ref="example-player" data-time="00:10:00">set time</button>
<button class="button" rel="podlove-web-player" data-ref="example-player" data-tab="files">activate files tab</button>
<button class="button" rel="podlove-web-player" data-ref="example-player" data-action="play" data-time="00:10:00" data-tab="files">all combined</button>