Unable to get player.js (iframe embed) to play


#1

I’m trying to use player.js to communicate with a Kaltura video.

According to this page, when using iframe embed:

communication with the parent DOM is sandboxed and thus requires the use of the postMessage API. If you require the use of an iframe embed, but need to establish an API communication, we recommend using the Kaltura player.js adapter, which acts as a postMessage bridge.

So I’ve added the player.js script and created a player as per the player.js docs.

When I open the page containing the iframe, the video shows up. I can access the player via the console. However, when I call the play function, nothing happens.

As you can probably tell, I only know the tiniest bit of JavaScript. It’s probably something really simple that I have missed, but after hours messing around with this and reading over any info I can find, I’m feeling lost. Any help you can provide would be greatly appreciated.

Here’s a fiddle of what I’ve got so far.

HTML:

<iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/811441/sp/81144100/embedIframeJs/uiconf_id/32783592/partner_id/811441?iframeembed=true&playerId=kaltura_player&entry_id=1_p59fv7ur" style="width:941px;height:700px;border:none;" allowfullscreen></iframe>

JS:

const player = new playerjs.Player(document.getElementById("kaltura_player"));
player.on('ready', () => {
  player.on('play', () => {
    console.log('play');
  });
});

#2

I’m still trying to figure this out…

I think I need to use postMessage to communicate with the iframe.

I found the playerjs spec doc which suggests the following should do the trick:

document.querySelector('iframe').contentWindow.postMessage(
  JSON.stringify({
    context: 'player.js',
    version: 'version',
    method: 'play'
  })
);

However, when I use this, I get a TypeError: Not enough arguments error.

Any ideas on what I’m doing wrong?