Todos os produtos
Search
Central de documentação

ApsaraVideo VOD:Recursos básicos

Última atualização: Oct 20, 2026

Ao usar o ApsaraVideo Player SDK for Web, as configurações de recursos comuns podem variar conforme o player, o método de reprodução ou o ambiente do navegador. Este tópico descreve como configure os recursos básicos do ApsaraVideo Player SDK for Web.

Configurações comuns

Para reproduzir vídeos Flash Video (FLV) e HTTP Live Streaming (HLS) com o player web, configure o compartilhamento de recursos de origem cruzada (CORS). Para mais informações, consulte Configurar acesso de origem cruzada.

  • Se você não configurar o CORS ao usar o player web, a seguinte mensagem de erro será exibida durante a reprodução:

    No 'Access-Control-Allow-Origin' header is present on the requested resource.

Nota

Após o início da reprodução em tela cheia, configure a entrada para definir o posicionamento absoluto e ative o teclado virtual.

Métodos de chamada

Os recursos básicos do ApsaraVideo Player SDK for Web são ativados por meio de atributos ou métodos.

Nota

Para mais informações, consulte Referência da API do Aliplayer.

O código de exemplo a seguir demonstra como chamar os métodos:

Chame o método abaixo no callback da função usada para crie um player. Código de exemplo:

var player = new Aliplayer({},function(player) {
    player.setSpeed(2);
 });

Gerencie a reprodução de mídia

O ApsaraVideo Player SDK for Web permite reproduzir vídeos a partir de um ponto específico e pausar a reprodução.

Reproduzir um vídeo a partir de um ponto específico

Use o método seek para iniciar a reprodução de um vídeo em um momento determinado. Código de exemplo:

// time specifies the specified point in time. Unit: seconds. 
player.seek(time)

Pausar a reprodução

Use o método pause para interromper temporariamente a reprodução. Código de exemplo:

player.pause()
Nota

Para exibir o botão grande de reprodução, defina este parâmetro como true. Exemplo: player.pause(true).

Destruir o player

Use o método dispose para destruir uma instância do player. Código de exemplo:

player.dispose()

Defina o modo de exibição

Nota
  • Navegadores de PC e iOS suportam as configurações de exibição.

  • Chrome e Firefox para Android também oferecem suporte a essas configurações.

  • O WeChat e a maioria dos demais navegadores usam o player nativo para reprodução; portanto, as configurações de exibição não são suportadas.

Defina o ângulo de rotação

Use a operação setRotate para girar a imagem conforme o ângulo especificado. Também é possível consultar o ângulo de rotação atual. Código de exemplo:

// Specify the rotation angle. A positive value of Angle specifies a clockwise rotation. A negative value of Angle specifies an anticlockwise rotation. For example, player.setRotate(180) specifies a clockwise rotation of 180 degrees. 
player.setRotate(<Angle>)
// Obtain the rotation angle. 
player.getRotate()

Defina o modo de espelhamento

Chame setImage para configure o modo de espelhamento. Os modos suportados são espelhamento horizontal e vertical. Código de exemplo:

// Horizontal mirroring.
player.setImage('horizon')
// Vertical mirroring.
player.setImage('vertical')

O ApsaraVideo Player SDK for Web fornece os atributos videoHeight e videoWidth para defina a altura e a largura do vídeo. Geralmente, as dimensões do vídeo são menores que as do contêiner para evitar que ele transborde do contêiner pai durante operações de rotação e espelhamento. Código de exemplo:

 width: '100', // The width of the container.
 height: '100%', // The height of the container.
 videoHeight:"200px", // The height of the video.

Obter informações de reprodução

Com o ApsaraVideo Player SDK for Web, é possível obter o progresso atual e a duração total da reprodução.

Obter o progresso da reprodução

Use getCurrentTime para obter o progresso atual da reprodução. Código de exemplo:

// The returned time is measured in seconds. 
player.getCurrentTime()

Obter a duração da reprodução

Consulte a duração total de um vídeo apenas após o carregamento. Por exemplo, faça essa consulta depois que o evento de reprodução for disparado. Chame getDuration para obter a duração total. A obtenção desse valor só é possível quando o vídeo já estiver carregado ou após o início da reprodução. Código de exemplo:

player.getDuration()

Obter o status de reprodução

Chame getStatus para verificar o status da reprodução. Valores de retorno:

  • init: Inicializando.

  • ready: Pronto.

  • loading: Carregando.

  • play: Reproduzindo.

  • pause: Pausado.

  • playing: Em reprodução.

  • waiting: Bufferizando.

  • error: Erro.

  • ended: Finalizado.

Código de exemplo:

player.getStatus()

Defina o volume

Ajuste o volume ou silencie o vídeo conforme necessário.

Nota

Como a propriedade video.volume é somente leitura no iOS e em alguns sistemas Android, os métodos getVolume e setVolume fornecidos pelo ApsaraVideo Player SDK for Web não funcionam nessas plataformas.

