Personalização do Player

Os templates no Kinescope permitem adaptar com flexibilidade a aparência e a funcionalidade do player para diferentes projetos e tarefas. Cada template tem um nome único e pode ser aplicado a vídeos individuais ou a um projeto inteiro. Por exemplo, você pode criar um template com controles visíveis para vídeos educacionais e outro com design minimalista e barra de progresso oculta para clipes promocionais.

Para quem é este artigo

• Designers — precisam configurar a aparência do player de acordo com a marca
• Gestores de conteúdo — precisam criar diferentes templates para diferentes tipos de conteúdo
• Desenvolvedores — precisam configurar o comportamento do player programaticamente

Criando um novo template de player

A partir das configurações do vídeo

• No Catálogo, abra as configurações do vídeo clicando duas vezes no nome.
• Acesse a aba Básico, na seção Player clique em Configurar ou selecione Criar novo player.
• Defina um nome para o template, mude pelo menos uma configuração e clique em Salvar.
• O player será aplicado a este vídeo e também ficará disponível nas configurações de outros clipes e no Gerenciador de Templates nas configurações do workspace.

Via o gerenciador de templates

• Acesse o Gerenciador de Templates via Configurações → Players.
• Clique em Novo player, defina um nome e abra-o para edição.

Editando templates

A partir das configurações do vídeo

• No catálogo, clique duas vezes no nome do vídeo.
• Acesse a aba Básico → seção Player. Selecione o template desejado e clique em Configurar.
• Faça alterações e salve-as.

Via o gerenciador de templates

• Na seção Configurações → Players, encontre o template desejado.
• Clique no nome do template para editar.

Configurações de comportamento e aparência do player

O player do Kinescope pode ser adaptado para qualquer tarefa e projeto graças à sua ampla gama de configurações. Elas são divididas em duas categorias principais:

1. Básico: parâmetros básicos, incluindo configurações antes do lançamento e durante a reprodução.
2. Avançado: configurações adicionais para o comportamento do player, transmissão para dispositivos, personalização dos elementos de controle e outras funções.

As alterações nas configurações são exibidas na área de preview em tempo real. Se você selecionar o modo de exibição Monitor ou Telefone, poderá ver como o template finalizado ficará. É muito importante não esquecer de salvar as configurações, caso contrário elas não serão aplicadas.

Configurações básicas de comportamento e aparência

Configurações básicas

Interface de configurações básicas do player:

Nome do template de player

Defina um nome único para o template para facilitar sua localização, uso para outros vídeos ou edição via o gerenciador de templates no workspace.

Cor do player

A cor corporativa da sua marca pode influenciar a conversão. A cor muda o botão grande de Play/Pausa, a barra de progresso e o painel de controle do player. A tonalidade pode ser selecionada via uma paleta ou inserindo o código RGB ou HEX .

Arredondamento de cantos

Integre o player ao estilo geral do seu site: nas configurações do template você pode arredondar os cantos da janela do player de 0 a 24px.

Logotipo

Adicione um logotipo que será exibido no canto inferior direito do player. Geralmente uma imagem de 150×150 px no formato PNG é suficiente. Você também pode adicionar uma dica de tooltip ao passar o mouse ou um link que abre ao clicar.

Exemplo de player com logotipo clicável:

Reprodução automática

Permite que o vídeo seja reproduzido automaticamente quando a página carrega.

Exemplo de player com reprodução automática:

Vídeo de fundo

Configurações do player para reprodução em segundo plano:

• Os controles do player ficam invisíveis;
• O som e a pausa automática são desativados;
• O vídeo é reproduzido automaticamente e se repete.

Modo 360°

Modo para visualização de vídeo panorâmico e esférico.

Remover barras pretas

Esta configuração estica o vídeo até as bordas do player para remover as barras pretas nas bordas. Especialmente útil para resoluções de vídeo não padrão.

Volume padrão

Defina o nível de volume ao iniciar o vídeo de 0% a 100%, para que o nível de som seja imediatamente confortável para os espectadores.

