ApsaraVideo VOD:Recursos avançados

Controle de reprodução

Reprodução automática

• Mesmo após configurar autoplay: true, a reprodução automática pode não ser ativada. Isso ocorre porque a maioria dos navegadores modernos desativou a reprodução automática com áudio para preservar a experiência do usuário.

  Por exemplo, a política de AutoPlay do Chrome é a seguinte:

  • Sempre permitir reprodução automática e silenciar

  • A reprodução automática com áudio é permitida nos seguintes cenários:

    • O usuário interagiu com a página web, por exemplo, clicando ou tocando na tela.

    • O comportamento de visualização de vídeos do usuário em um site ultrapassou um determinado limiar. Por exemplo, se um usuário assiste frequentemente a vídeos em um site, o Chrome permite a reprodução automática com áudio nesse site. Essa é uma política interna do Chrome e programas não podem alterá-la.

    • O usuário adicionou um site à tela inicial em um dispositivo móvel ou instalou um Progressive Web App (PWA) em um dispositivo desktop.

  Nesses casos, você pode:

  • Configure mute:true para silenciar a reprodução automática. Para mais informações, consulte Operações de API.

  • Configure autoplayPolicy: { fallbackToMute: true } para tentar primeiro a reprodução automática com áudio. Se falhar, a reprodução automática silenciada será ativada. Para mais informações, consulte Operações de API.

  Observe que a reprodução automática silenciada também pode ser bloqueada por alguns navegadores, como o navegador do WeChat. Portanto, não é possível garantir que a reprodução automática funcione em todas as circunstâncias.

  Para mais detalhes sobre as políticas de reprodução automática dos navegadores, consulte a documentação do Chrome e do Safari.

Reprodução contínua

Personalizar a aparência e os componentes do player

O ApsaraVideo Player SDK for Web permite personalizar a aparência do player, incluindo a skin, e definir quais componentes devem ser exibidos, bem como a área de exibição de cada um. Esses componentes incluem a barra de controle e a interface de erro.

