ApsaraVideo Player for Web demos and source code - ApsaraVideo VOD

Cette rubrique explique comment demander un essai en ligne du SDK ApsaraVideo Player pour le Web et obtenir le code source des démonstrations.

Démonstration pour les navigateurs de bureau

Le SDK ApsaraVideo Player pour le Web propose un essai en ligne via une interface visuelle. Rendez-vous sur la page Online Settings pour tester le service. Vous pouvez configurer les fonctionnalités de lecture de base et personnaliser l'interface utilisateur (UI). Une fois la configuration terminée, le code du lecteur HTML5 est généré automatiquement.

Remarque

L'URL de streaming doit utiliser le format Flash Video (FLV) et non le protocole Real-Time Messaging Protocol (RTMP).

L'onglet Basic Settings comprend les options suivantes : type de vidéo (VOD/live), méthode de lecture (Play by URL), URL de lecture, URL de la couverture, largeur (par défaut : 100 %) et hauteur (par défaut : 500 px), ainsi que des commutateurs pour des fonctionnalités telles que autoplay, inline playback, preload et loop playback. Les autres onglets sont More Settings, Skin Customization, Playback Preview et Code.

Démonstration pour les appareils mobiles

Pour obtenir la démonstration destinée aux navigateurs mobiles, utilisez l'application DingTalk sur votre appareil mobile afin de scanner le code QR ci-dessous.

Important

Sur les appareils Android, les navigateurs internes de WeChat et QQ peuvent modifier les paramètres du SDK ApsaraVideo Player sans votre autorisation ni votre connaissance. Dans ce cas, certaines fonctionnalités du SDK ApsaraVideo Player ne sont pas disponibles.

二维码

Code source des fonctionnalités

Le SDK ApsaraVideo Player pour le Web offre une présentation en ligne des fonctionnalités, affichant celles-ci alongside leurs implémentations de code. Pour une liste détaillée des fonctionnalités et des exemples de code, consultez la page Feature Showcase. La page Aliplayer Feature Showcase comporte trois onglets de navigation : Basic Functions (tels que la couverture, la lecture différée, les captures d'écran, la lecture en boucle et la vidéo 4K), Components and Plugins (tels que les publicités image, le filigrane dynamique, la reprise de lecture, les Danmu, le contrôle de la vitesse de lecture et les composants de sous-titres) et Advanced Functions (tels que les sous-titres, les pistes audio multiples, les sources multiples, le HLS adaptatif, l'internationalisation et les skins personnalisés). Lorsque la fonctionnalité cover est sélectionnée, le volet de gauche affiche un aperçu du lecteur avec une image de couverture, tandis que le volet de droite présente le code d'initialisation HTML correspondant. Ce code inclut des paramètres tels que source, width, height, cover, autoplay, preload et isLive. Cliquez sur le bouton Copy pour copier le code.

Code source de la démonstration pour Vue

Le SDK ApsaraVideo Player pour le Web met à disposition le code source d'une démonstration pour vous aider à intégrer le SDK au framework Vue.

Pour plus d'informations sur cette démonstration, consultez le Demo of Vue-based ApsaraVideo Player.

Code source de la démonstration React

Le SDK ApsaraVideo Player pour le Web fournit le code source d'une démonstration pour faciliter l'intégration du SDK avec le framework React.

Pour en savoir plus sur cette démonstration, voir le Demo of React-based ApsaraVideo Player.

Mini-programmes WeChat

Un mini-programme WeChat ne dispose pas des API DOM et BOM. Par conséquent, certaines bibliothèques couramment utilisées dans le développement frontend, comme jQuery et Zepto, ne peuvent pas être chargées dans un mini-programme WeChat. De même, le SDK ApsaraVideo Player pour le Web, qui dépend du support des navigateurs, ne peut pas s'exécuter dans un mini-programme WeChat. Vous devez donc utiliser le composant vidéo par défaut fourni par les mini-programmes WeChat pour lire les vidéos. Pour plus d'informations, visitez la page vod-mini-program.

uni-app

Vous pouvez intégrer le lecteur dans uni-app à l'aide du code suivant. Étant donné que le lecteur Web repose sur des API liées au navigateur, il ne prend pas en charge la compilation vers des applications natives ou des mini-programmes.

Développer pour afficher le 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>