ApsaraVideo VOD:FAQ du SDK Player pour le Web

Problèmes liés à la licence

Résolvez les problèmes de licence invalide ou expirée dans la rubrique FAQ sur les licences.

Configuration de la licence et noms de domaine autorisés du SDK Player pour le Web

Le SDK Player pour le Web valide une licence en fonction du nom de domaine de la page Web qui héberge le lecteur. Utilisez cette entrée pour configurer le nom de domaine autorisé, gérer les erreurs de licence lors de l'initialisation et finaliser la configuration de la licence lorsque vous mettez à niveau le SDK.

• Nom de domaine autorisé : le nom de domaine autorisé correspond au domaine d'accès métier de la page Web hébergeant le lecteur, et non au domaine des ressources ApsaraVideo VOD. Liez le nom de domaine par correspondance exacte ou par joker. Configurez les noms de domaine de test et de production de la même manière : vérifiez la propriété de chaque nom de domaine dans la console, puis demandez une licence gratuite.

• **Erreur license resource init error lors de l'initialisation** : cette erreur survient généralement lorsque le mode débogage est activé, par exemple si vconsole est activé. Cela n'affecte pas la lecture normale. Désactivez le mode débogage ou vérifiez les outils de développement du navigateur (Console et Réseau) pour détecter d'autres erreurs signalées.

• Page d'autorisation bloquée sur un indicateur de chargement : si la liste des SDK ou la page d'autorisation de licence ne parvient pas à lire les données et affiche continuellement un indicateur de chargement, créez une application SDK Player pour le Web et liez directement le nom de domaine autorisé.

• Mise à niveau vers la dernière version du SDK Player pour le Web : remplacez les URL de référence CSS et JavaScript. Le reste de votre code reste compatible, vous n'avez donc pas besoin d'intégrer à nouveau les opérations API. Vous devez ajouter le paramètre license, qui contient les champs domain et key, à la configuration d'initialisation. Demandez une licence gratuite dans la console et liez le nom de domaine autorisé avant d'initialiser le lecteur.

Problèmes courants multiplateformes

• Pour les problèmes indépendants de la plateforme, consultez la rubrique FAQ du lecteur multiplateforme.

• Les développeurs expérimentés peuvent également résoudre les erreurs de lecture de manière autonome.

Problèmes de développement

Commutation de vid et playauth dans le lecteur HTML5

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

La méthode replayByVidAndPlayAuth déclenche-t-elle l'événement ready ?

Oui. L'événement ready se déclenche une fois que le lecteur a terminé d'initialiser la vidéo et de rendre l'interface utilisateur. À ce stade, vous pouvez appeler en toute sécurité des méthodes telles que seek. Écoutez l'événement comme suit :

player.on('ready', function(){...});

Ajustement de la taille et de la position du bouton de lecture

• Remplacez le style CSS pour redimensionner le bouton de lecture. Exemple (taille réduite de moitié) :

   .prism-player .prism-big-play-btn {
      width: 45px;
      height: 45px;
      background-size: 128px 256px;
  }

• Définissez les propriétés x et y de bigPlayButton dans skinLayout pour repositionner le bouton de lecture.

  skinLayout: [
    { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
    {
      name: "H5Loading",
      align: "cc",
    },
    {
      name: "controlBar",
      align: "blabs",
      x: 0,
      y: 0,
      children: [
        { name: "progress", align: "tlabs", x: 0, y: 0 },
        { name: "playButton", align: "tl", x: 15, y: 26 },
        { name: "timeDisplay", align: "tl", x: 10, y: 24 },
        { name: "fullScreenButton", align: "tr", x: 20, y: 25 },
        { name: "volume", align: "tr", x: 20, y: 25 },
      ],
    },
  ]

Après avoir appelé la méthode seek, comment le lecteur implémente-t-il le bouton de pause ?

Le bouton reflète l'état précédent du lecteur. Appelez player.pause() après le saut temporel pour afficher le bouton de pause.

Définition de la position de lecture initiale

Définissez watchStartTime pour spécifier la position de lecture initiale.

new Aliplayer({
  watchStartTime: 60, // Start playback from the 60th second.
})

Consultez la rubrique Référence de l'API Aliplayer.

Activation du plein écran automatique lors de la lecture automatique

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//example.aliyundoc.com/video/media02.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    qualitySort: "asc",
    mediaType: "video",
    preload: true,
    isLive: false,
  },
  function (player) {
    player.mute();
    console.log("The player is created");
  }
);
player.on("ready", function () {
  player.fullscreenService.requestFullScreen();
});

Quelle est la différence entre preload: true et preload: false dans Aliplayer ?

preload: true active le préchargement. preload: false désactive le préchargement.

Désactivation du saut temporel sur la barre de progression

