ApsaraVideo VOD:Personalizar a UI de erro do player HTML5

UI de erro padrão

UI de erro padrão do ApsaraVideo Player:Ative o componente de UI displayError

No ApsaraVideo Player V2.1.0 ou posterior com skin personalizada, adicione o componente de UI displayError à configuração do skinLayout.

skinLayout:[
    ......
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay", align: "cc"},
    ......
  ]

UI de erro personalizada

Use um dos métodos a seguir:

• Modifique o arquivo CSS da UI de erro padrão

  Altere o arquivo CSS para ajustar a cor de fundo, a fonte, a posição ou a visibilidade da mensagem de erro.

  Principais classes CSS:

  Classe	Descrição
  .prism-ErrorMessage	Contêiner mais externo.
  .prism-error-content	Área de exibição da mensagem de erro.
  .prism-error-operation	Área de operação.
  .prism-detect-info	Detalhes de diagnóstico, como UUID e ID da solicitação.

• Defina uma nova UI de erro

Assine os eventos de erro para interceptar a UI padrão:

player.on('error',function(e){
      // Hide the error UI.
      $('.prism-ErrorMessage').hide();
      // Parse the data about the error.
      var errorData = e.paramData;
      console.dir(errorData);
    });

Para definir uma nova UI de erro:

1. Oculte a UI de erro padrão conforme mostrado no código anterior.

2. Analise os dados de erro do parâmetro paramData. A figura a seguir mostra os campos de erro.

3. Use os códigos de erro analisados e atribua-os aos parâmetros da sua UI de erro personalizada.