Using the hosted player

The AntCDN player can handle interactivity for you. It reads questions out of the video, opens the connection for answers, and draws the question overlay over the picture.

Turn it on

Add interactive=1 to the player URL:

1
<iframe
2
  src="https://player.antcdn.net/v1/{edgeId}/master.m3u8?interactive=1"
3
  allow="autoplay; fullscreen"
4
  frameborder="0"
5
></iframe>

edgeId is the playback id returned when you create the stream. It is not the same as streamId, which you use on the API. The player resolves one to the other, so the embed only needs the edge id.

interactive=true works as well. Any other value, or leaving it out, keeps the player exactly as it is today. Nothing connects and no overlay is drawn.

What the overlay does

Questions stack up from the bottom left of the picture, newest nearest the bottom. Older questions move up, fade, and are removed. The overlay covers the lower half of the player at most, so it stays out of the way of the picture.

A viewer picks an option, or writes an answer if the question allows it. Results appear once they have answered, and again for everyone when the question closes. Results are deliberately hidden from a viewer who has not answered yet, because showing a running tally to someone still making up their mind turns a question into a poll of the majority.

A closed question shows its final result for a few seconds and then clears itself.

Listening from your page

The player runs in an iframe, so it reports what is happening to the page around it with postMessage. This uses the same channel the playback events already use.

Every message is a JSON string shaped like this:

{ "type": "player-ant", "event": "interactive:question", "detail": { } }

1
window.addEventListener('message', (event) => {
2
  let message;
3
  try {
4
    message = JSON.parse(event.data);
5
  } catch {
6
    return;
7
  }
8
  if (message.type !== 'player-ant') return;
9

10
  switch (message.event) {
11
    case 'interactive:question':
12
      showPoll(message.detail);
13
      break;
14
    case 'interactive:closed':
15
      showFinalResult(message.detail);
16
      break;
17
  }
18
});

Answering from your page

Send a vote back the same way. This lets you draw your own question interface while the player keeps the connection, so you do not open a second one.

1
playerIframe.contentWindow.postMessage(
2
  JSON.stringify({
3
    type: 'player-ant',
4
    action: 'vote',
5
    questionId: 'lsq_71c4a9',
6
    optionIndex: 1,
7
    text: 'optional written answer',
8
  }),
9
  'https://player.antcdn.net',
10
);

optionIndex is the option the viewer picked. Use -1 to send a written answer without picking one.

Drawing your own interface? Turn ours off with interactiveOverlay=0, so the two do not both appear over the same question:

https://player.antcdn.net/v1/{edgeId}/master.m3u8?interactive=1&interactiveOverlay=0

Interactivity keeps working. The player still reads questions out of the video and still relays them to your page. It just draws nothing itself.

When to use the SDK instead

Use the Player SDK when you want:

• your own question interface rather than ours,
• interactivity in a player that is not the AntCDN player,
• to replay questions over a recording.

The hosted player and the SDK deliver the same events, in the same order, with the same timing. Moving from one to the other does not change what your code receives.