Définissez disableSeek: true pour empêcher les utilisateurs de faire glisser la barre de progression. Consultez la rubrique Désactiver le glissement de la barre de progression.

Obtention périodique du temps de lecture actuel

Utilisez un minuteur pour appeler player.getCurrentTime() toutes les secondes. Effacez le minuteur lorsque la lecture est mise en pause, qu'une erreur se produit ou que la lecture se termine.

var timer = null;

timer = setInterval(() => {
  var current = player.getCurrentTime();
  console.log(current);
}, 1000);

// Clear the timer.
function clear() {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}
player.on("ended", function (e) {
  clear();
});
player.on("pause", function (e) {
  clear();
});
player.on("error", function (e) {
  clear();
});

Autres problèmes courants avec le SDK Player pour le Web

1. **Précision de la méthode seek** : la méthode seek accepte les valeurs à virgule flottante (par exemple, 10.5). Pour une meilleure compatibilité, arrondissez à l'entier inférieur ou utilisez moins de décimales.

2. Reconnexion après la déconnexion d'un flux en direct : vous pouvez configurer le nombre de tentatives de reconnexion. Si la lecture ne reprend pas après le nombre de tentatives configuré, écoutez l'événement error pour gérer l'échec, par exemple :

   player.on('error', (e) => { var code = String(e.paramData.error_code); })

3. Clé de licence et fonctionnalité de téléchargement : la clé de licence utilisée pour la lecture n'est pas interchangeable avec la fonctionnalité de téléchargement. Les téléchargements sont générés en fonction des informations de l'application.

4. La barre de contrôle affiche du texte mais pas d'icônes : vérifiez que aliplayer-min.css est correctement inclus. N'utilisez pas simultanément skinLayoutIgnore et skinLayout : skinLayoutIgnore a la priorité et supprime le composant. Définissez une hauteur fixe (400 px ou plus) sur le conteneur du lecteur pour éviter l'effondrement de la mise en page. Vous pouvez également comparer votre configuration avec la démo Vue officielle pour le débogage.

5. Erreur 537067523 du SDK Player pour Flutter sur iOS : définissez un ID de trace avec FlutterAliplayer.setTraceID pour faciliter le dépannage via les journaux ; mettez à niveau le SDK Player pour Flutter vers la version 7.14.0 ou ultérieure, qui optimise la bibliothèque réseau ; si vous n'utilisez pas Alibaba Cloud CDN, contactez votre fournisseur CDN pour vérifier les journaux de requêtes.

Comment vérifier et mettre à niveau la version du SDK Player pour le Web ?

1. Vérifier la version : examinez le fichier aliplayer-min.js inclus dans votre projet, ou le champ version dans sa configuration.

2. Mettre à niveau la version (selon la demande) : modifiez la variable de version à la ligne 30 de chacun des fichiers de pack linguistique suivants : language.SC_UTF8.php, language.SC_GBK.php, language.TC_UTF8.php, language.TC_BIG5.php. Mettez à jour les 4 fichiers avec le nouveau numéro de version (par exemple, de 2.27.1 à 2.37.8).

Problèmes de lecture et erreurs

Échec de la lecture des vidéos encodées en H.265

Le SDK Player pour le Web 2.14.0+ prend en charge les vidéos encodées en H.265. Vous devez obtenir une licence et configurer les paramètres H.265. Consultez la rubrique Lire les flux vidéo encodés en H.265/H.266.

Erreur d'origine croisée lors de la lecture de fichiers FLV ou M3U8

Si vous voyez les erreurs « Access is denied for this document » ou « Access-Control-Allow-Origin », activez l'accès inter-origines pour votre domaine de lecture. Consultez la rubrique Configurer l'accès inter-origines.

Le lecteur HTML5 ne peut pas passer en mode paysage

Le SDK du lecteur ne fournit pas d'API pour le mode paysage. Sur iOS, le mode paysage dépend des paramètres d'orientation du système. Sur Android, le lecteur passe automatiquement en mode paysage en mode plein écran.

En-tête Referer manquant dans les requêtes de lecture FLV

1. Les requêtes du lecteur suivent la politique Referrer-Policy de votre site Web. Assurez-vous que votre Referrer-Policy autorise les requêtes vidéo à inclure un en-tête Referer.

2. Si la Referrer-Policy autorise un en-tête Referer mais que celui-ci est absent des requêtes vidéo, la liste de contrôle d'accès basée sur le Referer peut bloquer la lecture. Définissez enableWorker: false pour résoudre ce problème.

Suppression des bandes noires de la fenêtre du lecteur

Des bandes noires apparaissent lorsque la vidéo ne remplit pas entièrement la fenêtre du lecteur.

Les bandes noires correspondent à l'arrière-plan du conteneur du lecteur. Appliquez object-fit: cover; à la balise <video> pour les supprimer.

L'initialisation d'Aliplayer échoue avec l'erreur TypeError: Failed to execute 'getComputedStyle' on 'Window'

