Tous les produits
Search
Centre de documentation

ApsaraVideo VOD:Intégrer le SDK ApsaraVideo Player pour le Web

Dernière mise à jour :Sep 17, 2026

Intégrez le SDK ApsaraVideo Player pour le Web dans votre application web et configurez la lecture vidéo de base.

Remarques d'utilisation

  • Cette rubrique utilise le SDK ApsaraVideo Player pour le Web V2.25.1 à titre d'exemple. Nous vous recommandons d'utiliser la dernière version. Pour la télécharger, consultez Télécharger le SDK ApsaraVideo Player.

  • Le SDK ApsaraVideo Player pour le Web V2.14.0+ prend en charge la lecture des vidéos H.265, et la version V2.20.2+ prend en charge le format H.266. Cette rubrique couvre le format H.264. Pour les formats H.265 et H.266, consultez Lire des vidéos H.265 et H.266.

Prérequis

  • Vous avez obtenu le nom de domaine et la clé de licence pour votre site web. Gérer la licence.

Accès rapide via AI Skill

Si vous utilisez des outils de programmation IA prenant en charge les Agent Skills (tels que Qoder et Claude Code), installez le Skill officiel du lecteur. L'IA générera alors le code d'intégration prêt à l'emploi.

  1. Installation.

    Méthode 1 : Exécutez la commande suivante pour installer automatiquement le package dans le répertoire racine du projet.

    npx skills add https://player.alicdn.com/file/aliplayer-web-setup.tar.gz

    Méthode 2 : Téléchargez manuellement le package et placez-le dans le répertoire skills de l'outil de programmation IA.

    Copiez le répertoire aliplayer-web-setup dans le répertoire skills de l'outil correspondant, par exemple :

    • Effet global : ~/.qoder/skills/aliplayer-web-setup/

    • Effectif uniquement pour le projet actuel : <Répertoire racine du projet>/.qoder/skills/aliplayer-web-setup/

    Reportez-vous à la documentation officielle pour connaître le chemin du répertoire skills des autres outils de programmation IA.

    Remarque

    Une fois l'installation terminée avec l'une des deux méthodes, redémarrez l'outil de programmation IA pour activer le Skill.

  2. Utilisation.

    Décrivez votre besoin en langage naturel, par exemple :Aide-moi à intégrer le lecteur Aliyun dans un projet React, pour lire une vidéo à la demande, avec chiffrement privé。

    L'IA confirmera d'abord le framework front-end, le type de diffusion (à la demande/en direct), la nécessité d'un chiffrement, le mode de source vidéo et d'autres informations, puis générera le code complet d'intégration du lecteur.

Remarque

Le code généré utilise par défaut une licence de test, limitée au débogage local. Pour le déploiement en production, remplacez cette licence par la licence officielle obtenue via la console. Pour plus de détails, consultez Gérer la licence.

Accès manuel rapide

Ces étapes permettent d'intégrer le SDK ApsaraVideo Player pour le Web dans un projet web basique. Pour React ou Vue, téléchargez la démo depuis Essai en ligne et code source de la démo.

1. Importer le SDK Web

Importer via le package NPM

  1. Ajoutez la dépendance aliyun-aliplayer à votre projet.

    npm install aliyun-aliplayer --save
  2. Importez le package et le fichier de style dans votre code.

    import Aliplayer from 'aliyun-aliplayer';
    import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';

Importer via la balise script

Remarque

Les chemins d'accès aux fichiers JavaScript et CSS ont changé à partir de la version V2.16.3.

Ancien :

CSS : https://g.alicdn.com/de/prismplayer/version/skins/default/aliplayer-min.css

JS : https://g.alicdn.com/de/prismplayer/version/aliplayer-min.js

Nouveau :

CSS : https://g.alicdn.com/apsara-media-box/imp-web-player/version/skins/default/aliplayer-min.css

JS : https://g.alicdn.com/apsara-media-box/imp-web-player/version/aliplayer-min.js

<!--In this topic, Web SDK V2.25.1 is used as an example. If you want to use other versions, obtain the version number and replace 2.25.1 in the sample code.-->
<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  // Required. You must add this CSS file.
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script>  // Required. You must add the .js file.
</head>

2. Fournir un élément de montage

Ajoutez une balise <body> et un nœud <div> pour monter l'interface utilisateur du lecteur. Exemple de code :

<body>
  <div id="J_prismPlayer"></div>
</body>

3. Initialiser le SDK

Le SDK localise le nœud DOM avec id="J_prismPlayer" et affiche l'interface utilisateur du lecteur.

var player = new Aliplayer({
  id: 'J_prismPlayer',
  license: {
    // Use the domain name and license key prepared
    domain: "example.com", // The domain name that you specified when you applied for a license
    key: "example-key" // The license key displayed in the ApsaraVideo VOD console after you have applied for a license
  }
});

Lire une vidéo

Configurez le lecteur pour différents scénarios.

Lire des vidéos à la demande

Lecture basée sur les URL

Définissez le paramètre source sur l'URL de lecture d'un fichier multimédia provenant d'un service tiers ou d'ApsaraVideo VOD.

Appelez l'opération GetPlayInfo pour obtenir l'URL de lecture d'un fichier multimédia dans ApsaraVideo VOD. Nous vous recommandons d'intégrer le SDK ApsaraVideo VOD afin d'éviter des calculs de signature complexes. Testez l'API dans OpenAPI Explorer.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The playback URL of a media file stored in a third-party VOD service or in ApsaraVideo VOD.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Lecture basée sur VID et PlayAuth

