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>