Incorporação com a IFrame API
Use a IFrame Player API quando apenas um iframe não for suficiente. Você pode controlar a reprodução pelo seu código, escutar eventos e atualizar configurações durante a execução.
Se você não precisa de JavaScript, use uma incorporação simples com iframe
.
Conecte a API
- Declare
onKinescopeIframeAPIReady(playerFactory)na página antes de carregar o script da API. - Carregue
https://player.kinescope.io/latest/iframe.player.js. - Quando a API estiver pronta, o Kinescope chamará sua função e passará a factory para criar um player .
Em vez de um callback, você pode usar o pacote @kinescope/player-iframe-api-loader
. Ele retorna a factory por async/await e inclui tipos TypeScript.
Exemplo
<!doctype html>
<html>
<body>
<!-- O player substitui esta <div> por um <iframe>. -->
<div id="player"></div>
<!-- Para definir estilos ou atributos personalizados, use um <iframe> em vez de uma <div>: -->
<!-- <iframe id="player" class="my-class"></iframe> -->
<script>
const tag = document.createElement('script');
tag.src = 'https://player.kinescope.io/latest/iframe.player.js';
document.head.appendChild(tag);
function onKinescopeIframeAPIReady(playerFactory) {
playerFactory
.create('player', {
url: 'https://kinescope.io/VIDEO_ID',
size: { width: '100%', height: 400 },
})
.then((player) => {
player.once(player.Events.Loaded, (event) => {
event.target.setVolume(0.5);
});
player.on(player.Events.Playing, (event) => {
setTimeout(() => {
event.target.pause();
}, 5000);
});
});
}
</script>
</body>
</html>
Seções da IFrame API
| Seção | Descrição |
|---|---|
| Criação de um player | Factory, create() e parâmetros de CreateOptions |
| Controle do player | Métodos e eventos de uma instância do player |
| Conexão automática | Conecte a API a um iframe existente |
| player-iframe-api-loader | Loader da API para npm e tipos TypeScript |
| Bibliotecas | Wrappers para React, Vue, Angular e outros frameworks |