Primeira aula
Primeira aula
``` **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): [Видео Kinescope] 2. **Vídeo a partir de 1 minuto** (pular os primeiros 60 segundos): [Видео Kinescope] 3. **Fragmento de vídeo** (a partir de 1 minuto, duração de 30 segundos): [Видео Kinescope] **Para uso direto de manifestos HLS:** ``` https://kinescope.io/203613411/master.m3u8?seek=60&duration=30 ``` **Para incorporação via iframe:** ```html ``` ### 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](https://app.kinescope.io/workspace/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` > **Информация:** **As alterações de template são aplicadas automaticamente.** Se você editar as configurações do template, todos os vídeos com esse `player_id` serão atualizados sem alterar os links. ### Configurando chamadas para ação (CTA) via templates de player > **Внимание:** **Recurso beta.** Pode mudar após coletar feedback. 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](https://app.kinescope.io/workspace/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 > **Информация:** As alterações de template são aplicadas automaticamente a todos os vídeos usando este template. 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](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-control-player/). Veja a [documentação completa](https://docs-br.kinescope.com/player-docs/) 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:** ```html ``` > **Информация:** O atributo `allow` é necessário para o player funcionar completamente. Ele permite que o player use reprodução automática, modo tela cheia, picture-in-picture, reprodução de vídeo criptografado, etc. **Parâmetros suportados:** | Parâmetro | Valores suportados | Descrição | | :------- | :---------------------- | :------- | | **`autofocus`** | `true`/`false` ou `1`/`0` | Passar o foco para o player. | | **`autoplay`** | `true`/`false` ou `1`/`0` | Se deve reproduzir o vídeo automaticamente após o player carregar. Se a reprodução com som não puder começar, o player tentará iniciar com o som mudo. | | **`autopause`** | `true`/`false` ou `1`/`0` | Pausar se outro player na página começar a reproduzir. | | **`muted`** | `true`/`false` ou `1`/`0` | Silenciar o áudio. | | **`loop`** | `true`/`false` ou `1`/`0` | Repetir o vídeo. | | **`playsinline`** | `true`/`false` ou `1`/`0` | Reproduzir vídeo em dispositivos móveis sem alternar automaticamente para o modo tela cheia. | | **`preload`** | `true`/`false` ou `1`/`0` | Pré-carregamento do vídeo. `false` — não pré-carregar dados do vídeo (apenas o poster permanecerá). `true` — pré-carregar os dados necessários. | | **`background`** | `true`/`false` ou `1`/`0` | Desativa todos os controles, define `autoplay`, `muted`, `loop` como `true`. | | **`t`** | `number` | Tempo em segundos a partir do qual a reprodução do vídeo começa (análogo de `seek`). | | **`quality`** | `auto`, `240p`, `360p`, `480p`, `720p`, `1080p`, `1440p`, `2160p` | Selecionar a qualidade de vídeo especificada. | | **`audiotrack`** | `string` | Ativar a faixa de áudio com o idioma especificado. `@experimental` | | **`texttrack`** | `true`/`false` ou `1`/`0` ou `string` | Ativar legendas com o idioma especificado. `true` — seleção automática na ordem: idioma do navegador, idioma do player, primeiro na lista. `string` — ativar faixa com idioma especificado. | | **`transparent`** | `true`/`false` ou `1`/`0` | Fundo transparente do player. | | **`title`** | `true`/`false` ou `1`/`0` | Mostrar título e subtítulo. | | **`controls`** | `true`/`false` ou `1`/`0` | Mostrar controles do player. | | **`no_poster`** | `1`/`0` | Não mostrar poster. | | **`keyboard`** | `true`/`false` ou `1`/`0` | Controle do player pelo teclado. | | **`speedbtn`** | `true`/`false` ou `1`/`0` | Mostrar botão de seleção de velocidade de reprodução. | | **`notifications`** | `true`/`false` ou `1`/`0` | Mostrar notificações no player (problemas de internet, erros, conexão Chromecast, etc.). `@experimental` | | **`watermark`** | `string` | Texto da marca d'água. A funcionalidade de marca d'água é ativada no painel de controle. Sem ativar a funcionalidade, o parâmetro é ignorado. | | **`dnt`** | `true`/`false` ou `1`/`0` | Desativar o rastreamento de ações do usuário, envio de métricas, etc. | | **`drmauthtoken`** | `string` | Token do usuário para autorização ao solicitar uma licença. | | **`adtagurl`** | `string` | Link para a tag de publicidade. | | **`externalid`** | `string` | Qualquer identificador personalizado. Usado para envio de métricas. | > **Информация:** Para parâmetros que aceitam valores `true`/`false`, os valores `1`/`0` são equivalentes. Por exemplo: `?autoplay=true` é equivalente a `?autoplay=1`. Para parâmetros que aceitam o valor `true`, a ausência de um valor é tratada como `true`. Por exemplo: `?autoplay` é equivalente a `?autoplay=true`. ## 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`: ```html ``` 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"`: ```html ``` ### 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`: ```html ``` 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: ```html ``` Valores disponíveis: `auto`, `240p`, `360p`, `480p`, `720p`, `1080p`, `1440p`, `2160p`. > **Информация:** Para ajuste fino da otimização (reprodução automática ao ficar visível, reprodução automática ao passar o mouse, reprodução apenas ao passar o mouse) use IFrame API. Veja a [documentação completa do player](https://docs-br.kinescope.com/player-docs/). ## Solução de problemas Se você encontrar problemas com o player, veja a seção [Solução de problemas](https://docs-br.kinescope.com/troubleshooting/resolving-issues/), 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](https://docs-br.kinescope.com/catalog-and-video-management/media-file-settings/)** — gerenciando o acesso ao vídeo e as configurações de incorporação 2. **[Personalização do player](https://docs-br.kinescope.com/video-player/player-customization/)** — personalizando a aparência e o comportamento para a sua marca 3. **[IFrame Player API](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-control-player/)** — controle programático do player via IFrame Player API, incluindo configuração de CTA 4. **[Proteção de conteúdo](https://docs-br.kinescope.com/content-protection/)** — adicionando marcas d'água ou criptografia DRM 5. **[Publicidade](https://docs-br.kinescope.com/video-player/advertising/)** — integrando tags de publicidade no player 6. **[Solução de problemas](https://docs-br.kinescope.com/troubleshooting/resolving-issues/)** — problemas comuns e como resolvê-los > **Информация:** **Para desenvolvedores:** Documentação completa do player com exemplos de código, IFrame API, eventos, playlists, integrações de analytics (Google Analytics), CTA, publicidade e outras configurações avançadas está disponível na [documentação do player](https://docs-br.kinescope.com/player-docs/). Ainda tem dúvidas? Escreva para o chat de suporte na interface do Kinescope — nossos especialistas vão ajudá-lo!