Définissez vid sur l'ID du média et playauth sur les identifiants de lecture.

  1. Après avoir téléchargé un fichier multimédia, trouvez son ID dans la console ApsaraVideo VOD sous Media Files > Audio/Video. Vous pouvez également appeler l'opération SearchMedia.

  2. Appelez l'opération GetVideoPlayAuth pour obtenir les identifiants de lecture. Nous vous recommandons d'intégrer le SDK ApsaraVideo VOD afin d'éviter des calculs de signature complexes. Testez l'API dans OpenAPI Explorer.

La lecture basée sur VidAuth est recommandée par rapport à STS pour sa simplicité et sa sécurité. Pour une comparaison, consultez Méthode par identifiants vs méthode STS.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Required. The ID of the media file. Example: 1e067a2831b641db90d570b6480f****.
    playauth: "<your PlayAuth>", // Required. The playback credential.
    // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. This setting overwrites the validity period that you configured in the ApsaraVideo VOD console. If you leave this parameter empty, the default value 7200 is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Lecture basée sur VID et STS

La lecture basée sur STS utilise un jeton STS temporaire au lieu d'identifiants de lecture. Appelez l'opération AssumeRole pour obtenir un jeton STS. Pour plus d'informations, consultez Obtenir un jeton STS.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Required. After you upload an audio or video file, you can log on to the ApsaraVideo VOD console and choose Media Files > Audio/Video to view the ID of the audio or video file. Alternatively, you can call the SearchMedia operation provided by the ApsaraVideo VOD SDK to obtain the ID. Example: 1e067a2831b641db90d570b6480f****.
    accessKeyId: "<your AccessKey ID>", // Required. The AccessKey ID is returned when the temporary STS token is generated.
    securityToken: "<your STS token>", // Required. The STS token. To obtain an STS token, call the AssumeRole operation.
    accessKeySecret: "<your AccessKey Secret>", // Required. The AccessKey secret is returned when the temporary STS token is generated.
    region: "<region of your video>", // Required. The ID of the region in which the media asset resides, such as cn-shanghai, eu-central-1, or ap-southeast-1.
    // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. This setting overwrites the validity period that you configured in the ApsaraVideo VOD console. If you leave this parameter empty, the default value 7200 is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Lecture chiffrée

ApsaraVideo VOD prend en charge le chiffrement propriétaire d'Alibaba Cloud et le chiffrement DRM. Lire une vidéo chiffrée dans un navigateur web.

Lorsque le lecteur est initialisé en mode de lecture VID, le SDK Aliplayer envoie une requête GetPlayInfo à vod.{region}.aliyuncs.com (vod-product.{region}aliyuncs.com) pour obtenir l'adresse de lecture. Si le réseau ne peut pas accéder au nom de domaine (par exemple, dans un environnement intranet), la requête expire ou échoue. Assurez-vous que vod.{region}.aliyuncs.com (vod-product.{region}aliyuncs.com) et le nom de domaine CDN sont accessibles depuis le réseau.

Remarque

Pour toutes les options d'initialisation, consultez Paramètres.

Lire des flux en direct

Diffusion en direct basée sur l'URL

Définissez source sur l'URL de streaming et isLive sur true.

L'URL de streaming peut provenir d'un service tiers ou d'ApsaraVideo Live. Générez les URL avec le générateur d'URL dans la console ApsaraVideo Live.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The streaming URL can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live.
    isLive: true, // Specifies whether to play live streams.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Diffusion en direct chiffrée par DRM

Pour la diffusion en direct chiffrée par DRM : Lire une vidéo chiffrée.

Streaming en temps réel (RTS)

RTS permet de lire des vidéos à partir d'URL sans paramètres supplémentaires.

  1. Générez une URL RTS avec le générateur d'URL dans la console ApsaraVideo Live.

  2. Le lecteur intègre le SDK RTS pour la lecture RTS. La dernière version est utilisée par défaut. Vous pouvez la remplacer avec le paramètre rtsVersion.

  3. Si RTS n'est pas disponible, le lecteur revient automatiquement vers HLS ou HTTP-FLV. FLV est prioritaire lorsqu'il est pris en charge.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The RTS playback URL. The artc:// protocol is used.
    isLive: true, // Specifies whether to play live streams.
    // rtsFallback: false, //Optional. Specifies whether to enable the RTS playback degradation feature. Default value: true.
    // rtsFallbackType: 'HLS', //Optional. The degraded protocol that you want to use. You can specify HLS or FLV. By default, this parameter is left empty. In this case, the default policy is used and the system tries to play the stream over FLV first. If your browser does not support FLV, the system plays the stream over HLS.
    // rtsFallbackSource: '<your play URL>', // Optional. The degraded protocol that you want to use.
    // rtsVersion: 'x.x.x', // Optional. The version of the RTS SDK.
  },
  function (player) {
    console.log("The player is created.");
  }
);
// The event that is triggered when a stream is pulled over RTS. Listen for this event to obtain the TraceId. In the event callback, traceId indicates the TraceId that is used for stream pulling and source indicates the playback URL of the RTS stream.
player.on("rtsTraceId", function (event) {
  console.log("EVENT rtsTraceId", event.paramData);
});
// The event that is triggered when a degraded protocol is used for playback. reason indicates the degradation cause and fallbackUrl indicates the alternative URL.
player.on("rtsFallback", function (event) {
  console.log(" EVENT rtsFallback", event.paramData);
});

Référence