ApsaraVideo VOD:Fonctionnalités avancées

Contrôle de la lecture

Lecture automatique

• Après avoir configuré autoplay: true, il se peut que la lecture automatique ne soit pas activée. La plupart des navigateurs modernes bloquent en effet la lecture automatique avec son afin de ne pas perturber l'expérience utilisateur.

  Par exemple, la politique AutoPlay de Chrome est la suivante :

  • Autoriser systématiquement la lecture automatique en mode muet.

  • La lecture automatique avec son est autorisée dans les scénarios suivants :

    • L'utilisateur a interagi avec la page web, par exemple en cliquant ou en appuyant dessus.

    • Le comportement de visionnage vidéo de l'utilisateur sur un site web dépasse un certain seuil. Par exemple, si un utilisateur regarde souvent des vidéos sur un site, Chrome autorise la lecture automatique avec son sur ce site. Il s'agit d'une politique interne à Chrome qui ne peut pas être modifiée par programme.

    • L'utilisateur a ajouté un site web à l'écran d'accueil de son appareil mobile ou a installé une application web progressive (PWA) sur son ordinateur de bureau.

  Dans ce cas, vous pouvez :

  • Configurer mute:true pour activer la lecture automatique en mode muet. Pour plus d'informations, consultez les API operations.

  • Configurer autoplayPolicy: { fallbackToMute: true } pour tenter d'abord la lecture automatique avec son. Si cette tentative échoue, la lecture automatique en mode muet est activée. Pour plus d'informations, consultez les API operations.

  Notez que certains navigateurs, tels que le navigateur WeChat, peuvent également désactiver la lecture automatique en mode muet. Nous ne pouvons donc pas garantir le succès de la lecture automatique dans toutes les situations.

  Pour plus d'informations sur les politiques de lecture automatique des navigateurs, consultez la documentation Chrome et Safari.

Lecture continue

Personnaliser l'apparence et les composants du lecteur

Le SDK de lecteur ApsaraVideo pour Web vous permet de personnaliser l'apparence du lecteur, notamment son style, et de spécifier l'affichage des composants du lecteur ainsi que leur zone d'affichage. Ces composants incluent la barre de contrôle et l'interface utilisateur d'erreur.

