Follow the documentation to send and receive events via postMessage from our player

How to send

To trigger the event you must make the postMessage code follow an example for this iframe:

<iframe allowfullscreen="" class="iFrameVideos" src="http://localhost:3000/"></iframe>

Make a selector query on the iframe

const iframeContent = document.querySelector('.iFrameVideos')

Create the event JSON:

const func = {
    time: 0,
    public_event: 'jmvplayer-play'
}

Send it in the postMessage

iframeContent.contentWindow.postMessage(JSON.stringify(func),'*')

Your event will then be fired in the player.

How to Receive

Send a player sync with event message:

{
    public_event: "jmvplayer-sync"
}

Implement function to listen to messages

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    console.log(event)
}

Implement your logic for OUT events

The events

jmvplayer-play

{
  time: 1
  public_event: 'jmvplayer-play'
}

Triggers a play event in the player. You can inform the team to say how long after this event will be triggered.

jmvplayer-jump

{
  jump: 1
  public_event: 'jmvplayer-jump'
}

Triggers a jump event in the video to a desired point, regardless of the position you are in.

jmvplayer-pause

{
  time: 2
  public_event: 'jmvplayer-pause'
}

Triggers a pause event in the player. You can inform the team to say how long after this event will be triggered.

jmvplayer-stop

{
  time: 2
  public_event: 'jmvplayer-stop'
}

Performs an iframe reload, forcing that frame back to the beginning of the video.

jmvplayer-jump

{
  jump: 1
  public_event: 'jmvplayer-jump'
}

Triggers a jump event in the video to a desired point, regardless of the position you are in.

jmvplayer-skip

{
  jump: 1
  public_event: 'jmvplayer-skip'
}

Triggers a jump event in the video to a certain desired point, in relation to the position you are in. If you pass the negative jump parameter, the player will try to rewind the video.

OUT Events

These events are responsible for informing what happened to the player, when the user submits an action that is with a listener.

To listen to these events it is necessary to send jmvplayer-sync

It brings some auxiliary variables like:

currentTime: Current time of the video.

duration: Total video time.

eventName: Name of the executed event

paused: informs 0 if the player is not stopped and 1 if it is stopped.

jmvplayerout-play

{
      event: "jmvplayerout-play",
      paused: 0,
      duration: video.duration,
      currentTime: video.currentTime,
}

Sends the message when it triggers the play event.

jmvplayerout-pause

{
      event: "jmvplayerout-pause",
      paused: 1,
      duration: video.duration,
      currentTime: video.currentTime,
}

Sends the message when it triggers the pause event.

jmvplayerout-skip

{
      event: "jmvplayerout-skip",
      paused: 0,
      duration: video.duration,
      currentTime: video.currentTime,
}

Sends the message when it triggers the skip event.

jmvplayerout-skip

{
      event: "jmvplayerout-end",
      duration: video.duration,
      currentTime: video.currentTime,
}

Send message when video ends.

jmvplayerout-status

{
      event: "jmvplayerout-status",
      paused: 0,
      duration: video.duration,
      currentTime: video.currentTime,
}

Sends the message when it triggers the timeupdate event.

Leia em outros idiomas: English Português (Brazil) Español