Cause : lors de l'initialisation du composant controlBar.volume, la méthode interne _getBottom() récupère un élément DOM qui est null ou qui n'est pas un Element (généralement parce que le conteneur n'a pas fini de s'afficher). L'appel de getComputedStyle sur cette valeur génère une exception et bloque le reste de l'initialisation.

Solution 1 (recommandée) : mettez à niveau le SDK Player pour le Web vers la version 2.37.8 ou ultérieure, qui corrige ce problème de compatibilité.

Solution 2 (contournement) : ajoutez skinLayoutIgnore: ["controlBar.volume"] à la configuration du lecteur pour ignorer l'initialisation du contrôle du volume. Si vous devez conserver le contrôle du volume, vérifiez que l'élément conteneur existe et que son offsetWidth est supérieur à 0 avant d'initialiser le lecteur ; sinon, retardez l'initialisation de 200 ms et réessayez.

loadByUrl ne fonctionne pas sur iOS et Android

// `seek` only jumps to the time, but does not play.
// `play` restarts playback from the beginning on iOS.
// On iOS, full-screen playback is hijacked by the native player.

document.querySelector(".no1").onclick = function () {
  player.loadByUrl("//player.alicdn.com/resource/player/qupai.mp4");
};

// Listen for 'play' and 'canplay' events to call seek. This might not work in some browsers. As an alternative, consider calling seek on the first 'timeupdate' event.
player.on("canplay", function () {
  player.seek(20);
});
// No workaround is available for full-screen hijacking on iOS.

La vidéo précédente continue de jouer après le changement de source vidéo

Dans le SDK Player pour le Web 2.9.11, loadByUrl échoue en mode de compatibilité du navigateur 360 sur Windows 10. La vidéo précédente continue de jouer après le changement de source.

Cause : problème de compatibilité du navigateur.

Solution : mettez à niveau vers le SDK Player pour le Web 2.9.19 ou ultérieur.

La méthode player.seek() échoue sur iOS

// Call seek in the `play` and `canplay` events. Otherwise, it may not take effect.
player.on("canplay", function () {
  player.seek(20);
});

Rattrapage du direct après la reprise d'un flux

Description du problème

Si vous basculez votre application en arrière-plan pendant la lecture d'un flux en direct, la lecture est mise en pause. Lorsque vous revenez à l'application, le flux en direct continue de jouer à partir du moment où la pause s'est produite. Existe-t-il une configuration permettant de réduire la latence de lecture afin que le dernier clip puisse être lu après la reprise de la lecture ?

Solution

Après la reprise de la lecture, le flux en direct continue de jouer à partir du moment où la pause s'est produite. Vous ne pouvez pas configurer de paramètres pour accélérer la lecture. Nous vous recommandons de récupérer à nouveau le flux en direct, puis d'utiliser le lecteur pour le lire à nouveau.

Utilisation du SDK Player pour le Web dans les mini-programmes WeChat

Le SDK Player pour le Web ne s'exécute pas dans les mini-programmes WeChat. Utilisez plutôt le composant vidéo intégré du mini-programme. Consultez la rubrique Mini-programme WeChat.

Échec de la récupération de flux inter-origines pour un flux en direct

Si la validation inter-origines locale échoue, vérifiez votre configuration de Gestion des domaines. Les requêtes provenant de localhost échouent si seul votre propre domaine est configuré. Par défaut, localhost passe la validation lorsqu'aucun domaine n'est configuré.

Échec de la lecture de vidéos VOD sur iOS

Cause possible : Safari sur iOS peut échouer à décoder des vidéos avec un taux de compression élevé ou un profil d'encodage high.

Solution : transcodez la vidéo avant la lecture. Consultez la rubrique Transcodage audio et vidéo.

Problèmes spécifiques à la plateforme

Suppression de la vignette par défaut dans WebView

Sur certains WebView Android, l'omission de l'attribut poster sur la balise <video> entraîne l'apparition d'une vignette par défaut (arrière-plan gris avec un bouton de lecture).

Solution : définissez un attribut poster invalide sur la balise <video> pour remplacer la valeur par défaut.

extraInfo: { poster: 'noposter' } // The content of the player parameter `extraInfo` is passed to the <video> tag.

Activation du mode de document le plus élevé dans IE

<meta http-equiv="x-ua-compatible" content="IE=edge" >

Activation de la lecture automatique dans WeChat

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
  wx.config({
      // Configuration details. wx.ready can be used even if the details are incorrect.
      debug: false,
      appId: '',
      timestamp: 1,
      nonceStr: '',
      signature: '',
      jsApiList: []
  });
  wx.ready(function() {
      var video=$(player.el()).find('video')[0];
      video.play();
  });
};
// Workaround for autoplay issue on iOS.
autoPlay();
</script>