Incorporação

A incorporação é uma forma de colocar vídeo em um site. O Kinescope fornece códigos de incorporação para isso: adaptativo e fixo.

Para quem é este artigo

• Proprietários de sites — precisam incorporar vídeo nas páginas
• Desenvolvedores — precisam integrar o player em aplicações web
• Gestores de conteúdo — precisam adicionar vídeo a artigos ou páginas
• Proprietários de conteúdo — precisam proteger vídeo contra cópia não autorizada
• Especialistas em SEO e profissionais de marketing — otimizando vídeo para busca por IA (ChatGPT, Perplexity, etc.)
• Proprietários de conteúdo educacional e criadores de cursos — aumentando a visibilidade de materiais nos resultados de busca por IA

Pré-requisitos

Antes de incorporar o player, certifique-se de que:

1. O vídeo está enviado e processado — o arquivo deve estar disponível no catálogo do Kinescope
2. Os direitos de acesso estão configurados — o vídeo deve estar disponível para incorporação (configurações de privacidade)
3. O domínio está adicionado à lista permitida — se a restrição de domínio estiver ativada, seu site deve estar na lista

Usando o código de incorporação

O código de incorporação é um trecho de código usado para adicionar um player com um arquivo de mídia a uma página web.

Existem dois tipos de códigos de incorporação: adaptativo e fixo. O código adaptativo ajusta automaticamente o tamanho do player ao tamanho da tela do usuário e é exibido corretamente em dispositivos móveis. O código fixo mantém as dimensões definidas do player em todos os dispositivos. Se uma transcrição estiver disponível, um código compatível com IA (LLM-friendly) também estará disponível.

Onde encontrar o código?

• Abra as configurações do vídeo e clique em Incorporar.
• Selecione o código de incorporação adaptativo ou fixo. Se uma transcrição estiver disponível, o código LLM-friendly também estará disponível (veja a seção abaixo).

O código também pode ser copiado do catálogo:

• Passe o mouse sobre a linha com o vídeo desejado e clique no menu (⁝) → Copiar link → Copiar código de incorporação. Nesse caso, o código de incorporação fixo será copiado.

Código compatível com IA (LLM-friendly)

Uma variante especial de código de incorporação que ajuda o vídeo a aparecer nos resultados de busca de assistentes de IA (ChatGPT, Perplexity, etc.). O código LLM-friendly inclui a transcrição diretamente no HTML — o player parece normal para os usuários, enquanto os modelos de IA podem indexar o texto do vídeo.

Requisito: O vídeo deve ter uma transcrição — enviada manualmente ou gerada automaticamente. Sem ela, a opção LLM-friendly está indisponível. A criação de transcrições é descrita no artigo Trabalhando com Arquivos: Legendas, Capítulos, etc. .

Como obter o código: Na janela Incorporar, se uma transcrição estiver disponível, selecione Código LLM-friendly ou Código de IA, depois o formato adaptativo ou fixo. O tamanho do código será maior que o normal devido à transcrição incorporada.

Estrutura do código: Player (iframe regular) + bloco oculto com transcrição. A parte oculta usa display: none e o atributo data-video-transcript="true" — o usuário vê apenas o player, enquanto a IA indexa o texto.

Impacto no desempenho: O tamanho da página aumentará pelo tamanho da transcrição (geralmente 5–50 KB de texto). A velocidade de carregamento do vídeo não muda. Para a maioria dos casos, isso é imperceptível.

Limitações: Apenas a incorporação inline funciona — código adaptativo e fixo. Popover e iframe simples não são suportados. Se precisar de popover, use o código de incorporação regular. A melhor indexação é com ChatGPT, Perplexity e outros.

Se a página tiver muitos vídeos com transcrições longas, veja a seção Otimização de carregamento . Para problemas de incorporação — Solução de problemas no final do artigo.

Configurando as dimensões do player

• Código fixo. Você pode copiar o código padrão ou definir seu próprio tamanho de player especificando sua largura e altura em pixels diretamente na janela do código de incorporação. Você pode escolher se deseja manter a proporção ou não (ativado por padrão).

• Código adaptativo. Na janela do código, mude a proporção para exibição ideal em qualquer resolução de tela.

Exemplo de uso do código

Incorpore o código no código HTML da página onde planeja colocar o player do Kinescope.

Todos os sites são diferentes, portanto não há uma única forma de incorporar o player. A regra geral: incorpore o código em um contêiner ou exatamente onde o player deve aparecer na página.

Exemplo de código adaptativo:

