ApsaraVideo VOD:Player SDK for Web FAQ

Problèmes liés à la licence

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

Problèmes courants toutes plateformes confondues

• Pour les problèmes indépendants de la plateforme, consultez la page 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

Changer 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 est déclenché une fois que le lecteur a terminé d'initialiser la vidéo et de rendre l'interface utilisateur. À ce stade, vous pouvez appeler des méthodes telles que seek en toute sécurité. Écoutez l'événement comme suit :

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

Ajuster la taille et la position du bouton de lecture

• Remplacez le 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 pause ?

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

Définir 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.
})

Référence de l'API Aliplayer.

Activer le 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ésactiver le déplacement sur la barre de progression

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

Obtenir périodiquement le temps de lecture actuel

Utilisez un minuteur pour appeler player.getCurrentTime() chaque seconde. Arrêtez 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 Player SDK for Web

1. **Précision de la méthode seek** : 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 sur la base 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 skinLayoutIgnore et skinLayout ensemble — skinLayoutIgnore est prioritaire 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 de Player SDK for Flutter pour iOS : Définissez un ID de trace avec FlutterAliplayer.setTraceID pour faciliter le dépannage via les journaux ; mettez à niveau Player SDK for 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 de Player SDK for Web ?

1. Vérifier la version : Consultez 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 de langue 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

Player SDK for 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. Lire des flux vidéo encodés en H.265/H.266.

Erreur cross-origin lors de la lecture de fichiers FLV ou M3U8

Si vous voyez des erreurs « Access is denied for this document » ou « Access-Control-Allow-Origin », activez l'accès cross-origin pour votre domaine de lecture. Configurer l'accès cross-origin.

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 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 qu'il est absent des requêtes vidéo, la liste de contrôle d'accès (ACL) basée sur le Referer peut bloquer la lecture. Définissez enableWorker: false pour résoudre ce problème.

Supprimer les 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 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 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 provoque une erreur et bloque le reste de l'initialisation.

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

Solution 2 (solution de 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 Player SDK for 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 Player SDK for 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);
});

Rattraper le 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.

Utiliser Player SDK for Web dans les mini-programmes WeChat

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

L'extraction de flux cross-origin échoue pour un flux en direct

Si la validation cross-origin 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 des vidéos VOD sur iOS

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

Solution : Transcodez la vidéo avant la lecture. Transcodage audio et vidéo.

Problèmes spécifiques à la plateforme

Supprimer la vignette par défaut dans WebView

Sur certains WebViews 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.

Activer le mode de document le plus élevé dans IE

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

Activer 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>