Qualidade de vídeo padrão

Selecione a qualidade do stream de vídeo que será usada ao iniciar o vídeo. Opções disponíveis:

• Auto (padrão): O player determina a qualidade com base na velocidade de conexão.
• Qualidade definida: por exemplo, 720p ou 1080p.

Velocidade de reprodução padrão

Defina a velocidade de reprodução com a qual o vídeo será iniciado para todos os espectadores. Intervalo disponível: de 0,25× a 2×. Por padrão, a velocidade é normal — 1×.

Se Velocidade de reprodução estiver ativada nas configurações avançadas do player, o espectador poderá alterar a velocidade durante a visualização.

Comportamento ao final do vídeo

Escolha o que acontece após o término do vídeo. Quatro cenários estão disponíveis:

1. Botão de repetição: permite que os espectadores reiniciem o vídeo clicando.
2. Retornar ao poster: o vídeo retorna à tela original com o poster.
3. Repetição: reprodução automática e repetida do vídeo.
4. Chamada para Ação (CTA): ao final de um vídeo ou playlist, você pode adicionar um botão com um link. Especifique um título, uma descrição e direcione o espectador para o próximo passo: site, curso, cadastro ou compra. A chamada para ação ficará assim:

Baixar vídeo

Permite que os espectadores baixem o vídeo. Por padrão, o download está desativado. Ao ativá-lo, um botão de download aparece no player: dentro da janela do player no player incorporado e como um botão separado abaixo do player ao assistir por link direto. O botão abre uma janela com duas abas:

• Vídeo — lista de resoluções disponíveis com o tamanho do arquivo (360p, 480p, 720p, 1080p). O espectador escolhe e baixa o arquivo.
• Transcrição — faixas com transcrição em texto. A aba aparece se pelo menos uma faixa tiver sido adicionada ao vídeo.

Antes do lançamento

Configurações de exibição de elementos do player antes do início da reprodução:

Título e subtítulo

O título e o subtítulo do vídeo serão exibidos no canto superior esquerdo do player antes do lançamento se estiverem especificados nas configurações do vídeo na aba Básico. Esses elementos estão ocultos por padrão.

Exemplo de exibição de título e subtítulo no player:

Botão de reprodução

Por padrão, o botão Play/Pausa é exibido no centro do player antes do início da reprodução, mas pode ser ocultado com esta configuração.

Exemplo de player com botão de reprodução:

Painel de controle

Por padrão, está oculto, tornando o design do player minimalista. Se o pré-carregamento estiver ativado nas configurações avançadas do player, o painel de controle do player será exibido antes do início do clipe.

Exemplo de exibição do painel de controle antes do lançamento:

Durante a reprodução

Configurações de exibição de elementos do player durante a reprodução:

As configurações de reprodução do player permitem personalizar a exibição de títulos, barra de progresso e painel de controle.

Barra de progresso

Esta opção permite ocultar a barra de progresso durante a reprodução do vídeo. Isso pode ser útil para vídeos promocionais onde é importante manter a atenção do usuário do início ao fim. A barra de progresso está ativada por padrão.

Exemplo de player sem barra de progresso:

Painel de controle

Você pode ocultar completamente o painel de controle durante a reprodução, deixando apenas a barra de progresso se ela não estiver desativada. O painel de controle é mostrado por padrão.

Exemplo de player sem controles (apenas vídeo):

Configurações avançadas

Interface de configurações avançadas do player:

Iniciar vídeo com legendas

Se as legendas forem carregadas para o vídeo, elas serão exibidas automaticamente no lançamento. Se o vídeo tiver múltiplas faixas de legendas, a ordem de seleção é determinada por:

• O idioma definido no player;
• O idioma do navegador do espectador;
• A ordem das legendas na lista.

As legendas estão desativadas por padrão.

Pausa automática

Se vários players forem colocados na página, isso pode afetar o desempenho. A pausa automática resolve esse problema: ela pausa automaticamente o player quando a reprodução começa em outro player na mesma página.