• Componentes de UI da barra de controle

  Defina a visibilidade e a posição de cada componente de UI configurando o atributo skinLayout. Para mais informações, consulte Configurar skinLayout.

  • Configurações padrão do ApsaraVideo Player SDK

    skinLayout:[
       {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
        {name: "H5Loading", align: "cc"},
        {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
        {name: "infoDisplay"},
        {name:"tooltip", align:"blabs",x: 0, y: 56},
        {name: "thumbnail"},
        {
          name: "controlBar", align: "blabs", x: 0, y: 0,
          children: [
            {name: "progress", align: "blabs", x: 0, y: 44},
            {name: "playButton", align: "tl", x: 15, y: 12},
            {name: "timeDisplay", align: "tl", x: 10, y: 7},
            {name: "fullScreenButton", align: "tr", x: 10, y: 12},
            {name:"subtitle", align:"tr",x:15, y:12},
            {name:"setting", align:"tr",x:15, y:12},
            {name: "volume", align: "tr", x: 5, y: 10}
          ]
        }
      ]

• Interface de erro

  O ApsaraVideo Player SDK for Web fornece uma interface de erro padrão. Você também pode personalizá-la usando um dos métodos a seguir. Para mais informações, consulte Personalizar a interface de erro para o player HTML5.

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

    É possível personalizar a interface de erro com base no modelo padrão. Modifique o arquivo CSS para alterar a cor de fundo, a fonte e a posição, além de definir se a mensagem de erro deve ser exibida.

  • Definir uma nova interface de erro

    Para criar uma nova interface de erro, assine os eventos de erro.

• Configure a skin do playerConfigurações de skin do player Web

  Caso a UI fornecida pelo ApsaraVideo Player SDK for Web não atenda aos seus requisitos de negócio, modifique o arquivo CSS para personalizar a skin do player.

  Nota

  Para mais detalhes sobre as configurações, consulte o arquivo CSS aliplayer-min.css do player. O código de exemplo abaixo mostra como configurar um botão de reprodução grande. Para mais informações, consulte Configurar a skin do player.

  .prism-player .prism-big-play-btn {
    width: 90px;
    height: 90px;
    background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
  }

Personalizar a miniatura do vídeo

Cada vídeo enviado ao ApsaraVideo VOD possui uma miniatura. O ApsaraVideo VOD oferece várias formas de alterá-la. Antes do upload, defina uma imagem ou um snapshot do vídeo como miniatura. Também é possível modificar a miniatura após o envio. Personalize a miniatura do vídeo utilizando um dos métodos abaixo:

• Configure a miniatura do vídeo no console do ApsaraVideo VOD. Para mais informações, consulte Definir a miniatura do vídeo.

• Defina a miniatura do vídeo configurando o atributo cover do player.

  var player = new Aliplayer({
   "id": "player-con",
   "source":"//player.alicdn.com/video/aliyunm****.mp4",
    "cover":"Thumbnail URL",
  },
   function () { } 
  );

Snapshots de vídeo

O ApsaraVideo Player SDK for Web V2.1.0 e versões posteriores suportam a captura de snapshots durante a reprodução. O formato de saída pode ser image ou jpeg. Ative esse recurso explicitamente. Os dados retornados incluem o timestamp de reprodução, uma string Base64 e os dados binários da imagem.

Ativar o recurso de snapshot

• Ative o recurso de snapshot no player web

  Importante

  Não é possível capturar snapshots de vídeos Flash Video (FLV) reproduzidos no Safari. O botão de snapshot não aparece mesmo que o recurso esteja ativado. O elemento Canvas é responsável por habilitar a captura de snapshots no player web. Adicione um cabeçalho que permita Cross-Origin Resource Sharing (CORS) para o domínio de reprodução. Para mais informações, consulte Configurar CORS.

  Adicione as configurações da UI de snapshot ao atributo skinLayout. Código de exemplo:

      skinLayout:[
      {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
      {
        name: "H5Loading", align: "cc"
      },
      {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
      {name: "infoDisplay"},
      {name:"tooltip", align:"blabs",x: 0, y: 56},
      {name: "thumbnail"},
      {
        name: "controlBar", align: "blabs", x: 0, y: 0,
        children: [
          {name: "progress", align: "blabs", x: 0, y: 44},
          {name: "playButton", align: "tl", x: 15, y: 12},
          {name: "timeDisplay", align: "tl", x: 10, y: 7},
          {name: "fullScreenButton", align: "tr", x: 10, y: 12},
          {name:"subtitle", align:"tr",x:15, y:12},
          {name:"setting", align:"tr",x:15, y:12},
          {name: "volume", align: "tr", x: 15, y: 10},
          {name: "snapshot", align: "tr", x: 5, y: 12},
        ]
      }
    ]

  Para ativar o recurso de snapshot no player web, defina crossOrigin como anonymous para permitir solicitações cross-origin anônimas. Código de exemplo:

    extraInfo:{
      crossOrigin:"anonymous"
    }

Definir tamanho e qualidade do snapshot

// Set the snapshot width to 300, height to 200, and quality to 0.9.
// The snapshot height and width are displayed in pixels. You can set the snapshot quality to a value ranging from 0 to 1. The default value is 1.
player.setSanpshotProperties(300,200,0.9)

Assinar o evento snapshoted

player.on("snapshoted", function(data) {
     console.log(data.paramData.time);
     console.log(data.paramData.base64);
     console.log(data.paramData.binary);
 });

Marca d'água no snapshot

snapshotWatermark:{
    left:"100",
    top:"100",
    text:"test",
    font:"italic bold 48px SimSun",
    strokeColor:"red",
    fillColor:'green'
  }

const player = new Aliplayer({
  id: "player-con",
  disableSeek: true,
  source: "https://player.alicdn.com/video/aliyunmedia.mp4",
}, function (player) {
    console.log("The player is created");
  }
);

Recursos para vídeos longos

Streaming adaptativo de bitrate para fluxos HLS

Para ativar o streaming multi-bitrate, defina o parâmetro source com a URL de uma master playlist e o parâmetro isVBR como true. Esse recurso permite que o player alterne automaticamente entre os níveis de qualidade de vídeo conforme as condições da rede. Os usuários também podem trocar a qualidade manualmente.

Obter a URL de reprodução

Obtenha a URL de reprodução de um vídeo com múltiplos bitrates através de: player._hls.levels[player._hls.currentLevel].

varplayer = newAliplayer({
 "id":"player-con",
 "source":"Multi-bitrate playback URL",
 "isVBR":true,
 },
 function () { } 
);

O menu de configurações do player exibe uma opção Quality, como Auto(360), que os usuários podem clicar para alternar a qualidade do vídeo.

Configurar legendas externas

// Switch the subtitle language.
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // The API does not update the UI by default. You must call this method manually if needed.
// Enable subtitles.
var result = player._ccService.open();
player._ccService.updateUI(result.language);
// Disable subtitles.
player._ccService.close();
player._ccService.updateUI();

  .prism-cue > div:first-child,
  video::cue {
    font-size: 14px !important;
    color: #000 !important;
    background-color: rgba(255, 255, 255, .8) !important; /* Native subtitle rendering in iOS does not support the background color. */
  }

Múltiplas faixas de áudio

O ApsaraVideo Player SDK for Web não exige configurações manuais. A figura abaixo ilustra a configuração da faixa de áudio.

Múltiplos idiomas

Por padrão, o ApsaraVideo Player SDK for Web suporta chinês e inglês, alternando automaticamente entre eles conforme as configurações de idioma do navegador. Também é possível especificar idiomas personalizados. O SDK permite reproduzir vídeos em várias regiões onde o ApsaraVideo VOD está disponível, incluindo Sudeste Asiático e Europa, usando IDs de vídeo e credenciais de reprodução.

Notas de uso sobre o atributo language

var player = new Aliplayer({
    id: "player-con",
    source: "",
    width: "100%",
    height: "500px",
    autoplay: true,
    language: "en-us",
  }, function (player) {
    console.log("The player is created.");
  });

Crie um player com elementos de UI em inglês

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "en-us" // zh-cn indicates Chinese. en-us indicates English. 
 },
 function (player) {}
);

Especifique um idioma personalizado para o player

Quando for necessário suportar idiomas além de chinês e inglês, utilize o recurso de idioma personalizado. Especifique os recursos de idioma por meio do atributo languageTexts. O atributo languageTexts é um objeto literal onde a chave corresponde ao valor do atributo language e o valor JSON contém o conteúdo traduzido para o idioma especificado. O código abaixo fornece um exemplo:

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "CustomLanguage",// Specify a language in the STRING type.
"languageTexts":{
    "CustomLanguage":{
        "Pause":"Pause"
        // Other parameters. For more information, visit https://player.alicdn.com/lang.json? spm=a2c4g.11186623.0.0.5a746515vnwUSi&file=lang.json
            }
        }
    },
    function (player) {} 
);

