Incorporação simples com iframe
A maneira mais simples de adicionar o player é inserir um <iframe> com a URL de um vídeo ou playlist. Você pode copiar o código no painel do Kinescope ou criá-lo manualmente.
Código básico
<iframe
src="https://kinescope.io/embed/VIDEO_ID"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Substitua VIDEO_ID pelo ID do seu vídeo ou da sua playlist.
O atributo
allow é obrigatório. Sem ele, reprodução automática, tela cheia, Picture-in-Picture e DRM podem não funcionar.Evite usar o atributo sandbox. Se precisar dele, especifique:
allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-presentation
Parâmetros de URL
Adicione parâmetros ao fim da URL para configurar o comportamento do player. Comece com ? e separe vários valores com &:
https://kinescope.io/embed/VIDEO_ID?autoplay=1&loop=1
<iframe
src="https://kinescope.io/embed/VIDEO_ID?parameter=value"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Parâmetros compatíveis
| Parâmetro | Valores | Descrição |
|---|---|---|
autofocus | true / false / 1 / 0 | Move o foco para o player. |
autoplay | true / false / 1 / 0 | Inicia o vídeo automaticamente após o carregamento do player. Se a reprodução com som falhar, o player tenta iniciar sem som. |
autopause | true / false / 1 / 0 | Pausa quando outro player da página inicia a reprodução. |
muted | true / false / 1 / 0 | Desativa o som do player. |
loop | true / false / 1 / 0 | Repete o vídeo. |
playsinline | true / false / 1 / 0 | Reproduz o vídeo em dispositivos móveis sem entrar automaticamente no modo de tela cheia. |
preload | true / false / 1 / 0 | Pré-carrega o vídeo. false carrega somente a capa. true carrega antecipadamente os dados necessários. |
background | true / false / 1 / 0 | Oculta todos os controles e define autoplay, muted e loop como true. |
t | number | Tempo em segundos no qual a reprodução do vídeo começa. |
seek | number | Tempo em segundos no qual a reprodução começa. O início do manifesto é cortado. |
duration | number | Duração do trecho em segundos. Use com seek para exibir apenas parte do vídeo. |
quality | VideoQuality | Qualidade do vídeo: auto ou altura em pixels, como 720 ou 1080. Consulte Otimização. |
audiotrack | string | Ativa a faixa de áudio no idioma especificado. @experimental |
texttrack | true / false / 1 / 0 / string | Ativa as legendas. true seleciona o idioma do navegador, depois o idioma do player e, por fim, a primeira faixa. string seleciona a faixa no idioma especificado. |
transparent | true / false / 1 / 0 | Usa um fundo transparente no player. |
title | true / false / 1 / 0 | Exibe o título e o subtítulo. |
controls | true / false / 1 / 0 | Exibe os controles do player. |
no_poster | 1 / 0 | Oculta a capa. |
keyboard | true / false / 1 / 0 | Controla o player pelo teclado. |
speedbtn | true / false / 1 / 0 | Exibe o botão de velocidade de reprodução. |
notifications | true / false / 1 / 0 | Exibe notificações no player sobre problemas de rede, erros, Chromecast e outros eventos. @experimental |
watermark | string | Texto da marca d'água. Ative esse recurso no painel. Caso contrário, o player ignora o parâmetro. |
dnt | true / false / 1 / 0 | Desativa o rastreamento da atividade do usuário e as métricas. |
drmauthtoken | string | Token de autorização personalizado para solicitações de licença. Consulte Criptografia DRM. |
adtagurl | string | URL da tag de publicidade. Consulte Publicidade. |
externalid | string | Identificador personalizado enviado com as métricas. |
Você pode usar
1 e 0 no lugar de true e false. Por exemplo, ?autoplay=true e ?autoplay=1 são equivalentes. Um parâmetro sem valor, como ?autoplay, é interpretado como true.Os parâmetros
seek e duration não funcionam com vídeos protegidos por DRM. Você pode usá-los com URLs de vídeo e manifestos HLS.Este exemplo reproduz um trecho de 30 segundos a partir do segundo 60:
<iframe
src="https://kinescope.io/embed/VIDEO_ID?seek=60&duration=30"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Carregamento adiado
Quando o <iframe> fica fora da área visível, por exemplo, perto do fim da página, você pode adiar o carregamento. Isso ajuda a abrir a página mais rápido:
<iframe loading="lazy" ...></iframe>
Consulte Otimização para saber mais.
Exemplos de incorporação
Tamanho responsivo do player
O player se adapta à largura do contêiner. Coloque o código em seu contêiner e ajuste os estilos, se necessário.
<style>
.kin-player-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
max-width: 100%;
overflow: hidden;
}
.kin-player-embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
<div class="kin-player-embed-container">
<iframe
src="https://kinescope.io/embed/VIDEO_ID"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
></iframe>
</div>
Tamanho fixo do vídeo
<iframe
src="https://kinescope.io/embed/VIDEO_ID"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Próximos passos
- Otimização — reprodução automática na área visível e limites de qualidade
- IFrame API — controle o player com JavaScript
- Incorporação pelo painel
— código gerado pela interface, incorporações compatíveis com LLM e modelos (
player_id)