ApsaraVideo VOD:Player SDK for Web FAQ

Problemas relacionados à licença

Resolva problemas de licença inválida ou expirada em License FAQ.

Configuração de licença e nomes de domínio autorizados do Player SDK for Web

O Player SDK for Web valida uma License em relação ao nome de domínio da página web que hospeda o player. Use esta entrada para configurar o nome de domínio autorizado, tratar erros de License durante a inicialização e concluir a configuração da License ao atualizar o SDK.

• Nome de domínio autorizado: O nome de domínio autorizado corresponde ao domínio de acesso comercial da página web que hospeda o player, e não ao domínio de recurso do ApsaraVideo VOD. Vincule o nome de domínio por correspondência exata ou com caractere curinga. Configure domínios de teste e de produção da mesma forma: conclua a verificação de propriedade de cada domínio no console e solicite uma License gratuita.

• **license resource init error durante a inicialização**: Esse erro geralmente ocorre quando o modo de depuração está ativado, por exemplo, com o vconsole habilitado. Ele não afeta a reprodução normal. Desative o modo de depuração ou verifique as ferramentas de desenvolvedor do navegador (Console e Network) em busca de outros erros relatados.

• Página de autorização travada em um placeholder de carregamento: Se a SDK list ou a página de autorização da License não conseguir ler dados e continuar exibindo um placeholder de carregamento, crie um aplicativo Player SDK for Web e vincule o nome de domínio autorizado diretamente.

• Atualização para a versão mais recente do Player SDK for Web: Substitua as URLs de referência de CSS e JavaScript. O restante do código permanece compatível, portanto, não é necessário integrar novamente as operações da API. Adicione o parâmetro license, que contém domain e key, à configuração de inicialização. Solicite uma License gratuita no console e vincule o nome de domínio autorizado antes de inicializar o player.

Problemas comuns entre plataformas

• Para problemas independentes de plataforma, consulte Cross-platform player FAQs.

• Desenvolvedores experientes também podem troubleshoot playback errors de forma independente.

Problemas de desenvolvimento

Alternância de vid e playauth no player HTML5

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

O método replayByVidAndPlayAuth aciona o evento ready?

Sim. O evento ready é disparado assim que o player termina de inicializar o vídeo e renderizar a UI. Nesse momento, você pode chamar métodos como seek com segurança. Escute o evento com:

player.on('ready', function(){...});

Ajuste do tamanho e da posição do botão de reprodução

• Substitua o CSS para redimensionar o botão de reprodução. Exemplo (metade do tamanho):

   .prism-player .prism-big-play-btn {
      width: 45px;
      height: 45px;
      background-size: 128px 256px;
  }

• Defina as propriedades x e y de bigPlayButton em skinLayout para reposicionar o botão de reprodução.

  skinLayout: [
    { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
    {
      name: "H5Loading",
      align: "cc",
    },
    {
      name: "controlBar",
      align: "blabs",
      x: 0,
      y: 0,
      children: [
        { name: "progress", align: "tlabs", x: 0, y: 0 },
        { name: "playButton", align: "tl", x: 15, y: 26 },
        { name: "timeDisplay", align: "tl", x: 10, y: 24 },
        { name: "fullScreenButton", align: "tr", x: 20, y: 25 },
        { name: "volume", align: "tr", x: 20, y: 25 },
      ],
    },
  ]

Após chamar o método seek, como o player implementa o botão de pausa?

O botão reflete o estado anterior do player. Chame player.pause() após o seek para exibir o botão de pausa.

Definição da posição inicial de reprodução

Defina watchStartTime para especificar a posição inicial de reprodução.

new Aliplayer({
  watchStartTime: 60, // Start playback from the 60th second.
})

Aliplayer API Reference.

Ativação de tela cheia automática na reprodução automática

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//example.aliyundoc.com/video/media02.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    qualitySort: "asc",
    mediaType: "video",
    preload: true,
    isLive: false,
  },
  function (player) {
    player.mute();
    console.log("The player is created");
  }
);
player.on("ready", function () {
  player.fullscreenService.requestFullScreen();
});

Qual é a diferença entre preload: true e preload: false no Aliplayer?

preload: true ativa o pré-carregamento. preload: false desativa o pré-carregamento.

Desativação do seek na barra de progresso

Defina disableSeek: true para impedir que os usuários arrastem a barra de progresso. Disable dragging the progress bar.

