Skip to main content

External Control

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>