ApsaraVideo VOD:Player SDK for Web FAQ

Problemas relacionados à licença

Para resolver problemas de licença inválida ou expirada, consulte as Perguntas frequentes sobre licenças.

Problemas comuns em todas as plataformas

• Para problemas independentes de plataforma, consulte as Perguntas frequentes do player multiplataforma.

• Desenvolvedores experientes também podem solucionar erros de reprodução de forma independente.

Problemas de desenvolvimento

Alternar vid e playauth no player HTML5

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

Ajustar o tamanho e a 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 },
      ],
    },
  ]

Como o player implementa o botão de pausa após a chamada do método seek?

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

Definir a posição inicial de reprodução

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

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

Consulte a Referência da API do Aliplayer.

Ativar 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();
});

Desativar a busca na barra de progresso

Defina disableSeek: true para impedir que os usuários arrastem a barra de progresso. Consulte Desativar o arrasto da barra de progresso.

Obter o tempo de reprodução atual periodicamente

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();
});

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 de H.265. Consulte Reproduzir fluxos de vídeo codificados em H.265/H.266.

Erro de origem cruzada ao reproduzir arquivos FLV ou M3U8

Caso encontre erros como "Access is denied for this document" ou "Access-Control-Allow-Origin", ative o acesso de origem cruzada para seu domínio de reprodução. Siga as instruções em Configurar acesso de origem cruzada.

O player HTML5 não entra no modo paisagem

O SDK do player não fornece uma API para o modo paisagem. No iOS, esse modo depende das configurações de orientação do sistema. No Android, o player entra automaticamente no modo paisagem quando está em 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 esse problema.

Remover barras pretas da janela do player

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

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

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.

O 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 mesmo 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 superior.

O método player.seek() falha no iOS

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

Sincronizar com a borda ao vivo após retomar um fluxo

Descrição do problema

Se você colocar o aplicativo em segundo plano durante a reprodução de um fluxo ao vivo, a reprodução será pausada. Ao retornar ao aplicativo, o fluxo ao vivo continua a partir do ponto em que foi pausado. Existe alguma configuração para reduzir a latência de reprodução, permitindo que o trecho mais recente seja exibido após a retomada?

Solução

Ao retomar a reprodução, o fluxo ao vivo continua exatamente do ponto em que foi pausado. Não é possível configurar parâmetros para acelerar a reprodução. Recomendamos puxar o fluxo ao vivo novamente e usar o player para reiniciar a reprodução.

Usar o Player SDK for Web em mini programas do WeChat

O Player SDK for Web não é executado em mini programas do WeChat. Use o componente de vídeo nativo do mini programa. Consulte Mini programa do WeChat.

Falha no pull 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 falharão 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. Consulte Transcodificação de áudio e vídeo.

Problemas específicos de plataforma

Remover a miniatura padrão no WebView

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

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.

Ativar o modo de documento mais alto no IE

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

Ativar 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>