playkit-js-post-message-bridge

playkit-js-post-message-bridge is a Kaltura Player plugin that bridges player events to parent windows via postMessage API. Designed for iframe embeds, it enables parent pages to receive real-time player events with rich contextual data.

Features

• Automatic event bridging from iframe to parent window
• Configurable event filtering by groups
• Rich payload with player state and metadata

Configuration

Send All Events (Default)

const config = {
  plugins: {
    postMessageBridge: {
      sendAllEvents: true
    }
  }
};

Filter by Event Groups

const config = {
  plugins: {
    postMessageBridge: {
      sendAllEvents: false,
      eventsToSend: ['core', 'playbackMilestones'],
      channel: 'my-channel',      // Optional
      contextId: 'homepage'        // Optional
    }
  }
};

Available Event Groups

• core: playerLoaded, play, pause, resume, seek, ended
• playbackMilestones: play_reached_25, play_reached_50, play_reached_75, play_reached_90, play_reached_100
• errorEvents: error
• adEvents: ad_start, ad_complete, ad_click

Usage

Player Setup

<!--Kaltura player-->
<script type="text/javascript" src="/PATH/TO/FILE/kaltura-player.js"></script>
<!--Playkit banner-overlay plugin -->
<script type="text/javascript" src="/PATH/TO/FILE/playkit-post-mesage-bridge.js"></script>
<div id="player-placeholder" style="height:360px; width:640px">
  <script type="text/javascript">
    var playerContainer = document.querySelector("#player-placeholder");
    var config = {
     ...
     targetId: 'player-placeholder',
     plugins: {
      postMessageBridge: {
        sendAllEvents: false,
        eventsToSend: ['core', 'playbackMilestones']
      }
     },
    };
    var player = KalturaPlayer.setup(config);
    player.loadPlaylist(...);
  </script>
</div>

Parent Window Listener

window.addEventListener('message', (event) => {
  const data = event.data;

  if (data.source === 'kaltura-player') {
    console.log(`Event: ${data.event}`, {
      entryId: data.entryId,
      position: data.positionSeconds,
      duration: data.durationSeconds
    });
  }
});

Development

# Clone and install
git clone https://github.com/kaltura/playkit-js-post-message-bridge.git
cd playkit-js-post-message-bridge
npm install

# Development server (http://localhost:8000)
npm run dev

# Build
npm run build

# Test
npm test

# Pre-commit (type check, lint, docs)
npm run pre:commit

Demo

Live Demo

Compatibility

• Requires Kaltura Player v3.17.0+
• Only active in iframe context
• Supports Chrome 39+, Firefox 41+, Safari 8+, Edge, IE11

License

AGPL-3.0 License