Official Web Player SDK components - ApsaraVideo VOD - ApsaraVideo VOD

Le SDK du lecteur ApsaraVideo fournit des composants intégrés pour les publicités, les sous-titres, les listes de lecture et d'autres scénarios courants. Utilisez-les tels quels ou personnalisez-les.

Présentation

Le code source est disponible sur GitHub.
Testez les composants dans l'onglet Functions.
Certaines fonctionnalités ne fonctionnent pas dans les navigateurs mobiles intégrés.
GitHub est un site tiers. Des problèmes de connexion peuvent survenir.

Liste des composants

Nom du composant	Type	Description	Effet
Commentaires défilants (Bullet comment)	`AliplayerDanmuComponent`	Ajoute une zone de saisie de texte et des boutons dans la barre de contrôle pour activer, désactiver et envoyer des commentaires en direct. Composant Danmu.
Filigrane animé (composant Marquee)	`BulletScreenComponent`	Ajoute un filigrane textuel défilant (tel qu'un ID utilisateur) pour dissuader la copie non autorisée. Prend en charge la personnalisation de la position, de la couleur et de la taille de la police. La nouvelle version du lecteur intègre une fonction de filigrane dynamique, qui remplace le ticker et offre une solution plus complète et facile à utiliser. Pour plus de détails, reportez-vous aux attributs `watermark` dans la Référence de l'API Aliplayer.
Sous-titre	`CaptionComponent`	Permet de basculer les sous-titres entre différentes langues. Composant de sous-titrage.
Bloc de publicités vidéo	`ManyVideoADComponent`	Lit une séquence de publicités vidéo avant le contenu principal. Composant de bloc de publicités vidéo.
Reprise de la lecture	`MemoryPlayComponent`	Enregistre automatiquement la dernière position de lecture. Deux modes sont disponibles : Cliquez pour lire : affiche la dernière position lors de la lecture avec une option pour rechercher ce point. Lecture automatique : recherche la dernière position enregistrée au début de la lecture. Composant de reprise de lecture. Remarque Nécessite le support de localStorage dans le navigateur.
Publicité à la pause (image)	`PauseADComponent`	Affiche une superposition publicitaire image au centre du lecteur lorsque la lecture est en pause. Composant de publicité à la pause.
Liste de lecture vidéo	`PlaylistComponent`	Ajoute un bouton de liste de lecture à la barre de contrôle pour basculer entre les vidéos. Composant de liste de lecture vidéo.
Aperçu	`PreviewVodComponent`	Limite la lecture à une durée d'aperçu, puis invite à accéder au contenu complet (par exemple, s'abonner ou acheter). Composant d'aperçu.
Marqueur de progression	`ProgressComponent`	Ajoute des marqueurs à la barre de progression pour les points clés. Le survol d'un marqueur affiche un aperçu miniature. Composant de marqueur de progression.
Définition	`QualityComponent`	Permet de changer la définition vidéo (résolution). Composant de définition.
Vitesse de lecture	`RateComponent`	Ajuste la vitesse de lecture vidéo. Composant de vitesse de lecture
Rotation et miroir	`RotateMirrorComponent`	Ajoute des boutons de rotation et de miroir à la barre de contrôle. Composant de rotation et de miroir.
Publicité de démarrage (image)	`StartADComponent`	Affiche une publicité image avant le début de la lecture vidéo. Composant de publicité de démarrage.
Changement de piste audio	`TrackComponent`	Permet de basculer les pistes audio entre différentes langues. Composant de changement de piste audio.	-
Publicité vidéo	`VideoADComponent`	Lit une publicité vidéo limitée dans le temps avant le contenu principal. Composant de publicité vidéo.
Lire la suivante	PlayerNextComponent	Ajoute un bouton Play Next à la barre de contrôle. L'événement de clic peut être personnalisé et transmis en tant que paramètre. Composant Lire la suivante.

Utiliser les composants

Ajoutez les composants au SDK du lecteur Web. Aucune URL CDN n'est actuellement disponible. Téléchargez le package de composants et incluez-le dans votre projet. Utilisez la dernière version.
```
<script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>
```

Montez les composants sur le SDK du lecteur Web.

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) {}
);

Propriétés des composants :

Propriété

Description

name

Nom unique du composant, utilisé pour récupérer son instance.

type

Classe du composant.

args

Arguments du constructeur. Doivent correspondre aux paramètres requis.

Créer une version personnalisée

Tous les composants

Génère tous les composants. Sortie : /dist/aliplayer-components/aliplayercomponents-[version].min.js

$ npm run build

Ensemble personnalisé de composants

Pour réduire la taille du bundle, générez uniquement des composants spécifiques :

$ npm run build componentsName # componentsName is the component name

componentsName est une liste séparée par des espaces. Exemple :

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