• Composants d'interface utilisateur de la barre de contrôle

  Vous pouvez spécifier l'affichage des composants d'interface utilisateur et leur zone d'affichage en définissant l'attribut skinLayout. Pour plus d'informations, consultez la rubrique Configure skinLayout.

  • Configurations par défaut du SDK de lecteur ApsaraVideo

    skinLayout:[
       {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
        {name: "H5Loading", align: "cc"},
        {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
        {name: "infoDisplay"},
        {name:"tooltip", align:"blabs",x: 0, y: 56},
        {name: "thumbnail"},
        {
          name: "controlBar", align: "blabs", x: 0, y: 0,
          children: [
            {name: "progress", align: "blabs", x: 0, y: 44},
            {name: "playButton", align: "tl", x: 15, y: 12},
            {name: "timeDisplay", align: "tl", x: 10, y: 7},
            {name: "fullScreenButton", align: "tr", x: 10, y: 12},
            {name:"subtitle", align:"tr",x:15, y:12},
            {name:"setting", align:"tr",x:15, y:12},
            {name: "volume", align: "tr", x: 5, y: 10}
          ]
        }
      ]

• Interface utilisateur d'erreur

  Le SDK de lecteur ApsaraVideo pour Web fournit une interface utilisateur d'erreur par défaut. Vous pouvez également personnaliser cette interface à l'aide de l'une des méthodes suivantes. Pour plus d'informations, consultez la rubrique Customize the error UI for the HTML5 player.

  • Modifier le fichier CSS de l'interface utilisateur d'erreur par défaut

    Vous pouvez personnaliser l'interface utilisateur d'erreur à partir de celle par défaut. Modifiez le fichier CSS pour changer la couleur d'arrière-plan, la police et la position, et spécifiez si le message d'erreur doit s'afficher.

  • Définir une nouvelle interface utilisateur d'erreur

    Pour définir une nouvelle interface utilisateur d'erreur, vous devez vous abonner aux événements d'erreur.

• Configurer le style du lecteurParamètres du style du lecteur Web

  Si l'interface fournie par le SDK de lecteur ApsaraVideo pour Web ne répond pas à vos besoins métier, vous pouvez modifier le fichier CSS pour personnaliser le style du lecteur.

  Remarque

  Pour plus d'informations sur les configurations, reportez-vous au fichier CSS aliplayer-min.css du lecteur. L'exemple de code suivant montre comment configurer un grand bouton de lecture. Pour plus d'informations, consultez la rubrique Configure the player skin.

  .prism-player .prism-big-play-btn {
    width: 90px;
    height: 90px;
    background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
  }

Personnaliser la vignette de la vidéo

Chaque vidéo importée dans ApsaraVideo VOD possède une vignette. ApsaraVideo VOD propose plusieurs méthodes pour modifier cette vignette. Avant l'importation d'une vidéo, vous pouvez spécifier une image ou un instantané vidéo comme vignette. Vous pouvez également modifier la vignette après l'importation de la vidéo. Pour personnaliser la vignette vidéo, utilisez l'une des méthodes suivantes :

• Configurez la vignette vidéo dans la console ApsaraVideo VOD. Pour plus d'informations, consultez la rubrique Set the video thumbnail.

• Configurez la vignette vidéo en définissant l'attribut cover du lecteur.

  var player = new Aliplayer({
   "id": "player-con",
   "source":"//player.alicdn.com/video/aliyunm****.mp4",
    "cover":"Thumbnail URL",
  },
   function () { } 
  );

Instantanés vidéo

À partir de la version 2.1.0, le SDK de lecteur ApsaraVideo pour Web prend en charge la capture d'instantanés pendant la lecture vidéo. Le format de sortie peut être image ou jpeg. Vous devez activer explicitement cette fonctionnalité. Les données d'instantané renvoyées incluent l'horodatage de lecture, une chaîne Base64 et les données binaires de l'image.

Activer la fonctionnalité d'instantané

• Activer la fonctionnalité d'instantané dans le lecteur web

  Important

  Vous ne pouvez pas capturer d'instantanés à partir de vidéos Flash Video (FLV) lues dans Safari. Le bouton d'instantané n'apparaît pas, même si vous activez la fonctionnalité. L'élément Canvas permet d'activer la fonctionnalité d'instantané pour un lecteur web. Vous devez ajouter un en-tête autorisant le partage de ressources cross-origin (CORS) pour le domaine de lecture. Pour plus d'informations, consultez la rubrique Configure CORS.

  Ajoutez les paramètres de l'interface utilisateur d'instantané à l'attribut skinLayout. Exemple de code :

      skinLayout:[
      {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
      {
        name: "H5Loading", align: "cc"
      },
      {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
      {name: "infoDisplay"},
      {name:"tooltip", align:"blabs",x: 0, y: 56},
      {name: "thumbnail"},
      {
        name: "controlBar", align: "blabs", x: 0, y: 0,
        children: [
          {name: "progress", align: "blabs", x: 0, y: 44},
          {name: "playButton", align: "tl", x: 15, y: 12},
          {name: "timeDisplay", align: "tl", x: 10, y: 7},
          {name: "fullScreenButton", align: "tr", x: 10, y: 12},
          {name:"subtitle", align:"tr",x:15, y:12},
          {name:"setting", align:"tr",x:15, y:12},
          {name: "volume", align: "tr", x: 15, y: 10},
          {name: "snapshot", align: "tr", x: 5, y: 12},
        ]
      }
    ]

  Pour activer la fonctionnalité d'instantané pour un lecteur web, vous devez définir crossOrigin sur anonymous afin d'autoriser les requêtes cross-origin anonymes. Exemple de code :

    extraInfo:{
      crossOrigin:"anonymous"
    }

Définir la taille et la qualité de l'instantané

// Set the snapshot width to 300, height to 200, and quality to 0.9.
// The snapshot height and width are displayed in pixels. You can set the snapshot quality to a value ranging from 0 to 1. The default value is 1.
player.setSanpshotProperties(300,200,0.9)

S'abonner à l'événement snapshoted

player.on("snapshoted", function(data) {
     console.log(data.paramData.time);
     console.log(data.paramData.base64);
     console.log(data.paramData.binary);
 });

Filigrane d'instantané

snapshotWatermark:{
    left:"100",
    top:"100",
    text:"test",
    font:"italic bold 48px SimSun",
    strokeColor:"red",
    fillColor:'green'
  }

const player = new Aliplayer({
  id: "player-con",
  disableSeek: true,
  source: "https://player.alicdn.com/video/aliyunmedia.mp4",
}, function (player) {
    console.log("The player is created");
  }
);

Fonctionnalités pour les vidéos longues

Diffusion adaptative pour les flux HLS

Pour activer la diffusion multi-débits, définissez le paramètre source sur l'URL d'une liste de lecture principale et le paramètre isVBR sur true. Cette fonctionnalité permet au lecteur de basculer automatiquement entre les niveaux de qualité vidéo en fonction des conditions réseau. Les utilisateurs peuvent également changer manuellement la qualité.

Obtenir l'URL de lecture

Obtenez l'URL de lecture d'une vidéo en plusieurs débits : player._hls.levels[player._hls.currentLevel].

varplayer = newAliplayer({
 "id":"player-con",
 "source":"Multi-bitrate playback URL",
 "isVBR":true,
 },
 function () { } 
);

Le menu des paramètres du lecteur affiche une option Quality, telle que Auto(360), sur laquelle les utilisateurs peuvent cliquer pour changer la qualité vidéo.

Configurer des sous-titres externes

// Switch the subtitle language.
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // The API does not update the UI by default. You must call this method manually if needed.
// Enable subtitles.
var result = player._ccService.open();
player._ccService.updateUI(result.language);
// Disable subtitles.
player._ccService.close();
player._ccService.updateUI();

  .prism-cue > div:first-child,
  video::cue {
    font-size: 14px !important;
    color: #000 !important;
    background-color: rgba(255, 255, 255, .8) !important; /* Native subtitle rendering in iOS does not support the background color. */
  }

Plusieurs pistes audio

Aucune configuration manuelle n'est requise pour le SDK ApsaraVideo Player for Web. La figure suivante illustre le paramétrage des pistes audio.

Prise en charge multilingue

Par défaut, le SDK ApsaraVideo Player for Web prend en charge le chinois et l'anglais, et bascule automatiquement entre ces deux langues en fonction des paramètres linguistiques du navigateur. Vous pouvez également configurer des langues personnalisées. Le SDK permet de lire des vidéos hébergées dans différentes régions où ApsaraVideo VOD est disponible. Il suffit d'utiliser l'ID de la vidéo et les informations d'authentification de lecture pour accéder aux contenus stockés dans les régions d'Asie du Sud-Est et d'Europe.

Remarques sur l'attribut language

var player = new Aliplayer({
    id: "player-con",
    source: "",
    width: "100%",
    height: "500px",
    autoplay: true,
    language: "en-us",
  }, function (player) {
    console.log("The player is created.");
  });

Créer un lecteur avec une interface en anglais

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "en-us" // zh-cn indicates Chinese. en-us indicates English. 
 },
 function (player) {}
);

Spécifier une langue personnalisée pour le lecteur

Pour prendre en charge d'autres langues que le chinois et l'anglais, exploitez la fonctionnalité de langue personnalisée. Spécifiez les ressources linguistiques via l'attribut languageTexts. L'attribut languageTexts est un objet littéral dont la clé correspond à la valeur de l'attribut language, et la valeur JSON contient les traductions pour la langue cible. Voir l'exemple ci-dessous :

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "CustomLanguage",// Specify a language in the STRING type.
"languageTexts":{
    "CustomLanguage":{
        "Pause":"Pause"
        // Other parameters. For more information, visit https://player.alicdn.com/lang.json? spm=a2c4g.11186623.0.0.5a746515vnwUSi&file=lang.json
            }
        }
    },
    function (player) {} 
);

