Otimização

Se uma página tem muitos vídeos ou um player fica fora da área visível, adie o carregamento e limite a qualidade. A página carregará mais rápido e usará menos dados.

O guia de incorporação simples com iframe também descreve os parâmetros básicos de URL.

Desativar o pré-carregamento do vídeo

O player e o pôster são carregados primeiro. Os dados do vídeo começam a carregar apenas quando a reprodução é iniciada.

Incorporação simples:

<iframe src="https://kinescope.io/embed/VIDEO_ID?preload=0" ...></iframe>

IFrame API:

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { preload: false },
})

Carregar o iframe sob demanda

O navegador pode adiar o carregamento enquanto o <iframe> estiver fora da área visível. Consulte Carregamento sob demanda no guia de incorporação simples.

<iframe loading="lazy" src="https://kinescope.io/embed/VIDEO_ID" ...></iframe>

Desativar o pôster do player

Se você exibe seu próprio pôster, como uma <img> sobre o player, desative o pôster integrado. Isso evita que a imagem seja carregada duas vezes:

<iframe src="https://kinescope.io/embed/VIDEO_ID?no_poster=1&preload=0" ...></iframe>

Iniciar a reprodução quando estiver visível

O player inicia automaticamente quando entra na área visível. Isso é útil para vídeos abaixo da primeira dobra da página.

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'viewable' },
})

Iniciar a reprodução ao passar o ponteiro

O vídeo é reproduzido enquanto o ponteiro está sobre o player e pausado quando sai. Esse comportamento é interrompido após o primeiro clique no player.

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'hover' },
})

Qualidade do vídeo (VideoQuality)

O player usa este tipo de qualidade:

type VideoQuality = 'auto' | number

• 'auto' seleciona a qualidade com taxa de bits adaptativa (ABR) para a rede e o dispositivo
• number define a altura do quadro em pixels, normalmente 360, 480, 720, 1080, 1440 ou 2160

Usar um parâmetro de URL

https://kinescope.io/embed/VIDEO_ID?quality=720

Consulte o parâmetro quality em Incorporação simples com iframe .

Usar a IFrame API

const qualities = await player.getVideoQualityList()
// ['auto', 360, 480, 720, 1080]

await player.setVideoQuality(720)

const current = await player.getVideoQuality()
// 720

Consulte Controlar o player para ver os detalhes dos métodos.

Limitar a qualidade máxima de ABR

Por padrão, a ABR seleciona a melhor qualidade disponível. Defina um valor máximo para reduzir o uso de dados:

playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { maxAbrQuality: 720 },
})

Próximos passos

• Incorporação simples com iframe — consulte todos os parâmetros de URL
• Criar um player — configure behavior.preload, autoPlay e outras opções
• Solução de problemas — resolva problemas de reprodução automática e políticas do navegador