ApsaraVideo Player for Web demos and source code - ApsaraVideo VOD: Central de Documentação do Alibaba Cloud

Este tópico descreve como solicitar o teste online do ApsaraVideo Player SDK for Web e obter o código-fonte da demo.

Demo para navegadores desktop

O ApsaraVideo Player SDK for Web oferece um teste online visual. Acesse a página Online Settings para experimentar o recurso. Configure as funcionalidades básicas de reprodução e defina a interface do usuário (UI). Após concluir as configurações, o código do player HTML5 será gerado automaticamente.

Nota

A URL de streaming deve estar no formato Flash Video (FLV), e não no formato Real-Time Messaging Protocol (RTMP).

A aba Basic Settings inclui as seguintes opções: Video Type (VOD/live), Playback Method (Play by URL), Playback URL, Cover URL, Width (padrão: 100%) e Height (padrão: 500px), além de alternadores para recursos como autoplay, inline playback, preload e loop playback. As demais abas são More Settings, Skin Customization, Playback Preview e Code.

Demo para dispositivos móveis

Para obter a demo para navegadores móveis, escaneie o QR code abaixo com o aplicativo DingTalk em seu dispositivo.

Importante

Em dispositivos Android, os navegadores internos do WeChat e QQ podem modificar as configurações do ApsaraVideo Player SDK sem sua autorização ou conhecimento. Nesse caso, alguns recursos do ApsaraVideo Player SDK ficam indisponíveis.

二维码

Código-fonte dos recursos

O ApsaraVideo Player SDK for Web disponibiliza uma vitrine online que exibe os recursos e suas implementações em código. Para consultar a lista detalhada de funcionalidades e exemplos de código, acesse a Feature Showcase. A página Aliplayer Feature Showcase possui três abas de navegação: Basic Functions (como capa, reprodução atrasada, capturas de tela, reprodução em loop e vídeo 4K), Components and Plugins (como anúncios de imagem, letreiro, retomada de reprodução, Danmu, controle de velocidade de reprodução e componentes de legenda) e Advanced Functions (como legendas, múltiplas faixas de áudio, múltiplas fontes, HLS adaptativo, internacionalização e skins personalizadas). Ao selecionar o recurso cover, o painel esquerdo mostra uma pré-visualização do player com uma imagem de capa, enquanto o painel direito exibe o código de inicialização HTML correspondente. Esse código inclui parâmetros como source, width, height, cover, autoplay, preload e isLive. Clique em Copy para copiar o código.

Código-fonte da demo para Vue

O ApsaraVideo Player SDK for Web fornece o código-fonte da demo para integração do SDK com o framework Vue.

Para mais informações sobre a demo, consulte Demo of Vue-based ApsaraVideo Player.

Código-fonte da demo React

O ApsaraVideo Player SDK for Web fornece o código-fonte da demo para integração do SDK com o framework React.

Para mais informações sobre a demo, consulte Demo of React-based ApsaraVideo Player.

Mini programas WeChat

Mini programas WeChat não possuem API DOM nem API BOM. Por isso, bibliotecas comuns no desenvolvimento frontend, como jQuery e Zepto, não carregam nesse ambiente. Da mesma forma, o ApsaraVideo Player SDK for Web depende do suporte de navegadores e não executa em mini programas WeChat. Portanto, utilize o componente de vídeo padrão fornecido pelo mini programa WeChat para reproduzir vídeos. Para mais detalhes, visite vod-mini-program.

uni-app

Integre o player ao uni-app com o código abaixo. Como o player web depende de APIs do navegador, ele não suporta compilação para aplicativos nativos ou mini programas.

Expand to view code

<template>
    <view class="content">
        <view id="player"></view>
    </view>
</template>
<script>
 import Aliplayer from 'aliyun-aliplayer';
 import "aliyun-aliplayer/build/skins/default/aliplayer-min.css";
 export default {
      data() {
         return {}
      },
      mounted() {
         this.player = this.createPlayer();
      },
      methods: {
        createPlayer: () => {
          return new Aliplayer({
               id: 'player',
               source: 'https://player.alicdn.com/video/aliyunmedia.mp4',
               width: '800px',
               autoSize: true,
          });
      },
         // To import components, first load await loadComponent() before initializing the player
     loadComponent() {
          return new Promise((resolve, reject) => {
               const s_tag = document.createElement('script');
               s_tag.type = 'text/javascript';
               // Download the component JS file first and place it in the project's /static/ directory
              // Download address: https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.1.2.min.js
               s_tag.src = './static/aliplayercomponents-1.1.2.min.js';
               s_tag.charset = 'utf-8';
               s_tag.onload = () => {
                   resolve();
               }
                document.body.appendChild(s_tag);
          });
        }
     }
}
</script>
<style>
 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
</style>