Ajustar o volume

Use a operação setVolume para modificar o nível de áudio. Também é possível obter o volume atual. Código de exemplo:

// Set the volume to a real number from 0 to 1. 
player.setVolume(0)
// Obtain the current volume. 
player.getVolume()

Configure o modo mudo

Use o método mute para silenciar o vídeo durante a reprodução. Código de exemplo:

// Mute the video.
player.mute();
// Unmute the video.
player.unMute();

Defina a velocidade de reprodução

Se estiver usando a interface de usuário (UI) padrão do ApsaraVideo Player SDK for Web, use o recurso integrado de velocidade para ajustá-la enquanto assiste ao vídeo. Para interfaces personalizadas, chame a operação setSpeed para alterar a velocidade de reprodução.

Nota

Para saber como desativar as configurações de velocidade de reprodução, consulte a seção setSpeed no tópico Referência da API do Aliplayer.

Código de exemplo:

// Specify the playback speed. The following sample code provides an example on how to set the playback speed to twice the current speed. 
player.setSpeed(2)

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

Configure as URLs de streams em várias definições para habilitar a reprodução com múltiplas qualidades.

  • Na reprodução via VID e PlayAuth, nenhuma configuração adicional é necessária. O ApsaraVideo Player SDK for Web obtém a lista de definições diretamente do ApsaraVideo VOD. Clique em Settings na página de reprodução para visualize a lista de definições.

    Nota

    Ao usar VID e PlayAuth, especifique o atributo format para determinar se o player HTML5 deve reproduzir arquivos de mídia no formato MP4 ou MP3. Por padrão, arquivos MP4 são reproduzidos.

  • Para reprodução baseada em URL, configure os pares chave-valor no atributo source para indicar as URLs dos streams nas diferentes definições. Esses pares devem estar no formato JSON. Após aplicar as configurações, clique em Settings na página de reprodução para ver a lista de definições.

Nota

Para alterar a forma como a lista de definições é exibida, use o componente de definição. Para mais informações e códigos de exemplo, consulte Funções.

No modo de reprodução baseado em URL, os seguintes pares chave-valor são suportados no atributo source:

   "OD": "<Original quality URL>"
   "FD": "<Low definition URL>"
   "LD":"<Standard definition URL>"
   "SD": "<High definition URL>"
   "HD": "<Ultra-high definition URL>"
   "2K": "<2K URL>"
   "4K": "<4K URL>"

O exemplo abaixo mostra como configure as definições no modo de reprodução baseado em URL:

// The following example shows how to configure the high definition and ultra-high definition URLs. 
source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'

O ApsaraVideo Player SDK for Web também permite usar o atributo qualitySort para listar as definições em ordem crescente ou decrescente.

  • O valor desc indica ordem decrescente, da maior para a menor definição.

  • O valor asc indica ordem crescente, da menor para a maior definição.

Nota
  • O player memoriza a definição escolhida. Na próxima reprodução, a última definição selecionada será usada automaticamente. Caso nenhuma definição tenha sido especificada anteriormente, uma definição baixa será usada.

  • Se houver falha na reprodução na definição selecionada, o player mudará automaticamente para a próxima definição inferior e exibirá uma mensagem. Apenas o player HTML5 suporta a troca automática de definição.

Ative reprodução em loop

Para habilitar a reprodução em loop no ApsaraVideo Player SDK for Web, defina o atributo rePlay ou escute o evento ended.

Código de exemplo para defina o atributo rePlay

rePlay:true

Código de exemplo para escutar o evento ended

player.on('ended',function(){
   player.replay()
})

Operações por gestos em dispositivos móveis

O Player SDK for Web foi otimizado para telas pequenas de dispositivos móveis, facilitando o arraste da barra de progresso. Dois recursos exclusivos estão disponíveis: segurar para acelerar e toque duplo para avançar ou retroceder rapidamente.

Segurar para acelerar

Por padrão, o recurso de segurar para acelerar vem ativado em dispositivos móveis. Ao tocar e segurar qualquer área do player (exceto a barra de progresso) por mais de 0,5 segundos, o vídeo é reproduzido em velocidade acelerada. Ao soltar, a reprodução retorna à velocidade original.

Desative esse recurso configurando o parâmetro longPressFastForward: false. Para mais detalhes, consulte Referência da API do Aliplayer.

Toque duplo para avançar ou retroceder

O recurso de toque duplo para avançar ou retroceder está ativado por padrão em dispositivos móveis. Um toque duplo no terço esquerdo do player faz o vídeo retroceder 10 segundos. Já um toque duplo no terço direito avança o vídeo em 10 segundos.

Para desativar essa funcionalidade, configure o parâmetro dbClickSkip: false. Para mais informações, veja Referência da API do Aliplayer.

Referências