Reproduzir recursos de vídeo armazenados em múltiplas regiões

O ApsaraVideo Player SDK for Web permite reproduzir vídeos armazenados nas regiões China (Shanghai), Alemanha (Frankfurt) e Singapura. A reprodução pode ser feita via IDs de vídeo e credenciais de reprodução ou através do Security Token Service (STS). O player analisa as informações da região e obtém a URL de reprodução do vídeo na região correspondente.

• Reprodução baseada em IDs de vídeo e credenciais: O player extrai as informações de região da credencial de reprodução para obter a URL do vídeo. Nesse caso, não é necessário especificar a região nas configurações.

• Reprodução baseada em STS: Use a propriedade region para especificar a região do vídeo. O valor padrão é 'cn-shanghai'. Outros valores válidos incluem eu-central-1 e ap-southeast-1. Exemplo:

  var player = new Aliplayer({
      id: "player-con",
      width: "100%",
      height: "500px",
      autoplay: true,
      language: "en-us",
      vid : '1e067a2831b641db90d570b6480f****',
      accessKeyId: '',// The AccessKey ID that is generated when the temporary STS token is issued. 
      securityToken: '',// The temporary STS token. To generate an STS token, call the AssumeRole operation. 
      accessKeySecret: ''// The AccessKey ID that is generated when the temporary STS token is issued. 
      region:'eu-central-1',// The Germany (Frankfurt) region.
    }, function (player) {
      console.log("The player is created.");
    });

Reproduzir vídeos H.265 e H.266

Notas de uso

• O ApsaraVideo Player SDK for Web V2.14.0 ou posterior suporta reprodução de vídeos H.265, e a versão V2.20.2 ou posterior suporta vídeos H.266. Para reproduzir vídeos H.265, solicite uma licença e adquira o serviço de valor agregado Playback of H.265 Videos on Web. Para mais informações, consulte Gerencie licenças.