Obtenção periódica do tempo atual de reprodução

Use um temporizador para chamar player.getCurrentTime() a cada segundo. Limpe o temporizador quando a reprodução for pausada, ocorrer um erro ou a reprodução terminar.

var timer = null;

timer = setInterval(() => {
  var current = player.getCurrentTime();
  console.log(current);
}, 1000);

// Clear the timer.
function clear() {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}
player.on("ended", function (e) {
  clear();
});
player.on("pause", function (e) {
  clear();
});
player.on("error", function (e) {
  clear();
});

Outros problemas comuns com o Player SDK for Web

1. **Precisão do método seek**: O método seek aceita valores de ponto flutuante (por exemplo, 10.5). Para melhor compatibilidade, arredonde para baixo ou use menos casas decimais.

2. Reconexão após desconexão de transmissão ao vivo: Configure o número de tentativas de reconexão. Caso a reprodução não seja restaurada após as tentativas configuradas, escute o evento error para tratar a falha, por exemplo:

   player.on('error', (e) => { var code = String(e.paramData.error_code); })

3. License Key e o recurso de download: A License Key usada para reprodução não é intercambiável com o recurso de download. Os downloads são gerados com base nas informações do aplicativo.

4. Barra de controle exibe texto, mas sem ícones: Verifique se o arquivo aliplayer-min.css está incluído corretamente. Não utilize skinLayoutIgnore e skinLayout juntos — o skinLayoutIgnore tem precedência e remove o componente. Defina uma altura fixa (400px ou mais) no contêiner do player para evitar colapso de layout. Compare sua configuração com a demonstração oficial em Vue para depuração.

5. Erro 537067523 no Player SDK for Flutter para iOS: Defina um ID de rastreamento com FlutterAliplayer.setTraceID para auxiliar na solução de problemas de log; atualize o Player SDK for Flutter para a versão 7.14.0 ou posterior, que otimiza a biblioteca de rede; caso não esteja utilizando o Alibaba Cloud CDN, insira em contato com seu provedor de CDN para verificar os logs de solicitação.

Como verificar e atualizar a versão do Player SDK for Web?

1. Verificar a versão: Consulte o arquivo aliplayer-min.js incluído no seu projeto ou o campo de versão em sua configuração.

2. Atualizar a versão (conforme fornecido pelo solicitante): Edite a variável de versão na linha 30 de cada um dos seguintes arquivos de pacote de idiomas: language.SC_UTF8.php, language.SC_GBK.php, language.TC_UTF8.php, language.TC_BIG5.php. Atualize todos os 4 arquivos para o novo número de versão (por exemplo, de 2.27.1 para 2.37.8).

Problemas e erros de reprodução

Falha na reprodução de vídeo codificado em H.265

O Player SDK for Web 2.14.0+ suporta vídeo codificado em H.265. É necessário obter uma licença e configurar os parâmetros H.265. Play H.265/H.266 encoded video streams.

Erro de origem cruzada ao reproduzir arquivos FLV ou M3U8

Se você encontrar erros como "Access is denied for this document" ou "Access-Control-Allow-Origin", ative o acesso de origem cruzada para o seu domínio de reprodução. Configure cross-origin access.

Player HTML5 não entra no modo paisagem

O SDK do player não fornece uma API para modo paisagem. No iOS, o modo paisagem depende das configurações de orientação do sistema. No Android, o player entra no modo paisagem automaticamente no modo de tela cheia.

Cabeçalho Referer ausente nas solicitações de reprodução FLV

1. As solicitações do player seguem a Referrer-Policy do seu site. Certifique-se de que sua Referrer-Policy permita que as solicitações de vídeo incluam um cabeçalho Referer.

2. Se a Referrer-Policy permitir um cabeçalho Referer, mas ele estiver ausente nas solicitações de vídeo, a ACL baseada em Referer poderá bloquear a reprodução. Defina enableWorker: false para resolver isso.

Remoção de barras pretas da janela do player

Barras pretas aparecem quando o vídeo não preenche a janela do player.

As barras pretas correspondem ao plano de fundo do contêiner do player. Aplique object-fit: cover; à tag <video> para removê-las.

Falha na inicialização do AliPlayer com TypeError: Failed to execute 'getComputedStyle' on 'Window'

