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 configurar os recursos básicos do ApsaraVideo Player SDK for Web.
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 configurar 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 Configure cross-origin access.
-
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.
Após o início da reprodução em tela cheia, configure a entrada para definir o posicionamento absoluto e ativar 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.
Para mais informações, consulte Aliplayer API Reference.
O código de exemplo a seguir demonstra como chamar métodos:
Chame o método abaixo no callback da função usada para criar um player. Código de exemplo:
var player = new Aliplayer({},function(player) {
player.setSpeed(2);
});
Gerenciar a reprodução de mídia
O ApsaraVideo Player SDK for Web permite reproduzir vídeos a partir de um ponto específico no tempo e pausar a reprodução.
Reproduzir um vídeo a partir de um ponto específico
Chame 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()
Para exibir o botão grande de reprodução, defina este parâmetro como true. Exemplo: player.pause(true).
Destruir o player
Chame o método dispose para destruir uma instância do player. Código de exemplo:
player.dispose()
Especificar o modo de exibição
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.
Especificar o ângulo de rotação
Use a operação setRotate para girar a imagem conforme o ângulo desejado. Também é possível consultar o ângulo 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()
Especificar o modo de espelhamento
Chame setImage para configurar o modo de espelhamento. Modos suportados: 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 especificar a altura e a largura do vídeo. Geralmente, essas dimensões são menores que as do contêiner, evitando que o vídeo ultrapasse os limites do elemento pai durante rotações e espelhamentos. 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
O ApsaraVideo Player SDK for Web permite obter o progresso atual e a duração total da reprodução.
Obter o progresso da reprodução
Use getCurrentTime para recuperar o progresso atual. 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 do conteúdo. Por exemplo, faça essa consulta depois que o evento de reprodução for disparado. Chame getDuration para obter a duração total. O valor só estará disponível quando o vídeo 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 atual. 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()
Especificar o volume
Ajuste o nível de áudio ou silencie o vídeo conforme necessário.
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 alterar o volume. Também é possível obter o nível 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()
Configurar 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();
Especificar a velocidade de reprodução
Se você usa a interface de usuário (UI) padrão do ApsaraVideo Player SDK for Web, aproveite o recurso integrado para ajustar a velocidade enquanto assiste ao vídeo. Para interfaces personalizadas, chame a operação setSpeed para modificar a velocidade de reprodução.
Para saber como desativar as configurações de velocidade, consulte a seção setSpeed no tópico Aliplayer API Reference.
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 URLs de streams em diferentes 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 automaticamente a lista de definições do ApsaraVideo VOD. Clique em Settings na página de reprodução para visualizar a lista disponível.
NotaNesse cenário, use o atributo format para determinar se o player HTML5 deve reproduzir arquivos de mídia em MP4 ou MP3. Por padrão, arquivos MP4 são selecionados.
Para reprodução baseada em URL, configure pares chave-valor no atributo source indicando as URLs dos streams em cada definição. 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.
Para alterar a forma como a lista de definições é exibida, use o componente de definição. Para ver exemplos de código, 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 configurar 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 define a ordem decrescente, da maior para a menor definição.
O valor asc estabelece a ordem crescente, da menor para a maior definição.
O player memoriza a definição escolhida. Na próxima reprodução, ele usará automaticamente a última seleção feita. Caso nenhuma definição tenha sido especificada anteriormente, uma qualidade baixa será utilizada.
Se houver falha na reprodução da definição selecionada, o player mudará automaticamente para a próxima definição inferior e exibirá uma mensagem. Apenas o player HTML5 suporta essa troca automática.
Ativar reprodução em loop
Para habilitar a reprodução em loop no ApsaraVideo Player SDK for Web, especifique o atributo rePlay ou escute o evento ended.
Exemplo de código para especificar o atributo rePlay
rePlay:true
Exemplo de código 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 arrasto 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 aceleração ao segurar está ativo em dispositivos móveis. Ao tocar e manter pressionada qualquer área do player (exceto a barra de progresso) por mais de 0,5 segundo, o vídeo é reproduzido em velocidade acelerada. Ao soltar, a velocidade original é restaurada.
Para desativar essa funcionalidade, configure o parâmetro longPressFastForward: false. Para mais detalhes, consulte Aliplayer API Reference.
Toque duplo para avançar ou retroceder
O recurso de toque duplo vem habilitado por padrão em dispositivos móveis. Um toque duplo no terço esquerdo do player faz o vídeo retroceder 10 segundos. Já no terço direito, o vídeo avança 10 segundos.
Desative esse comportamento configurando o parâmetro dbClickSkip: false. Para mais informações, consulte Aliplayer API Reference.