Official Web Player SDK components - ApsaraVideo VOD - ApsaraVideo VOD: Central de Documentação do Alibaba Cloud

O ApsaraVideo Player SDK oferece componentes integrados para anúncios, legendas, listas de reprodução e outros cenários comuns. Use-os como estão ou personalize-os.

Visão geral

O código-fonte está disponível no GitHub.
Teste os componentes na aba Functions.
Alguns recursos não funcionam em navegadores móveis nativos.
O GitHub é um site de terceiros. Podem ocorrer problemas de conexão.

Lista de componentes

Nome do componente	Tipo	Descrição	Efeito
Comentários em tempo real	`AliplayerDanmuComponent`	Adiciona uma caixa de entrada de texto e botões na barra de controle para ativar, desativar e enviar comentários ao vivo. Componente Danmu.
Marca d'água animada (componente Marquee)	`BulletScreenComponent`	Insere uma marca d'água de texto em movimento (como um ID de usuário) para desencorajar cópias não autorizadas. Permite personalizar posição, cor e tamanho da fonte. A nova versão do player possui uma função integrada de marca d'água dinâmica que substitui o ticker, sendo mais abrangente e fácil de usar. Para obter detalhes, consulte os atributos `watermark` na Aliplayer API Reference.
Legenda	`CaptionComponent`	Alterna legendas entre idiomas. Componente de legenda.
Bloco de anúncios em vídeo	`ManyVideoADComponent`	Reproduz uma sequência de anúncios em vídeo antes do conteúdo principal. Componente de bloco de anúncios em vídeo.
Retomar reprodução	`MemoryPlayComponent`	Salva automaticamente a última posição de reprodução. Dois modos disponíveis: Clique em para reproduzir: exibe a última posição ao iniciar, com opção para buscar o ponto exato. Reprodução automática: busca diretamente a última posição salva ao iniciar a reprodução. Componente de retomar reprodução. Nota Requer suporte a localStorage no navegador.
Anúncio de pausa (imagem)	`PauseADComponent`	Exibe uma sobreposição de anúncio em imagem no centro do player quando pausado. Componente de anúncio de pausa.
Lista de reprodução de vídeo	`PlaylistComponent`	Adiciona um botão de lista de reprodução à barra de controle para alternar entre vídeos. Componente de lista de reprodução de vídeo.
Pré-visualização	`PreviewVodComponent`	Limita a reprodução a uma duração de prévia e depois solicita acesso completo (por exemplo, assinatura ou compra). Componente de pré-visualização.
Marcador de progresso	`ProgressComponent`	Insere marcadores na barra de progresso para pontos importantes. Ao passar o mouse sobre um marcador, uma miniatura de prévia é exibida. Componente de marcador de progresso.
Definição	`QualityComponent`	Alterna as definições de vídeo (resolução). Componente de definição.
Velocidade de reprodução	`RateComponent`	Ajusta a velocidade de reprodução do vídeo. Componente de velocidade de reprodução
Rotação e espelhamento	`RotateMirrorComponent`	Adiciona botões de rotação e espelhamento à barra de controle. Componente de rotação e espelhamento.
Anúncio inicial (imagem)	`StartADComponent`	Exibe um anúncio em imagem antes do início da reprodução do vídeo. Componente de anúncio inicial.
Alternância de faixa de áudio	`TrackComponent`	Alterna faixas de áudio entre idiomas. Componente de alternância de faixa de áudio.	-
Anúncio em vídeo	`VideoADComponent`	Reproduz um anúncio em vídeo com tempo limitado antes do conteúdo principal. Componente de anúncio em vídeo.
Reproduzir próximo	PlayerNextComponent	Adiciona um botão Play Next à barra de controle. O evento de clique em pode ser personalizado e passado como parâmetro. Componente de reproduzir próximo.

Usar componentes

Adicione os componentes ao Web Player SDK. Atualmente, não há URL de CDN disponível. Baixe o pacote de componentes e inclua-o em seu projeto. Use sempre a versão mais recente.
```
<script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>
```

Monte os componentes no Web Player SDK.

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//player.alicdn.com/video/editor.mp4",
    components: [
      {
        name: "StartADComponent",
        type: AliPlayerComponent.StartADComponent,
        args: [
          "https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg",
          "https://promotion.aliyun.com/ntms/act/videoai.html",
          3,
        ],
      },
      {
        name: "BulletScreenComponent",
        type: AliPlayerComponent.BulletScreenComponent,
        args: [
          "Welcome to use Aliplayer",
          { fontSize: "16px", color: "#00c1de" },
          "random",
        ],
      },
    ],
  },
  function (player) {}
);

Propriedades dos componentes:

Propriedade	Descrição
name	Nome exclusivo do componente, usado para recuperar sua instância.
type	Classe do componente.
args	Argumentos do construtor. Devem corresponder aos parâmetros obrigatórios.

Crie uma compilação personalizada

Todos os componentes

Compila todos os componentes. Saída: /dist/aliplayer-components/aliplayercomponents-[version].min.js

$ npm run build

Conjunto personalizado de componentes

Para reduzir o tamanho do pacote, compile apenas componentes específicos:

$ npm run build componentsName # componentsName is the component name

componentsName é uma lista separada por espaços. Exemplo:

$ npm run build AliplayerDanmu BulletScreen # Package the AliplayerDanmu and BulletScreen components.