• Para mais detalhes sobre os formatos de arquivos de áudio e vídeo H.265 e H.266 compatíveis com o ApsaraVideo Player SDK for Web, consulte Protocolos suportados.

• Antes de reproduzir vídeos H.265 e H.266, observe os requisitos descritos na tabela a seguir.

  Item	Descrição
  Requisitos de ambiente	O player envia solicitações AJAX range para acessar os recursos de vídeo. Seu navegador deve atender aos seguintes requisitos: Suportar solicitações HTTP range. Para mais informações, consulte HTTP range requests. Suportar o método OPTIONS. Antes de enviar uma solicitação AJAX com cabeçalho range, navegadores como o Firefox enviam primeiramente uma solicitação HTTP OPTIONS.
  Compatibilidade	H.265 Dispositivos com iOS 11 ou posterior suportam reprodução de vídeos H.265. Alguns navegadores em dispositivos Android, como o navegador nativo, WeChat, UC Browser e QQ Browser, suportam decodificação de hardware para vídeos H.265. O suporte à decodificação de software para vídeos H.265 em navegadores como Chrome, Microsoft Edge e Firefox depende da compatibilidade com a API WebAssembly. Para mais informações, visite WebAssembly. Se utilizar Chrome ou Chromium, atualize para a versão V74 ou superior. O WebAssembly não funciona corretamente em versões anteriores à V74. H.266 Nenhum navegador suporta nativamente a reprodução de vídeos H.266. Portanto, a decodificação de software é necessária. O suporte depende da compatibilidade do navegador com a API WebAssembly. Para mais informações, visite WebAssembly. Se utilizar Chrome ou Chromium, atualize para a versão V74 ou superior. O WebAssembly não funciona corretamente em versões anteriores à V74. Dispositivos com iOS 16.4 ou anterior e a maioria dos dispositivos Android de médio e baixo custo não suportam decodificação de software para vídeos H.266.
  Desempenho da decodificação de software	H.265 Em navegadores de PC, é possível reproduzir vídeos com resolução de até 2K em processos multithread e vídeos de até 1080p em processos single-thread. A taxa de quadros não pode exceder 30 frames por segundo (FPS). Em navegadores móveis, é possível reproduzir vídeos com resolução de até 720p em processos single-thread. A taxa de quadros não pode exceder 30 FPS. O desempenho da decodificação de software varia conforme o chip do dispositivo. Os chips listados abaixo suportam decodificação de software single-thread para vídeos em 720p a 30 FPS. Snapdragon 855 ou posterior Kirin 820 ou posterior Tianjic 800 ou posterior H.266 Em navegadores de PC, é possível reproduzir vídeos com resolução de até 1080p em processos multithread e vídeos de até 720p em processos single-thread. A taxa de quadros não pode exceder 30 FPS. Em navegadores móveis, é possível reproduzir vídeos com resolução de até 720p em processos single-thread. A taxa de quadros não pode exceder 30 FPS. O desempenho da decodificação de software varia conforme o chip do dispositivo. Os chips listados abaixo suportam decodificação de software single-thread para vídeos em 720p a 30 FPS. Snapdragon 855 ou posterior Kirin 820 ou posterior

Integrar o ApsaraVideo Player SDK for Web

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h265/test_480p_mp4_h265.mp4",
  enableH265: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h266/test_480p_mp4_h266.mp4",
  enableH266: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

{
  //... Configure other parameters.
  source: JSON.stringify({
      FD: '//h265_fd.mp4',
      HD: '//h265_hd.mp4'
    }),
}

Selecione um método de decodificação

