Kinescope Web Components
Os Web Components permitem incorporar o player com uma tag HTML. Você não precisa chamar create() nem usar callbacks da IFrame API. O elemento <kinescope-iframe-player> está disponível atualmente.
Para saber mais sobre a tecnologia, consulte MDN: Web Components .
Conecte o componente
Carregue este script antes de usar o componente:
https://player.kinescope.io/latest/elements/kinescope-iframe-player.js
Os atributos do elemento correspondem aos parâmetros de uma incorporação simples com iframe .
| Atributo | Obrigatório | Descrição |
|---|---|---|
url | sim | URL do vídeo |
id | para configuração | Obrigatório quando você define opções por window.KinescopeIframePlayerConfig |
O player é recriado automaticamente quando id, url ou externalid muda.
Exemplo
<script src="https://player.kinescope.io/latest/elements/kinescope-iframe-player.js"></script>
<script>
window.KinescopeIframePlayerConfig = {
...window.KinescopeIframePlayerConfig,
// ID do elemento que recebe estas configurações
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 associa os IDs dos elementos às suas configurações. Elas correspondem a CreateOptions
, exceto pelos campos url, size e settings.
window.KinescopeIframePlayerConfig = {
myplayer: {
behavior: { /* … */ },
ui: { /* … */ },
theme: { /* … */ },
},
}
Métodos
| Método | Retorno | Descrição |
|---|---|---|
getInstance() | IframePlayerApi | undefined | O objeto de controle do player
ou undefined se o player ainda não tiver sido criado |
waitInstance() | Promise<IframePlayerApi> | Aguarda o objeto de controle enquanto o player é criado |
Eventos
Assine eventos com os métodos padrão addEventListener e removeEventListener. A enumeração de eventos está disponível na propriedade Events do elemento. A maioria corresponde aos eventos da IFrame API
.
O componente também fornece este evento:
| Evento | Descrição |
|---|---|
Events.Created | O player acabou de ser criado. Assine logo após declarar o elemento |
Os dados do evento estão disponíveis em event.detail.
Exemplo da API
<kinescope-iframe-player
id="myplayer"
url="https://kinescope.io/VIDEO_ID"
></kinescope-iframe-player>
<script>
const playerEl = document.getElementById('myplayer')
// Opção 1: evento de criação
playerEl.addEventListener(playerEl.Events.Created, () => {
const player = playerEl.getInstance()
player.setVolume(0.5)
})
// Opção 2: aguardar com uma Promise
;(async () => {
const player = await playerEl.waitInstance()
player.on(player.Events.Playing, () => {
console.log('reprodução iniciada')
})
})()
</script>
Próximos passos
- IFrame API — controle completo por JavaScript
- Incorporação simples com iframe — parâmetros de URL
- Bibliotecas — React, Vue e Angular