Lire des vidéos stockées dans plusieurs régions

Le SDK ApsaraVideo Player for Web permet de lire des vidéos stockées dans les régions Chine (Shanghai), Allemagne (Francfort) et Singapour. La lecture s'effectue soit via l'ID de la vidéo et les informations d'authentification, soit via Security Token Service (STS). Le lecteur analyse les informations de région pour obtenir l'URL de lecture correspondant à la région appropriée.

• Lecture basée sur l'ID de la vidéo et les informations d'authentification : le lecteur extrait les informations de région directement depuis les informations d'authentification de lecture afin d'obtenir l'URL de la vidéo. Aucune spécification de région n'est nécessaire dans la configuration.

• Lecture basée sur STS : utilisez la propriété region pour indiquer la région de la vidéo. La valeur par défaut est 'cn-shanghai'. Les autres valeurs valides incluent eu-central-1 et ap-southeast-1. Exemple :

  var player = new Aliplayer({
      id: "player-con",
      width: "100%",
      height: "500px",
      autoplay: true,
      language: "en-us",
      vid : '1e067a2831b641db90d570b6480f****',
      accessKeyId: '',// The AccessKey ID that is generated when the temporary STS token is issued. 
      securityToken: '',// The temporary STS token. To generate an STS token, call the AssumeRole operation. 
      accessKeySecret: ''// The AccessKey ID that is generated when the temporary STS token is issued. 
      region:'eu-central-1',// The Germany (Frankfurt) region.
    }, function (player) {
      console.log("The player is created.");
    });

