PLAYER INTEGRATION

Player events

Connect playback progress and episode completion to your own site.

Event payload

The iframe sends window.postMessage events to its parent window. Every payload contains channel: 'akari', an event name, and the current aniId, ep, and lang. IDs and episode numbers are strings; language is sub or dub.

Playback progress

{
  "channel": "akari",
  "event": "time",
  "aniId": "21",
  "ep": "1",
  "lang": "sub",
  "time": 42.5,
  "duration": 1440
}

Event reference

time: Sent during playback with time and duration in seconds. Progress updates are emitted while the player is playing.
server: Sent when a source is selected, including automatic fallback. Includes server, source, and lang.
complete: Sent when the episode finishes. Uses the common payload fields with no additional fields.
error: Sent when no playable source remains. Uses the common payload fields with no additional fields.

Listen for events

Give your iframe id="akari-player" and register this listener after the iframe element exists. Verify both the origin and the source window before handling a message.

Message listener

const API_ORIGIN = 'https://aniplayer.xyz'
const iframe = document.getElementById('akari-player')

window.addEventListener('message', ({ data, origin, source }) => {
  if (origin !== API_ORIGIN) return
  if (source !== iframe.contentWindow) return
  if (!data || data.channel !== 'akari') return

  switch (data.event) {
    case 'time':
      console.log('Progress:', data.time, '/', data.duration)
      break
    case 'server':
      console.log('Provider:', data.server, data.source, data.lang)
      break
    case 'complete':
      console.log('Episode finished:', data.aniId, data.ep)
      break
    case 'error':
      console.log('No playable source remains')
      break
  }
})

Set API_ORIGIN to the exact origin in your iframe URL, including http://localhost:3000 for local development or https://kari.anikari.xyz for the alternate domain.

Advance to the next episode

Use the completion event to load the next episode. Keep the language in the URL and stop at the end of your actual episode list. You can get that list from /api/episodes/{aniId}.

Automatic episode advance

const API_ORIGIN = 'https://aniplayer.xyz'
const iframe = document.getElementById('akari-player')
const aniId = '21'
const lang = 'dub'
const episodeCount = 12 // Set from your actual episode list.
let episode = 1

function loadEpisode() {
  iframe.src = API_ORIGIN + '/embeds/' + aniId + '/' + episode + '/' + lang
}

window.addEventListener('message', ({ data, origin, source }) => {
  if (origin !== API_ORIGIN || source !== iframe.contentWindow) return
  if (data?.channel !== 'akari' || data.event !== 'complete') return
  if (data.aniId !== aniId || data.ep !== String(episode)) return
  if (data.lang !== lang || episode >= episodeCount) return
  episode += 1
  loadEpisode()
})

loadEpisode()