Official Web Player SDK components - ApsaraVideo VOD - ApsaraVideo VOD

Le SDK du lecteur ApsaraVideo propose 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.
Essayez les composants dans l'onglet Functions.
Certaines fonctionnalités ne sont pas prises en charge par 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
Commentaire en temps réel (Danmu)	`AliplayerDanmuComponent`	Ajoute une zone de saisie de texte et des boutons à 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. Personnalisez la position, la couleur et la taille de la police. Composant Marquee. Par défaut, l'animation du filigrane dure 10 secondes. Pour personnaliser l'intervalle de défilement (par exemple, 4 secondes), remplacez l'animation via CSS : `.bullet-screen { animation: bullet 4s linear infinite !important; }`. L'indicateur `!important` est requis pour remplacer le style intégré du composant.
Sous-titre	`CaptionComponent`	Bascule entre les langues de sous-titrage. Composant de sous-titres.
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 : Clic pour lire : affiche la dernière position lors de la lecture avec une option pour y accéder. Lecture automatique : accède à la dernière position enregistrée au début de la lecture. Composant de reprise de lecture. Remarque Nécessite la prise en charge de localStorage par le navigateur.
Publicité à la pause (image)	`PauseADComponent`	Affiche une superposition publicitaire (image) au centre du lecteur lorsque celui-ci 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 l'utilisateur à obtenir un accès 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 de la vignette. Composant de marqueur de progression.	L'exemple d'interface complète du lecteur illustre l'intégration de plusieurs composants officiels, notamment : Info-bulle d'aperçu de vignette (affichant le titre et la description) Barre de reprise de lecture (Dernière visionnage à 00:34, cliquez pour reprendre) Affichage des sous-titres Barre de contrôle inférieure (boutons Pause, barre de progression, volume, paramètres, sous-titres CC, plein écran)
Définition	`QualityComponent`	Change la définition vidéo (résolution). Composant de définition.
Vitesse de lecture	`RateComponent`	Ajuste la vitesse de lecture de la vidéo. Composant de vitesse de lecture
Rotation et mise en miroir	`RotateMirrorComponent`	Ajoute des boutons de rotation et de mise en miroir à la barre de contrôle. Composant de rotation et de mise en 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`	Bascule entre les pistes audio de 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 Lire la suivante à 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 build personnalisée

Tous les composants

Compile 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, compilez 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.