Lecture de vidéos H.265 et H.266

Prérequis et remarques

• La lecture des vidéos H.265 est prise en charge à partir de la version 2.14.0 du SDK ApsaraVideo Player for Web, et celle des vidéos H.266 à partir de la version 2.20.2. Pour lire des vidéos H.265, vous devez obtenir une licence et souscrire au service valorisé « Playback of H.265 Videos on Web ». Pour plus de détails, consultez la rubrique Gestion des licences.

• Pour connaître les formats de fichiers audio et vidéo H.265 et H.266 compatibles avec le SDK ApsaraVideo Player for Web, reportez-vous à la section Protocoles pris en charge.

• Avant de lire des vidéos H.265 et H.266, vérifiez les exigences présentées dans le tableau suivant.

  Élément	Description
  Configuration requise	Le lecteur utilise des requêtes AJAX de type range pour accéder aux ressources vidéo. Votre navigateur doit satisfaire aux conditions suivantes : Prise en charge des requêtes HTTP range. Pour plus d'informations, consultez Requêtes HTTP range. Prise en charge de la méthode OPTIONS. Avant d'envoyer une requête AJAX avec un en-tête range, certains navigateurs comme Firefox envoient d'abord une requête HTTP OPTIONS.
  Compatibilité	H.265 Les appareils exécutant iOS 11 ou version ultérieure prennent en charge la lecture de vidéos H.265. Certains navigateurs sur Android, tels que le navigateur intégré, le navigateur WeChat, UC Browser et QQ Browser, prennent en charge le décodage matériel des vidéos H.265. La prise en charge du décodage logiciel des vidéos H.265 par des navigateurs comme Chrome, Microsoft Edge et Firefox dépend de leur compatibilité avec l'API WebAssembly. Pour plus d'informations, consultez WebAssembly. Si vous utilisez Chrome ou Chromium, assurez-vous d'utiliser la version 74 ou ultérieure, car WebAssembly ne fonctionne pas correctement sur les versions antérieures. H.266 Aucun navigateur ne prend nativement en charge la lecture de vidéos H.266. Le décodage logiciel est donc nécessaire. Cette capacité dépend de la prise en charge de l'API WebAssembly par le navigateur. Pour plus d'informations, consultez WebAssembly. Avec Chrome ou Chromium, utilisez la version 74 ou ultérieure, car WebAssembly ne fonctionne pas correctement sur les versions antérieures. Les appareils sous iOS 16.4 ou version antérieure, ainsi que la plupart des appareils Android milieu et entrée de gamme, ne prennent pas en charge le décodage logiciel des vidéos H.266.
  Performances du décodage logiciel	H.265 Sur ordinateur, les navigateurs peuvent lire des vidéos jusqu'à une résolution 2K en processus multithread, et jusqu'à 1080p en processus single-thread, avec une fréquence d'images maximale de 30 images par seconde (IPS). Sur mobile, les navigateurs peuvent lire des vidéos jusqu'à une résolution 720p en processus single-thread, avec une fréquence d'images maximale de 30 IPS. Les performances de décodage logiciel varient selon la puissance de la puce. Voici les puces prenant en charge le décodage logiciel en single-thread pour des vidéos 720p à 30 IPS : Snapdragon 855 ou version ultérieure Kirin 820 ou version ultérieure Tianjic 800 ou version ultérieure H.266 Sur ordinateur, les navigateurs peuvent lire des vidéos jusqu'à une résolution 1080p en processus multithread, et jusqu'à 720p en processus single-thread, avec une fréquence d'images maximale de 30 IPS. Sur mobile, les navigateurs peuvent lire des vidéos jusqu'à une résolution 720p en processus single-thread, avec une fréquence d'images maximale de 30 IPS. Les performances de décodage logiciel varient selon la puissance de la puce. Voici les puces prenant en charge le décodage logiciel en single-thread pour des vidéos 720p à 30 IPS : Snapdragon 855 ou version ultérieure Kirin 820 ou version ultérieure

Intégration du SDK ApsaraVideo Player for Web

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h265/test_480p_mp4_h265.mp4",
  enableH265: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h266/test_480p_mp4_h266.mp4",
  enableH266: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

