# Web events

# Introduction

Theses events are thrown using Window.postMessage through the player iframe in order to:

listen informations (eg. playback start)
send informations (eg. switch audio tracks)

More informations about Window.postMessage (opens new window)

# Integration

# Event listening

window.addEventListener("message", (event) => {
  console.log("Event type: ".event.type);
  // Do something with event
});

1
2
3
4

Event structure

type: Event name
payload: Event content

# Event sending

<html lang="en">
  <head> </head>
  <body>
    <iframe src="http://my-iframe.url"></iframe>

    <script>
      window.addEventListener("load", () => {
        const iframe = document.querySelector("iframe");
        const win = iframe.contentWindow;

        win.postMessage(
          {
            type: "play",
          },
          "*"
        );
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Events to listen

# Event play

type: play

This event allow you to receive information about playback start.

# Example

{
  "type": "play"
}

1
2
3

# Event pause

type: paused

This event allow you to receive information about playback pause.

# Example

{
  "type": "paused"
}

1
2
3

# Event playback finished

type: playbackfinished

This event allow you to receive information about playback end.

# Example

{
  "type": "playbackfinished"
}

1
2
3

# Event view mode changed

type: viewmodechanged
payload: string: inline | fullscreen | pictureinpicture

This event allow you to receive information about view mode changes.

# Example

{
  "type": "viewmodechanged",
  "payload": "fullscreen"
}

1
2
3
4

# Event volume changed

type: volumechanged
payload: integer: volume from 0 to 100

This event allow you to receive information about playback volume.

# Example

{
  "type": "volumechanged",
  "payload": 50
}

1
2
3
4

# Event video quality changed

type: videoqualitychanged
payload: array

This event allow you to receive information about video quality changes.

# Example

{
  "type": "videoqualitychanged",
  "payload": {
    "type": "videoqualitychanged",
    "timestamp": 12345,
    "sourceQuality": {
      "id": "720_2400000",
      "bitrate": 2400000,
      "label": "1280x720, 2400kbps",
      "width": 1280,
      "height": 720,
      "codec": "avc1.42c00d"
    },
    "sourceQualityId": "auto",
    "targetQuality": {
      "id": "360_800000",
      "bitrate": 800000,
      "label": "640x360, 800kbps",
      "width": 640,
      "height": 360,
      "codec": "avc1.42c00d"
    },
    "targetQualityId": "360_800000"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Event audio track changed

type: audiotrackchanged
payload: array

This event allow you to receive information about audio tracks changes.

# Example

{
  "type": "audiotrackchanged",
  "payload": {
    "type": "audiochanged",
    "timestamp": 12345,
    "targetAudio": {
      "id": "audio/mp4-1",
      "lang": "en_stereo",
      "label": "en_stereo"
    },
    "sourceAudio": {
      "id": "audio/mp4-3",
      "lang": "en_surround",
      "label": "en_surround"
    },
    "time": 73.03925
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Event subtitle changed

type: subtitlechanged
payload: array

This event allow you to receive information about subtitles changes.

# Example

{
  "type": "subtitlechanged",
  "payload": {
    "type": "subtitleenabled",
    "timestamp": 12345,
    "subtitle": {
      "enabled": true,
      "label": "English",
      "url": "https://my-subtitles.vtt",
      "lang": "English",
      "kind": "subtitle",
      "id": "English-English"
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Event player ready

type: ready

This event allow you to receive information about player status.

# Example

{
  "type": "ready"
}

1
2
3

# Events to send

# Event play

type: play

This event allow you to send start playback.

# Example

win.postMessage({
  type: 'play'
}, '*'))

1
2
3

# Event pause

type: pause

This event allow you to send pause playback.

# Example

win.postMessage({
  type: 'pause'
}, '*'))

1
2
3

# Event fullscreen

type: play

This event allow you to set player to fullscreen.

# Example

win.postMessage({
  type: 'fullscreen'
}, '*'))

1
2
3

# Event volume change

type: volumechange

This event allow you to set player volume.

# Example

win.postMessage({
  type: 'volumechange',
  payload: 50
}, '*'))

1
2
3
4

# Event video qualities list

type: videoqualitieslist

This event allow you to retrieve playback video qualities list.

# Example

# Event video quality change

type: videoqualitychange
payload: VIDEO_QUALITY_ID

This event allow you to change playback video quality.

# Example

win.postMessage({
  type: 'videoqualitychange',
  payload: "1080p 3000kbps"
}, '*'))

1
2
3
4

# Event audio tracks list

type: audiotrackslist

This event allow you to retrieve playback audio tracks list.

# Example

# Event audio track change

type: audiotrackchange
payload: VIDEO_QUALITY_ID

This event allow you to change playback audio track.

# Example

win.postMessage({
  type: 'audiotrackchange',
  payload: "audio/mp4-2"
}, '*'))

1
2
3
4

# Event subtitles list

type: subtitleslist

This event allow you to retrieve playback subtitles list.

# Example

# Event subtitle change

type: subtitlechange
payload: SUBTITLE_ID

This event allow you to retrieve playback subtitles list.

# Example

win.postMessage({
  type: 'subtitlechange',
  payload: "English-English"
}, '*'))

1
2
3
4

# Event seek

type: seek
payload: SEEK_TIME

This event allow you to change the seek time.

# Example

win.postMessage({
  type: "seek",
  payload: 0,
});

1
2
3
4