Kinescope Web Components
Web Components let you embed the player with an HTML tag. You do not need to call create() or use IFrame API callbacks. The <kinescope-iframe-player> element is currently available.
For more information about the technology, see MDN: Web Components.
Connect the component
Load this script before using the component:
https://player.kinescope.io/latest/elements/kinescope-iframe-player.js
The element attributes match the parameters for a simple iframe embed.
| Attribute | Required | Description |
|---|---|---|
url | yes | Video URL |
id | for configuration | Required when you set options through window.KinescopeIframePlayerConfig |
The player is recreated automatically when id, url, or externalid changes.
Example
<script src="https://player.kinescope.io/latest/elements/kinescope-iframe-player.js"></script>
<script>
window.KinescopeIframePlayerConfig = {
...window.KinescopeIframePlayerConfig,
// ID of the element that receives these settings
myplayer: {
ui: { playbackRateButton: true },
},
}
</script>
<kinescope-iframe-player
id="myplayer"
url="https://kinescope.io/123456789"
externalid="12345"
autoplay
style="background-color: green"
></kinescope-iframe-player>
Configure KinescopeIframePlayerConfig
window.KinescopeIframePlayerConfig maps element IDs to their settings. The settings match CreateOptions, except for the url, size, and settings fields.
window.KinescopeIframePlayerConfig = {
myplayer: {
behavior: { /* … */ },
ui: { /* … */ },
theme: { /* … */ },
},
}
Methods
| Method | Returns | Description |
|---|---|---|
getInstance() | IframePlayerApi | undefined | The player control object, or undefined if the player has not been created |
waitInstance() | Promise<IframePlayerApi> | Wait for the control object while the player is being created |
Events
Subscribe with the standard addEventListener and removeEventListener methods. The event enumeration is available in the element’s Events property. Most events match the IFrame API events.
The component also provides this event:
| Event | Description |
|---|---|
Events.Created | The player was just created. Subscribe immediately after declaring the element |
Event data is available in event.detail.
API example
<kinescope-iframe-player
id="myplayer"
url="https://kinescope.io/VIDEO_ID"
></kinescope-iframe-player>
<script>
const playerEl = document.getElementById('myplayer')
// Option 1: creation event
playerEl.addEventListener(playerEl.Events.Created, () => {
const player = playerEl.getInstance()
player.setVolume(0.5)
})
// Option 2: wait with a Promise
;(async () => {
const player = await playerEl.waitInstance()
player.on(player.Events.Playing, () => {
console.log('Playback started')
})
})()
</script>
Next steps
- IFrame API — full control from JavaScript
- Simple iframe embed — URL parameters
- Libraries — React, Vue, and Angular