Usar protocolo degradado para reprodução

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // If the API is not supported or a decoding error occurs, display a message or implement a fallback.
    }
});
player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps - The current number of frames decoded per second by the software decoder.
    // data.fps - The current frame rate of the video.
    // data.playbackRate - The current playback speed.
    // This event is triggered if decodedFps < (fps * playbackRate) persists for more than 5 seconds.
    // At this point, playback may stutter, and you should consider notifying the user or implementing a fallback.
});
                            

  var player;
  // Create a player
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    player.on('h265DecoderOverload', () => {
      // We recommend implementing the fallback after this event is triggered twice, as a single trigger may be due to a temporary decoding fluctuation.
      fallbackTo264(_options)
    })
    return player;
  }
  // Fallback function
  function fallbackTo264(_options) {
      // Set the source to the H.264 fallback video URL.
      _options.source = '//h264.mp4';
      // Disable enableH265 to skip codec detection.
      _options.enableH265 = false;
      createPlayer(_options);
  }
  // Initialize the player
  var options = {
    id: "player-con",
    source: "//h265.mp4",
    enableH265: true
  }
  createPlayer(options)

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // Notify the user or use a degraded protocol for playback if the API operation is not supported in your browser or video decoding failed.
    }
});          

  var player;
  // Create a player
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    return player;
  }
  // Fallback function
  function fallbackTo264(_options) {
      // Set the source to the H.264 fallback video URL.
      _options.source = '//h264.mp4';
      // Disable enableH266 to skip codec detection.
      _options.enableH266 = false;
      createPlayer(_options);
  }
  // Initialize the player
  var options = {
    id: "player-con",
    source: "//h266.mp4",
    enableH266: true
  }
  createPlayer(options)

API

Para mais informações sobre atributos, métodos e eventos suportados pelo ApsaraVideo Player SDK for Web, incluindo descrições e exemplos, consulte Operações de API. A seção a seguir descreve os atributos, métodos e eventos específicos para vídeos H.265 e H.266:

• Atributos suportados

  source, autoplay, rePlay, preload, cover, width, height, skinLayout, waitingTimeout, vodRetry, keyShortCuts e keyFastForwardStep

• Métodos suportados

  play, pause, replay, seek, dispose, getCurrentTime, getDuration, getVolume, setVolume, loadByUrl, setPlayerSize, setSpeed, setSanpshotProperties, fullscreenService, getStatus, setRotate, getRotate, setImage, setCover, setProgressMarkers, setPreviewTime, getPreviewTime e isPreview

• Eventos suportados

  ready, play, pause, canplay, playing, ended, hideBar, showBar, waiting, timeupdate, snapshoted, requestFullScreen, cancelFullScreen, error, startSeek, completeSeek, h265PlayInfo e h266PlayInfo

  Nota

  Os callbacks h265PlayInfo e h266PlayInfo retornam o método de reprodução utilizado para o vídeo H.265 ou H.266. renderType indica o método de reprodução, simd indica processamento SIMD e wasmThreads indica processamento multithread.

Códigos de erro

A tabela a seguir descreve os códigos de erro que podem ser retornados em falhas de reprodução H.265 e H.266. Para mais informações sobre outros códigos de erro, consulte Operações de API.

Ative processamento multithread

Exemplo

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

> self.crossOriginIsolated
< true
> SharedArrayBuffer
< ƒ SharedArrayBuffer() { [native code] }

[TEST LOG] [H265PlayInfo]
{
  codecTag: "hvc1",
  renderType: "wasm",
  simd: true,
  simdOption: true,
  wasmThreads: true,
  wasmThreadsOption: true
}

Time shifting

• Ative time shifting

  • Ative o recurso de time shifting no ApsaraVideo Live. Para mais informações, consulte Time shifting.

  • A tabela a seguir descreve os atributos necessários para ativar o time shifting no player.

    Atributo	Descrição
    isLive	Defina o valor como true.
    liveTimeShiftUrl	URL utilizada para consultar as informações de time shifting.
    liveStartTime	Hora de início da transmissão ao vivo.
    liveOverTime	Hora de término da transmissão ao vivo.
    liveShiftSource	URL HLS para time shifting. Nota Este atributo é necessário apenas para fluxos ao vivo FLV.
    liveShiftMinOffset	A geração de segmentos TS durante o time shifting requer um período específico. Se buscar uma posição muito próxima do tempo atual da transmissão ao vivo, a geração de segmentos TS falhará e um erro 404 será reportado. Defina um intervalo mínimo entre a posição de busca e o tempo atual da transmissão. Este parâmetro define esse intervalo em segundos. Valor padrão: 30. Um segmento é gerado a cada 10 segundos, garantindo a existência de pelo menos três segmentos.

