Event mapping for Web SDK

Review a table representing event mapping for Web SDK.

AMP1 event	AMP2 event	Migration notes	Code example
`autoplayblocked`	`playbackcouldnotbestarted`	Direct mapping	`player.on('playbackcouldnotbestarted', handler)`
`bufferingchange`	N/A	Monitor data loading/pushing separately	Use a combination of events
`busy`	N/A	Could integrate with combination of events	Custom implementation required
`canplay`	`ready`	Direct mapping	`player.on('ready', handler)`
`canplaythrough`	Use video element	Access native video element	`videoElement.addEventListener('canplaythrough', handler)`
`contentchanged`	N/A	No direct equivalent	Custom implementation required
`destroy`	destroy	Direct mapping	`player.on('destroy', handler)`
`displaystatechange`	`viewmodechanged`	Different event name	`player.on('viewmodechanged', handler)`
`durationchange`	`durationchanged`	Direct mapping	`player.on('durationchanged', handler)`
`ended`	`playbackfinished`	Direct mapping	`player.on('playbackfinished', handler)`
`error`	`error`	Direct mapping	`player.on('error', handler)`
`failoverattempt`	`contentlocationchanged`	Different naming	`player.on('contentlocationchanged', handler)`
`fullscreenchange`	`viewmodechanged`	Different event name	`player.on('viewmodechanged', handler)`
`islive`	N/A	Custom integration	Use `timechanged` and `player.isLive() check`
`languagechange`	`audiochanged`	Use with subtitle events if needed	`player.on('audiochanged', handler)`
`loadstart`	N/A	Could wrap load method	Wrap `player.load()` method
`loadeddata`	`sourceloaded`	Direct mapping	`player.on('sourceloaded', handler)`
`loadedmetadata`	Use video element	Access native element	`videoElement.addEventListener('loadedmetadata', handler)`
`mediachange`	N/A	No direct equivalent	Monitor source changes
`mediasequenceaborted`	N/A	No direct equivalent	Custom implementation
`mediasequenceended`	N/A	No direct equivalent	Custom implementation
`mediasequencestarted`	N/A	No direct equivalent	Custom implementation
`mediumchange`	N/A	No direct equivalent	Custom implementation
`mutechange`	`muted`, `unmuted`	Split into two events	`player.on('muted', handler); player.on('unmuted', handler)`
`pause`	Use video element	Access native element	`videoElement.addEventListener('pause', handler)`
`paused`	`paused`	Direct mapping	`player.on('paused', handler)`
`play`	`play`	Direct mapping	`player.on('play', handler)`
`playrequest`	N/A	No direct equivalent	Monitor `play` method calls
`playstatechange`	N/A	Combination of events	Monitor `play`, `playing`, and `paused` events
`playbackratechange`	`playbackspeedchanged`	Direct mapping	`player.on('playbackspeedchanged', handler)`
`playbacktargetavailabilitychange`	`castavailable`	Different naming	`player.on('castavailable', handler)`
`playbacktargetchange`	`caststarted`, `caststopped`	Split events	`player.on('caststarted', handler)`
`playing`	`playing`	Direct mapping	`player.on('playing', handler)`
`progress`	Use video element	Access native element	`videoElement.addEventListener('progress', handler)`
`qualitychange`	`Audioqualitychange`, `videoqualitychange`	Split by media type	`player.on('videoqualitychange', handler)`
`qualitychanging`	`audiodownloadqualitychange`, `videodownloadqualitychange`	Split by type	Monitor download quality changes
`qualitylevelsloaded`	`audiodownloadqualitychanged`, `videodownloadqualitychanged`	Split events	Monitor when qualities load
`qualitymodechange`	N/A	No direct equivalent	Custom implementation
`qualityswitched`	`audioqualitychanged`, `videoqualitychanged`	Split by type	`player.on('videoqualitychanged', handler)`
`ready`	ready	Direct mapping	`player.on('ready', handler)`
`recordcontentchange`	N/A	No direct equivalent	N/A
`resume`	`playing`	Different event	`player.on('playing', handler)`
`seeked`	`seeked`	Direct mapping	`player.on('seeked', handler)`
`seeking`	`seek`	Different event name	`player.on('seek', handler)`
`settingschange`	N/A	No direct equivalent	N/A
`stalled`	`stallstarted`	Direct mapping	`player.on('stallstarted', handler)`
`started`	`stallended`	Different purpose	`player.on('stallended', handler)`
`temporaltypechange`	N/A	Track `isLive` and `durationchanged`	Custom implementation
`timeupdate`	`timechanged`	Direct mapping	`player.on('timechanged', handler)`
`timedmetadata`	`metadatachanged`	Direct mapping	`player.on('metadatachanged', handler)`
`trackerror`	`error` and ErrorCode	Check error code	`player.on('error', (e) => { if(e.code === X) {...} })`
`viewcreated`	N/A	Use MutationObserver	Monitor DOM changes
`volumechange`	`volumechanged`	Direct mapping	`player.on('volumechanged', handler)`
`waiting`	Use video element	Access native element	`videoElement.addEventListener('waiting', handler)`

Events related to captioning

AMP1 event	AMP2 event	Migration notes	Code example
`cuechange`	`cueenter`, `cueexit`	Split into two events	`player.on('cueenter', handler); player.on('cueexit', handler)`
`enabled`	`subtitleenabled`	Direct mapping	`player.on('subtitleenabled', handler)`
`visibilitychange`	`subtitleenabled` / `subtitledisabled`	Could integrate with combination of events	`player.on('subtitleenabled', handler);player.on('subtitledisabled', handler);`
`tracksloaded`	`subtitleadded`	Direct mapping	`player.on('subtitleadded', handler)`
`trackselected`	`subtitleenabled`	Direct mapping	`player.on('subtitleenabled', handler)`
`trackerror`	`error` event + ErrorCode	Check error code	`player.on('error', (e) => { if(e.code === X) {...} })`