<!DOCTYPE html>
<html>
<body>
<h1>Meu Curso</h1>
<p>Primeira aula</p>

<!-- Início do código de incorporação -->
<div style="position: relative; padding-top: 56.25%; width: 100%">
  <iframe src="https://kinescope.io/embed/202589431"
          allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
          frameborder="0"
          allowfullscreen
          style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></iframe></div>
<!-- Fim do código de incorporação -->

</body>
</html>

Por padrão o player se adapta à largura do contêiner. Se o player não couber pelo tamanho, você pode alterar as dimensões via estilos CSS do contêiner div ou do próprio iframe.

Importante: O atributo allowfullscreen é um atributo booleano que permite o modo tela cheia. Ele não tem parâmetros width e height. As dimensões do player são definidas separadamente:

• Para código adaptativo: via estilos CSS do contêiner (padding-top, width) e iframe (width, height nos estilos)
• Para código fixo: via os atributos width e height do próprio iframe

Exemplo de alteração das dimensões do player adaptativo via CSS:

<div style="position: relative; padding-top: 56.25%; width: 80%">
  <iframe src="https://kinescope.io/embed/202589431"
          allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
          frameborder="0"
          allowfullscreen
          style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></iframe>
</div>

Código fixo

A incorporação com código fixo é similar à adaptativa. A única diferença é que o código não tem a tag div definindo características adaptativas.

<!DOCTYPE html>
<html>
<body>
<h1>Meu Curso</h1>
<p>Primeira aula</p>

<!-- Início do código de incorporação -->
<iframe src="https://kinescope.io/embed/202589431"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
        frameborder="0"
        allowfullscreen
        width="560"
        height="315">
</iframe>
<!-- Fim do código de incorporação -->

</body>
</html>

Pronto!

O player do Kinescope agora está incorporado na sua página.

Parâmetros de incorporação

Reprodução de fragmentos de vídeo

Os parâmetros seek e duration permitem reproduzir apenas parte de um vídeo:

• seek — tempo em segundos a partir do qual a reprodução começa (corta o início do manifest)
• duration — duração do fragmento em segundos

Limitações:

• Os parâmetros não funcionam com vídeos criptografados com DRM
• Os parâmetros funcionam apenas com links de vídeo e manifestos HLS
• Para incorporação via iframe, use parâmetros na URL src do iframe

Exemplos de uso:

1. Vídeo completo (4 min 18 seg):

2. Vídeo a partir de 1 minuto (pular os primeiros 60 segundos):

3. Fragmento de vídeo (a partir de 1 minuto, duração de 30 segundos):

Para uso direto de manifestos HLS:

https://kinescope.io/203613411/master.m3u8?seek=60&duration=30

Para incorporação via iframe:

<iframe src="https://kinescope.io/embed/203613411?seek=60&duration=30"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
        frameborder="0"
        allowfullscreen></iframe>

Usando diferentes templates de player

O parâmetro player_id permite aplicar diferentes templates de design ao mesmo vídeo sem criar cópias de conteúdo.

Limitações:

• O parâmetro player_id funciona apenas com links de vídeo (não com iframe)
• Para incorporação via iframe, configure o template do player no código de incorporação ou use IFrame API

Como usar:

1. Copie o ID do template de player:

   • Acesse a seção Players no painel de controle
   • Expanda o menu de contexto do template desejado
   • Copie seu ID — um identificador único no formato 1213d24d-4624-4764-bf40-0baaf743377d

   

2. Adicione o parâmetro ao link do vídeo:

   • Formato: https://kinescope.io/[VIDEO_ID]?player_id=[PLAYER_ID]
   • Exemplo: https://kinescope.io/9cdAfqbbPcwu9GJwyxZ6jA?player_id=1213d24d-4624-4764-bf40-0baaf743377d

Configurando chamadas para ação (CTA) via templates de player

Call To Action (CTA) permite mostrar chamadas para ação durante a reprodução do vídeo. Útil para anúncios, assinaturas, cadastros ou outros objetivos.

Como funciona: Quando o CTA é ativado, a reprodução para e uma tela de ação é mostrada sobre o player. Quando o usuário clica no botão de ação, um evento é disparado que pode ser tratado programaticamente.

Configurando CTA via templates de player:

1. Acesse a seção Players no painel de controle
2. Selecione ou crie um template de player
3. Em Configurações Básicas → Comportamento ao final do vídeo, selecione Chamada para Ação (CTA)
4. Especifique o título, a descrição e o link para o botão de ação
5. Salve as alterações