Causa: Durante a inicialização do componente controlBar.volume, o método interno _getBottom() recupera um elemento DOM que é null ou não é um Element (geralmente porque o contêiner ainda não terminou de renderizar). Chamar getComputedStyle nesse valor gera uma exceção e bloqueia o restante da inicialização.

Solução 1 (recomendada): Atualize o Player SDK for Web para a versão 2.37.8 ou posterior, que corrige esse problema de compatibilidade.

Solução 2 (solução alternativa): Adicione skinLayoutIgnore: ["controlBar.volume"] à configuração do player para ignorar a inicialização do controle de volume. Se precisar manter o controle de volume, verifique se o elemento contêiner existe e se seu offsetWidth é maior que 0 antes de inicializar o player; caso contrário, atrase a inicialização em 200ms e tente novamente.

loadByUrl não funciona no iOS e Android

// `seek` only jumps to the time, but does not play.
// `play` restarts playback from the beginning on iOS.
// On iOS, full-screen playback is hijacked by the native player.

document.querySelector(".no1").onclick = function () {
  player.loadByUrl("//player.alicdn.com/resource/player/qupai.mp4");
};

// Listen for 'play' and 'canplay' events to call seek. This might not work in some browsers. As an alternative, consider calling seek on the first 'timeupdate' event.
player.on("canplay", function () {
  player.seek(20);
});
// No workaround is available for full-screen hijacking on iOS.

Vídeo anterior continua sendo reproduzido após a troca da fonte de vídeo

No Player SDK for Web 2.9.11, o método loadByUrl falha no modo de compatibilidade do 360 Browser no Windows 10. O vídeo anterior continua sendo reproduzido após a troca da fonte.

Causa: problema de compatibilidade do navegador.

Solução: atualize para o Player SDK for Web 2.9.19 ou posterior.

Falha no método player.seek() no iOS

// Call seek in the `play` and `canplay` events. Otherwise, it may not take effect.
player.on("canplay", function () {
  player.seek(20);
});

Sincronização com a borda ao vivo após retomar uma transmissão

Descrição do problema

Se você alternar seu aplicativo para o plano de fundo enquanto reproduz uma transmissão ao vivo, a reprodução será pausada. Ao retornar ao aplicativo, a transmissão ao vivo continua a ser reproduzida a partir do ponto em que a pausa ocorreu. Existe alguma configuração que possa ser feita para reduzir a latência de reprodução, de modo que o clipe mais recente seja reproduzido após a retomada?

Solução

Após retomar a reprodução, a transmissão ao vivo continua a partir do ponto em que a pausa ocorreu. Não é possível configurar parâmetros para acelerar a reprodução. Recomendamos puxar a transmissão ao vivo novamente e usar o player para reproduzi-la mais uma vez.

Uso do Player SDK for Web em mini programas WeChat

O Player SDK for Web não executa em mini programas WeChat. Use o componente de vídeo integrado do mini programa. WeChat mini program.

Falha na extração de fluxo de origem cruzada para transmissão ao vivo

Se a validação local de origem cruzada falhar, verifique sua configuração de Domain Management. Solicitações originadas de localhost falham se apenas o seu próprio domínio estiver configurado. Por padrão, o localhost passa na validação quando nenhum domínio está configurado.

Falha na reprodução de vídeo VOD no iOS

Possível causa: O Safari no iOS pode falhar ao decodificar vídeos com alta taxa de compressão ou perfil de codificação high.

Solução: Transcodifique o vídeo antes da reprodução. Audio and video transcoding.

Problemas específicos de plataforma

Remoção da miniatura padrão no WebView

Em alguns WebViews Android, omitir o atributo poster na tag <video> faz com que uma miniatura padrão (fundo cinza com um botão de reprodução) apareça.

Solução: Defina um atributo poster inválido na tag <video> para substituir o padrão.

extraInfo: { poster: 'noposter' } // The content of the player parameter `extraInfo` is passed to the <video> tag.

Ativação do modo de documento mais alto no IE

<meta http-equiv="x-ua-compatible" content="IE=edge" >

Ativação de reprodução automática no WeChat

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
  wx.config({
      // Configuration details. wx.ready can be used even if the details are incorrect.
      debug: false,
      appId: '',
      timestamp: 1,
      nonceStr: '',
      signature: '',
      jsApiList: []
  });
  wx.ready(function() {
      var video=$(player.el()).find('video')[0];
      video.play();
  });
};
// Workaround for autoplay issue on iOS.
autoPlay();
</script>