Transmissão para dispositivos

Esta opção controla a capacidade de transmitir o stream de vídeo para monitores externos via protocolos Chromecast e Airplay, bem como a exibição dos botões correspondentes no player. O suporte a transmissão está ativado por padrão.

Menu de configurações

O menu de configurações (ícone de engrenagem), pelo qual o espectador pode alterar a velocidade, a qualidade do vídeo e outras configurações. Permite adicionar ou remover itens do menu:

• Qualidade somente de áudio: Projetado para casos com conexão lenta à internet. Ativa apenas a faixa de áudio sem o vídeo.
• Velocidade de reprodução: Duplicada no painel de controle, tornando-a acessível de vários lugares.
• Busca em legendas: adiciona um campo de busca no menu de legendas. O espectador digita uma palavra ou frase e pula para o trecho correspondente.
• Escala: quando ativada, o menu de configurações mostra o valor atual da escala. O espectador ajusta em passos de 3% ou redefine para 100%. Em dispositivos móveis, a escala funciona com gestos de pinça (aproximar e afastar).

Elementos do painel de controle

Esse conjunto de configurações permite ocultar ou mostrar seletivamente elementos individuais do painel de controle do player. Todos são mostrados por padrão.

Exemplo de configurações de elementos do painel de controle:

Marcas d’água

Uma marca d’água estática é um texto ou logotipo que é exibido permanentemente na tela durante a reprodução do vídeo para identificar a autoria ou indicar direitos. Adequada para vídeos públicos, comerciais e conteúdo amplamente distribuído.

Configurações adicionais

Se o pré-carregamento de vídeo estiver ativado, o tempo geral de carregamento da página pode aumentar. A opção está desativada por padrão.

Configurações de pré-carregamento e funções adicionais:

O player do Kinescope suporta atalhos de teclado por padrão; a lista completa está disponível no menu de clique com botão direito no player.

Exemplo de menu com atalhos de teclado:

O player do Kinescope pode lembrar as configurações do player para cada espectador (velocidade de reprodução, qualidade do vídeo e outras preferências).

Configurações de memória de preferências do espectador:

A opção Assistir do início funciona junto com a memória da posição de reprodução. Se o espectador já abriu o vídeo e voltou a ele, o player continua a reprodução a partir do ponto em que parou. Quando essa configuração está ativada, o player exibe o aviso «Assistir do início?» com o botão «Ir para o início» — ao clicar, o vídeo retorna ao começo. Para continuar a partir da posição atual, o espectador fecha o aviso no ícone de fechar.

A opção de controle por clique do mouse/toque está disponível nas configurações. Quando ativada, você pode controlar a reprodução não apenas via elementos de interface, mas também clicando diretamente no vídeo. Quando desativada, o vídeo só pode ser controlado via o painel de controle.

Clicar com o botão direito no vídeo no menu de contexto mostra o item Sobre o Kinescope, que redireciona para o site oficial da plataforma.

Exemplo de configurações do menu de contexto e modo pseudo-tela cheia:

O modo pseudo-tela cheia para iOS preserva os controles originais do player do Kinescope ao entrar no modo tela cheia. Se você usar marcas d’água dinâmicas, ative esta opção. Veja mais no artigo Modo Pseudo-Tela Cheia no iOS .

A otimização de SEO adiciona metadados ao código do player (título, descrição, poster e outros) que são indexados pelos mecanismos de busca. A estrutura de marcação schema.org é usada para melhorar as posições de vídeos públicos nos resultados dos mecanismos de busca.

Ative a coleta de dados para que o player possa preencher a seção de analytics com dados de comportamento do usuário.

Configurações de analytics e otimização de SEO:

O que fazer a seguir?

1. Incorporação — saiba como incorporar o player personalizado no seu site
2. IFrame Player API — controle programático do player via JavaScript
3. Analytics — acompanhe a eficácia dos players personalizados

Se ainda tiver dúvidas, escreva para o chat de suporte na interface do Kinescope — os especialistas vão ajudá-lo!