Para configuração mais flexível de CTA (exibição em momentos específicos de reprodução, na pausa, controle programático), use IFrame Player API . Veja a documentação completa para todos os recursos de CTA.

Parâmetros de URL para configuração do player

Além dos parâmetros seek, duration e player_id, você pode usar parâmetros de URL adicionais para configurar o comportamento do player. Os parâmetros são adicionados ao final da URL no atributo src do iframe e começam com um ponto de interrogação (?). Use o símbolo & para múltiplos parâmetros.

Exemplo:

<iframe src="https://kinescope.io/embed/123456789?autoplay=1&muted=1&loop=1"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
        frameborder="0"
        allowfullscreen></iframe>

Parâmetros suportados:

Tipos de link e seus usos

Link de vídeo

Um link direto como https://kinescope.io/[VIDEO_ID] abre o vídeo em uma página de player separada do Kinescope. Suporta parâmetros seek, duration, player_id.

Uso: Para publicação em redes sociais, mensageiros, newsletters por e-mail.

Código de incorporação (iframe)

Código para incorporar vídeo no seu site. Suporta parâmetros seek e duration via URL no atributo src.

Uso: Para colocar vídeo em sites, blogs, plataformas LMS.

Manifest HLS

Link direto para o manifest HLS (master.m3u8) para uso em players personalizados ou aplicações móveis.

Uso: Para integração com soluções personalizadas, aplicações móveis, cenários avançados de reprodução.

Otimização de carregamento

Para acelerar o carregamento da página e economizar tráfego, você pode otimizar o carregamento do player. Isso é especialmente útil se a página tiver múltiplos players ou se eles estiverem na parte inferior da página.

Desativando o pré-carregamento de vídeo

Por padrão o player pré-carrega dados do vídeo. Para desativar o pré-carregamento e carregar apenas o poster, use o parâmetro preload=false:

<iframe src="https://kinescope.io/embed/123456789?preload=false"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
        frameborder="0"
        allowfullscreen></iframe>

Nesse caso o player carregará (assim como o poster), mas os dados do vídeo não carregarão até o início da reprodução. Isso economiza tráfego se o usuário não planeja assistir ao vídeo imediatamente.

Carregamento diferido de iframe

Se o iframe estiver fora da área visível (por exemplo, na parte inferior da página), você pode adiar seu carregamento até que o usuário role até o player. Use o atributo loading="lazy":

<iframe src="https://kinescope.io/embed/123456789"
        loading="lazy"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
        frameborder="0"
        allowfullscreen></iframe>

Desativando o poster

Se você usar seu próprio poster ou não quiser mostrar o poster do player, use o parâmetro no_poster=1:

<iframe src="https://kinescope.io/embed/123456789?no_poster=1"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
        frameborder="0"
        allowfullscreen></iframe>

Isso reduzirá a quantidade de dados carregados.

Limitando a qualidade do vídeo

Você pode limitar a qualidade máxima do vídeo ao determinar automaticamente a qualidade adequada (ABR). Isso ajuda a economizar tráfego em dispositivos móveis:

<iframe src="https://kinescope.io/embed/123456789?quality=720p"
        allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
        frameborder="0"
        allowfullscreen></iframe>

Valores disponíveis: auto, 240p, 360p, 480p, 720p, 1080p, 1440p, 2160p.

Solução de problemas

Se você encontrar problemas com o player, veja a seção Solução de problemas , que contém situações comuns e como resolvê-las.

Para problemas básicos de incorporação, verifique:

• O vídeo não reproduz — verifique as configurações de privacidade e a disponibilidade de incorporação
• O player não aparece — verifique o código de incorporação e o console do navegador para erros
• Os parâmetros não funcionam — certifique-se de que os parâmetros estão sendo passados corretamente na URL
• Problemas de dimensionamento — verifique os estilos CSS do contêiner e do iframe

O que fazer a seguir?

1. Configurações de privacidade — gerenciando o acesso ao vídeo e as configurações de incorporação
2. Personalização do player — personalizando a aparência e o comportamento para a sua marca
3. IFrame Player API — controle programático do player via IFrame Player API, incluindo configuração de CTA
4. Proteção de conteúdo — adicionando marcas d’água ou criptografia DRM
5. Publicidade — integrando tags de publicidade no player
6. Solução de problemas — problemas comuns e como resolvê-los

Ainda tem dúvidas? Escreva para o chat de suporte na interface do Kinescope — nossos especialistas vão ajudá-lo!