• UI de time shifting

  A UI de time shifting consiste principalmente em uma barra de progresso, que exibe o tempo na área compatível com o recurso.

  Nota

  A área de tempo exibe, da esquerda para a direita, o tempo de reprodução atual, a hora de término da transmissão ao vivo e a hora atual da transmissão.

• Alterar a hora de término da transmissão ao vivo

  Durante a reprodução, chame o método liveShiftService.setLiveTimeRange para ajustar os horários de início e fim da transmissão ao vivo. A UI será atualizada automaticamente. Exemplo:

  player.liveShiftSerivce.setLiveTimeRange(""'2018/01/04 20:00:00')

• FLV para transmissão ao vivo e HLS para time shifting

  Para reduzir a latência, recomenda-se usar FLV para transmissão ao vivo e HLS para time shifting.

  Configurações do ApsaraVideo Player SDK for Web:

  • source: URL do fluxo ao vivo no formato FLV.

  • liveShiftSource: URL do fluxo de time shifting no formato HLS.

  Código de exemplo:

  {
   source:'http://localhost/live****/example.flv',
   liveShiftSource:'http://localhost/live****/example.m3u8',
  }

Reprodução com múltiplas definições

Para o método de reprodução via URL, é possível alcançar a reprodução com múltiplas definições configurando os endereços de vários fluxos de diferentes qualidades. Esse recurso pode ser combinado com a funcionalidade de Reprodução com múltiplas definições, permitindo adaptação automática de bitrate.

• O parâmetro source para reprodução via URL especifica os endereços dos fluxos de múltiplas definições usando uma estrutura JSON. Exemplo:

  source:'{"HD":"http://common.qupai.me/player/qupai.mp4","SD":"http://common.qupai.me/player/qupai.mp4"}'

• Valores de texto correspondentes às chaves. Exemplo:

     "OD": "原画"
     "FD": "流畅"
     "LD"："标清"
     "SD": "高清"
     "HD": "超清"
     "2K": "2K"
     "4K": "4K"

  Nota

  Se o valor da chave não estiver nesta lista predefinida, o próprio valor da chave será usado como texto e exibido diretamente na UI.

Personalizar a implantação

Por padrão, os recursos do ApsaraVideo VOD, como arquivos JavaScript e CSS, são armazenados no Alibaba Cloud CDN. Para implantar esses recursos em seu próprio servidor, siga as etapas abaixo:

1. Baixe os recursos do ApsaraVideo Player SDK.

   Além dos dois arquivos principais, aliplayer-min.js e aliplayer-min.css, o ApsaraVideo Player SDK for Web referencia dinamicamente outros arquivos de recursos. Portanto, obtenha primeiro a pasta completa de recursos.

   Link para download: apsara-media-box-imp-web-player-dist.tar.gz

2. Descompacte o pacote e implante os arquivos.

   Extraia o pacote de recursos e implante todos os arquivos da pasta em seu servidor. Mantenha a estrutura de diretórios original dos arquivos.

3. Inicialize o player com um caminho personalizado.

   O código de exemplo abaixo mostra as URLs dos arquivos CSS e JavaScript para uma implantação personalizada:

   https://player.alicdn.com/assets/skins/default/aliplayer-min.css
   https://player.alicdn.com/assets/aliplayer-min.js

   Siga as etapas abaixo para inicializar o player:

   1. Referencie as URLs dos arquivos CSS e JavaScript na parte superior da página.

      <head>
        <link rel="stylesheet" href="https://player.alicdn.com/assets/skins/default/aliplayer-min.css" />
        <script charset="utf-8" type="text/javascript" src="https://player.alicdn.com/assets/aliplayer-min.js"></script>
      </head>

   2. Inicialize o player e especifique o parâmetro assetPrefix.

      O parâmetro assetPrefix define o prefixo para o endereço de implantação personalizada. Se o player reproduzir um vídeo HLS, ele referenciará dinamicamente o arquivo https://player.alicdn.com/assets/hls/aliplayer-hls2-min.js. Certifique-se de que o arquivo esteja no endereço correto.

      new Aliplayer({
        assetPrefix: 'https://player.alicdn.com/assets'
        // Specify other parameters.
      })

Referências

• Componentes

• Operações de API

• FAQ sobre o ApsaraVideo Player SDK for Web

• Personalizar componentes

• Personalizar a interface de erro para o player HTML5

• Tratar erros e retomar transmissões ao vivo