{
  //... Configure other parameters.
  source: JSON.stringify({
      FD: '//h265_fd.mp4',
      HD: '//h265_hd.mp4'
    }),
}

Sélection de la méthode de décodage

Recours à un protocole de secours

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // If the API is not supported or a decoding error occurs, display a message or implement a fallback.
    }
});
player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps - The current number of frames decoded per second by the software decoder.
    // data.fps - The current frame rate of the video.
    // data.playbackRate - The current playback speed.
    // This event is triggered if decodedFps < (fps * playbackRate) persists for more than 5 seconds.
    // At this point, playback may stutter, and you should consider notifying the user or implementing a fallback.
});
                            

  var player;
  // Create a player
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    player.on('h265DecoderOverload', () => {
      // We recommend implementing the fallback after this event is triggered twice, as a single trigger may be due to a temporary decoding fluctuation.
      fallbackTo264(_options)
    })
    return player;
  }
  // Fallback function
  function fallbackTo264(_options) {
      // Set the source to the H.264 fallback video URL.
      _options.source = '//h264.mp4';
      // Disable enableH265 to skip codec detection.
      _options.enableH265 = false;
      createPlayer(_options);
  }
  // Initialize the player
  var options = {
    id: "player-con",
    source: "//h265.mp4",
    enableH265: true
  }
  createPlayer(options)

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // Notify the user or use a degraded protocol for playback if the API operation is not supported in your browser or video decoding failed.
    }
});          

  var player;
  // Create a player
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    return player;
  }
  // Fallback function
  function fallbackTo264(_options) {
      // Set the source to the H.264 fallback video URL.
      _options.source = '//h264.mp4';
      // Disable enableH266 to skip codec detection.
      _options.enableH266 = false;
      createPlayer(_options);
  }
  // Initialize the player
  var options = {
    id: "player-con",
    source: "//h266.mp4",
    enableH266: true
  }
  createPlayer(options)

API

Pour plus d'informations sur les attributs, les méthodes et les événements pris en charge par le SDK ApsaraVideo Player pour le Web, ainsi que sur leurs descriptions et exemples correspondants, consultez les API operations. La section suivante décrit les attributs, méthodes et événements pris en charge pour les vidéos H.265 et H.266 :

• Attributs pris en charge

  source, autoplay, rePlay, preload, cover, width, height, skinLayout, waitingTimeout, vodRetry, keyShortCuts et keyFastForwardStep

• Méthodes prises en charge

  play, pause, replay, seek, dispose, getCurrentTime, getDuration, getVolume, setVolume, loadByUrl, setPlayerSize, setSpeed, setSanpshotProperties, fullscreenService, getStatus, setRotate, getRotate, setImage, setCover, setProgressMarkers, setPreviewTime, getPreviewTime et isPreview

• Événements pris en charge

  ready, play, pause, canplay, playing, ended, hideBar, showBar, waiting, timeupdate, snapshoted, requestFullScreen, cancelFullScreen, error, startSeek, completeSeek, h265PlayInfo et h266PlayInfo

  Remarque

  Les rappels h265PlayInfo et h266PlayInfo renvoient la méthode de lecture utilisée pour la vidéo H.265 ou H.266. renderType indique la méthode de lecture, simd indique le traitement SIMD et wasmThreads indique le traitement multithread.

Codes d'erreur

Le tableau suivant décrit les codes d'erreur susceptibles d'être renvoyés en cas d'erreurs de lecture H.265 et H.266. Pour plus d'informations sur les autres codes d'erreur, consultez les API operations.

Activer le traitement multithread

Exemple

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

> self.crossOriginIsolated
< true
> SharedArrayBuffer
< ƒ SharedArrayBuffer() { [native code] }

[TEST LOG] [H265PlayInfo]
{
  codecTag: "hvc1",
  renderType: "wasm",
  simd: true,
  simdOption: true,
  wasmThreads: true,
  wasmThreadsOption: true
}

Décalage temporel

• Activation du décalage temporel

  • Vous devez activer la fonctionnalité de décalage temporel dans ApsaraVideo Live. Pour plus d'informations, consultez la rubrique Décalage temporel.

  • Le tableau suivant décrit les attributs que vous devez définir pour activer le décalage temporel pour un lecteur.

    Attribut	Description
    isLive	Définissez la valeur sur true.
    liveTimeShiftUrl	L'URL utilisée pour interroger les informations de décalage temporel.
    liveStartTime	L'heure de début du streaming en direct.
    liveOverTime	L'heure de fin du streaming en direct.
    liveShiftSource	L'URL HLS pour le décalage temporel. Remarque Cet attribut est requis uniquement pour les flux en direct FLV.
    liveShiftMinOffset	Un délai spécifique est nécessaire pour générer des segments TS lors du décalage temporel. Si vous effectuez une recherche vers une position extrêmement proche de l'heure actuelle du streaming en direct, la génération des segments TS échoue et une erreur 404 est signalée. Un délai minimum doit être spécifié entre la position de recherche et l'heure actuelle du streaming en direct. Vous pouvez définir ce paramètre pour spécifier un délai en secondes. Valeur par défaut : 30. Un segment est généré toutes les 10 secondes. Cela garantit l'existence d'au moins trois segments.

• Interface utilisateur de décalage temporel

  L'interface utilisateur de décalage temporel est principalement constituée d'une barre de progression, qui affiche l'heure dans la zone prenant en charge le décalage temporel.

  Remarque

  La zone horaire affiche l'heure de lecture actuelle, l'heure de fin du streaming en direct et l'heure actuelle du streaming en direct, de gauche à droite.

• Modification de l'heure de fin du streaming en direct

  Pendant la lecture, vous pouvez appeler la méthode liveShiftService.setLiveTimeRange pour ajuster les heures de début et de fin du flux en direct. L'interface utilisateur se met à jour en conséquence. Exemple :

  player.liveShiftSerivce.setLiveTimeRange(""'2018/01/04 20:00:00')

• FLV pour le streaming en direct et HLS pour le décalage temporel

  Pour réduire la latence, nous vous recommandons d'utiliser FLV pour le streaming en direct et HLS pour le décalage temporel.

  Configurations du SDK ApsaraVideo Player pour le Web :

  • source : l'URL du flux en direct au format FLV.

  • liveShiftSource : l'URL du flux de décalage temporel au format HLS.

  Exemple de code :

  {
   source:'http://localhost/live****/example.flv',
   liveShiftSource:'http://localhost/live****/example.m3u8',
  }

Déploiement personnalisé

Par défaut, les ressources d'ApsaraVideo VOD, telles que les fichiers JavaScript et CSS, sont stockées dans Alibaba Cloud CDN. Pour déployer ces ressources sur votre serveur, procédez comme suit :

1. Téléchargez les ressources du SDK ApsaraVideo Player.

   Outre les deux fichiers principaux, aliplayer-min.js et aliplayer-min.css, le SDK ApsaraVideo Player pour le Web référence également dynamiquement d'autres fichiers de ressources. Par conséquent, vous devez d'abord obtenir le dossier de ressources complet.

   Lien de téléchargement : apsara-media-box-imp-web-player-dist.tar.gz

2. Décompressez le package et déployez les fichiers.

   Décompressez le package de ressources et déployez tous les fichiers du dossier sur votre serveur. Veillez à ne pas modifier les niveaux de répertoire des fichiers.

3. Initialisez le lecteur dans un chemin d'accès personnalisé.

   L'exemple de code suivant fournit des exemples d'URL pour les fichiers CSS et JavaScript en cas de déploiement personnalisé :

   https://player.alicdn.com/assets/skins/default/aliplayer-min.css
   https://player.alicdn.com/assets/aliplayer-min.js

   Procédez comme suit pour initialiser le lecteur :

   1. Référencez les URL des fichiers CSS et JavaScript dans la partie supérieure de la page.

      <head>
        <link rel="stylesheet" href="https://player.alicdn.com/assets/skins/default/aliplayer-min.css" />
        <script charset="utf-8" type="text/javascript" src="https://player.alicdn.com/assets/aliplayer-min.js"></script>
      </head>

   2. Initialisez le lecteur et spécifiez le paramètre assetPrefix.

      Le paramètre assetPrefix spécifie le préfixe de votre adresse de déploiement personnalisé. Si le lecteur est utilisé pour lire une vidéo HLS, il référence dynamiquement le fichier https://player.alicdn.com/assets/hls/aliplayer-hls2-min.js. Assurez-vous que le fichier est placé à la bonne adresse.

      new Aliplayer({
        assetPrefix: 'https://player.alicdn.com/assets'
        // Specify other parameters.
      })

Références

• Composants

• API operations

• FAQ sur le SDK ApsaraVideo Player pour le Web

• Personnalisation des composants

• Personnalisation de l'interface utilisateur des erreurs pour le lecteur HTML5

• Gestion des erreurs et reprise du streaming en direct