Guide de l'API de playlist

Aperçu

Les méthodes, événements et options de configuration suivants sont disponibles dans le cadre de l'API:

Exemple

Le Brightcove Player suivant a une liste de lecture chargée et à l'aide des boutons, vous pouvez vous déplacer dans la liste de lecture.

Vidéo suivante

Vidéo précédente

Aller à la 4e vidéo

Objet d'élément de liste de lecture

méthode autoadvance ()

le player.playlist.autoadvance( ) La méthode agit uniquement comme un setter et définit l'avancement automatique de la playlist. Une fois activé, il attendra le nombre de secondes spécifié à la fin d'une vidéo avant de passer automatiquement à la vidéo suivante. Toute valeur qui n'est pas un entier fini positif sera traitée comme une demande d'annulation et de réinitialisation de l'avance automatique. Si vous modifiez la fonction d'avance automatique pendant une période de temporisation, l'avance automatique sera annulée et ne passera pas à la vidéo suivante, mais elle utilisera la nouvelle valeur de temporisation pour les vidéos suivantes.

Paramètre :

• :timeout Un nombre entier en secondes à retarder avant de charger la vidéo suivante dans la playlist

Valeur renvoyée :

La méthode ne renvoie pas de valeur.

Voici des exemples d'utilisations de la méthode:

player.playlist.autoadvance(0); N'attendra pas avant de charger l'article suivant

player.playlist.autoadvance(5); Attend 5 secondes avant de charger l'élément suivant

player.playlist.autoadvance(null); Réinitialise et annule l'avance automatique

contient (), méthode

le player.playlist.contains( item ) vérifie une liste de lecture pour la présence de l'objet dans le item paramètre. Si la item est dans la playlist true est retourné, s'il n'est pas présent false est retourné.

Paramètres :

• item: Valeur qui représente un élément vidéo dans la liste de lecture.

Les formulaires valides pour le paramètre article sont les suivants :

• URL vers une vidéo sous forme de chaîne

  '//media.w3.org/2010/05/sintel/trailer.mp4'

• Tableau contenant un objet avec la source et le type définis

  [{
    src: '//media.w3.org/2010/05/sintel/poster.png',
    type: 'image/png'
  }]

• Objet contenant un élément du tableau de sources

  {
    sources: [{
      src: '//media.w3.org/2010/05/sintel/trailer.mp4',
      type: 'video/mp4'
    }]
  }

• Dans Video Cloud, vous pouvez utiliser le currentSrc() méthode avec la contains() pour être sûr que la vidéo en cours de lecture provient de la liste de lecture actuellement chargée.

  myPlayer.playlist.contains(myPlayer.currentSrc());

Valeur renvoyée :

La méthode retourne un objet de type boolean.

méthode currentIndex ()

le player.playlist.currentIndex( ) La méthode récupère l'index de l'élément actuel dans la liste de lecture. C'est identique à appeler currentItem() sans arguments.

Paramètre :

• Aucune

Valeur renvoyée :

La méthode renvoie une valeur de type number. La valeur renvoyée représente la position du tableau de la vidéo en cours de lecture dans le lecteur. Si le lecteur lit actuellement une vidéo sans playlist, currentIndex() reviendra -1.

méthode currentItem ()

Le player.playlist.currentItem(index) procédé agit à la fois comme un getter et un setter, soit en récupérant l'index actuel de la vidéo à partir de la liste de lecture lue dans le lecteur, soit en assignant une nouvelle vidéo à lire dans le lecteur, sur la base de l'index. Si elle est appelée sans argument, la méthode effectue la récupération et agit comme un getter, avec un argument attribue la valeur et agit comme un setter.

Paramètre (setter) :

• :index Un nombre qui représente l'index de tableau de base zéro de la liste de lecture de la vidéo à charger dans le lecteur.

Valeur renvoyée (getter) :

La méthode renvoie une valeur de type number. La valeur renvoyée représente la position du tableau de la vidéo en cours de lecture dans le lecteur. Si le lecteur lit actuellement une vidéo sans playlist, currentItem() reviendra -1.

Voici un exemple d'utilisation de la méthode dans une fonction pour accéder à une vidéo spécifique:

function goto2(){
  myPlayer.playlist.currentItem(2);
}

méthode first ()

le player.playlist.first() La méthode lit le premier élément de la liste de lecture. La nouvelle vidéo jouée dans le lecteur sera renvoyée à partir de cet appel de méthode. Le currentItem sera mis à jour avec le nouvel index.

Paramètres :

• Aucune

Valeur renvoyée :

La méthode retourne un objet de type object. Voici un exemple de cet objet pour une liste de lecture créée manuellement :

Voici un exemple de cet objet pour une playlist Video Cloud :

Voici un exemple d'utilisation de la méthode dans une fonction pour passer à la vidéo suivante :

function goToBeginning() {
  var nextVidObject = myPlayer.playlist.first();
}

indexOf (), méthode

le player.playlist.indexOf( item ) vérifie la liste de lecture pour la présence de l'objet dans le item et, s'il est trouvé, renvoie l'index de base zéro de l'élément. La méthode renvoie -1 si l'élément n'est pas trouvé.

Paramètres :

• item: Valeur qui représente un élément vidéo dans la liste de lecture.

Les formulaires valides pour le paramètre article sont les suivants :

• URL vers une vidéo sous forme de chaîne

  '//media.w3.org/2010/05/sintel/trailer.mp4'

• Tableau contenant un objet avec la source et le type définis

  [{
    src: '//media.w3.org/2010/05/sintel/poster.png',
    type: 'image/png'
  }]

• Objet contenant un élément du tableau de sources

  {
    sources: [{
      src: '//media.w3.org/2010/05/sintel/trailer.mp4',
      type: 'video/mp4'
    }]
  }

• Dans Video Cloud, vous pouvez utiliser currentSrc() méthode avec la indexOf() méthode pour trouver l'emplacement de la vidéo en cours de lecture dans la liste de lecture.

  myPlayer.playlist.indexOf(myPlayer.currentSrc());

Valeur renvoyée :

La méthode renvoie une valeur de type number. La valeur représente la position indexée à zéro de l'élément, ou -1 si l'objet est introuvable.

méthode last ()

le player.playlist.last() La méthode lit le dernier élément de la liste de lecture. La nouvelle vidéo jouée dans le lecteur sera renvoyée à partir de cet appel de méthode. Le currentItem sera mis à jour avec le nouvel index.

Paramètres :

• Aucune

Valeur renvoyée :

La méthode retourne un objet de type object. Voici un exemple de cet objet pour une liste de lecture créée manuellement :

Voici un exemple de cet objet pour une playlist Video Cloud :

Voici un exemple d'utilisation de la méthode dans une fonction pour passer à la vidéo suivante :

function goToEnd() {
  var nextVidObject = myPlayer.playlist.last();
}

méthode lastIndex ()

le player.playlist.lastIndex( ) renvoie l'index du dernier élément de la liste de lecture.

Paramètre :

• Aucune

Valeur renvoyée :

La méthode renvoie une valeur de type number. La valeur renvoyée représente la position du tableau de la dernière vidéo de la playlist.

méthode next ()

le player.playlist.next() La méthode fait passer le lecteur à l'élément suivant de la liste de lecture. La nouvelle vidéo jouée dans le lecteur sera renvoyée à partir de cet appel de méthode. Le currentItem sera mis à jour avec le nouvel index. Si vous êtes à la fin de la liste de lecture, vous ne pourrez pas continuer après la fin et rien ne sera retourné.

Paramètres :

• Aucune

Valeur renvoyée :

La méthode retourne un objet de type object. Voici un exemple de cet objet pour une liste de lecture créée manuellement :

Voici un exemple de cet objet pour une playlist Video Cloud :

Voici un exemple d'utilisation de la méthode dans une fonction pour passer à la vidéo suivante :

function nextVideo() {
  var nextVidObject = myPlayer.playlist.next();
}

méthode nextIndex ()

le player.playlist.nextIndex( ) renvoie l'index de l'élément suivant dans la liste de lecture.

Paramètre :

• Aucune

Valeur renvoyée :

La méthode renvoie une valeur de type number. La valeur renvoyée représente la position du tableau de la prochaine vidéo qui sera lue dans la liste de lecture.

Si le joueur est sur le dernier élément, cette méthode renvoie l'index du dernier élément. Cependant, si la liste de lecture se répète et se trouve sur le dernier élément, la méthode retourne 0. Si le lecteur lit actuellement une vidéo sans playlist, il retournera -1.

méthode playlist ()

le player.playlist(newPlayList) agit à la fois comme un getter et un setter, soit en récupérant la liste de lecture en cours de lecture dans le lecteur, soit en attribuant une liste de lecture au lecteur à lire. Si elle est appelée sans argument, la méthode effectue la récupération et agit comme un getter, avec un argument attribue la valeur et agit comme un setter.

Paramètre (setter) :

• :newPlaylist Un tableau de sources / objets vidéo. Les objets peuvent être créés manuellement ou simplement un ID de playlist ou un ID de référence Video Cloud.

Bien que vous puissiez utiliser le playlist() en tant que setter, il est recommandé d'utiliser la fonctionnalité de catalogue de Brightcove Player pour charger une playlist, par exemple myPlayer.catalog.getPlaylist( playlistID ) et myPlayer.catalog.load( playlist ). Voir le Catalogue des joueurs document pour plus d'informations.

Voici un exemple d'utilisation de la méthode avec une liste de lecture créée manuellement:

myPlayer = this;
myPlayer.playlist([{
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_SeaHorse.mp4", "type": "video/mp4"
  }],
  "name": "Seahorse",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_Anemone.mp4", "type": "video/mp4"
  }],
  "name": "Sea Anemone",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4", "type": "video/mp4"
  }],
  "name": "Tiger",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Tiger_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_ClownFish.mp4", "type": "video/mp4"
  }],
  "name": "Clownfish",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_LionFish.mp4", "type": "video/mp4"
  }],

Valeur renvoyée (getter) :

La méthode renvoie un array of objects.

Voici un exemple de liste de lecture Video Cloud renvoyée (un tableau d'objets vidéo Video Cloud):

L'exemple suivant montre l'utilisation de l'objet de catalogue getPlaylist() et load() méthodes pour charger une playlist Video Cloud. Comme mentionné précédemment, il s'agit de l'approche recommandée lors de l'utilisation de listes de lecture Video Cloud. Pour plus d'informations, consultez le Catalogue des joueurs document.

myPlayer = this;
myPlayer.catalog.getPlaylist('1754200320001', function(error, playlist){
  myPlayer.catalog.load(playlist);
  console.log('mediainfo', myPlayer.mediainfo);
)};

console.log('playlist id: ', myPlayer.options()['data-playlist-id']);

méthode previous ()

le previous() La méthode lit l'élément précédent de la liste de lecture. La nouvelle vidéo jouée dans le lecteur sera renvoyée à partir de cet appel de méthode. Le currentItem sera mis à jour avec le nouvel index. Si vous êtes au début de la playlist, vous ne pourrez pas continuer après le début et rien ne sera retourné.

Paramètres :

• Aucune

Valeur renvoyée :

La méthode retourne un objet de type object. Voici un exemple de cet objet pour une liste de lecture créée manuellement :

Voici un exemple de cet objet pour une playlist Video Cloud :

Voici un exemple d'utilisation de la méthode dans une fonction pour passer à la vidéo précédente:

function previousVideo() {
  myPlayer.playlist.previous();
}

méthode previousIndex ()

le player.playlist.previsousIndex( ) renvoie l'index de la vidéo qui suit la vidéo en cours de lecture dans le lecteur.

Paramètre :

• Aucune

Valeur renvoyée :

La méthode renvoie une valeur de type number. La valeur renvoyée représente la position du tableau de la vidéo qui suit la vidéo en cours de lecture dans le lecteur.

Si le joueur est sur le premier élément, la méthode retourne 0. Cependant, si la liste de lecture se répète et se trouve sur le premier élément, renvoie l'index du dernier élément. Si le lecteur lit actuellement une vidéo sans playlist, il retournera -1.

méthode repeat ()

Vous pouvez répéter une liste de lecture après avoir terminé la dernière vidéo de la liste de lecture en utilisant le playlist.repeat() méthode. Cette fonctionnalité lit la première vidéo de la liste de lecture une fois la dernière vidéo de la liste de lecture terminée.

Paramètres :

• Valeur booléenne indiquant si la liste de lecture doit se répéter ou non; la valeur par défaut est false

Valeur renvoyée :

La valeur actuelle de playlist.repeat

La méthode définit la valeur en passant soit true ou false comme argument. Si aucun argument n'est utilisé, la méthode renvoie la valeur actuelle. Le code suivant montre l'implémentation:

• Lignes 1 à 11: Code de lecteur de liste de lecture standard sauf un id est ajouté avec une valeur de myPlayerID.
• Ligne 16 : Règle la liste de lecture à répéter.
• Ligne 17 : Affiche la méthode en action en tant que getter. Affiche dans la console la valeur de repeat.

<video-js id="myPlayerID"
    data-playlist-id="5455901760001"
    data-account="1507807800001"
    data-player="SyMOsyA-W"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/SyMOsyA-W_default/index.min.js"></script>

  <div class="vjs-playlist"></div>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.playlist.repeat(true);
    console.log('myPlayer.repeat()',myPlayer.playlist.repeat());
  });
</script>

méthode reverse ()

le player.playlist.reverse( ) modifie l'ordre des vidéos dans la liste de lecture afin que la première vidéo devienne la dernière et la dernière vidéo devienne la première.

Paramètre :

• Aucune

Valeur renvoyée :

La méthode ne renvoie pas de valeur.

Inverse l'ordre des vidéos de la liste de lecture. Par exemple, la première vidéo devient la dernière et la dernière vidéo devient la première.

La méthode distribue l' playlistsorted événement après l'inversion.

méthode shuffle ()

le player.playlist.shuffle( ) La méthode mélange / randomise l'ordre des éléments de la playlist.

Paramètre :

• Optionnel rest option: Par défaut, la liste de lecture entière est aléatoire. Cependant, cela peut ne pas être souhaitable dans tous les cas, par exemple lorsqu'un utilisateur regarde déjà une vidéo. Quand true est passé pour cette option, il ne mélangera que les éléments de la liste de lecture après l'élément actuel. Par exemple, sur le premier élément, la méthode ne mélangera que le deuxième élément et au-delà. La syntaxe pour utiliser le paramètre est:

  player.playlist.shuffle({rest: true});

Valeur renvoyée :

La méthode ne renvoie pas de valeur.

Cette méthode mélange les éléments de la liste de lecture à l'aide du Algorithme de mélange Fisher-Yates.

La méthode envoie le playlistsorted événement après la lecture aléatoire.

Si vous souhaitez mélanger une liste de lecture lors du premier chargement du lecteur, vous devez utiliser ce méthode dans un gestionnaire d'événements pour le playlistsorted un événement. Cela empêche la condition où la méthode essaie de mélanger la liste de lecture avant qu'elle ne soit chargée dans le lecteur. Exemple de syntaxe:

myPlayer.on("duringplaylistchange", function() {
  myPlayer.playlist.shuffle();
});

méthode sort ()

le player.playlist.sort( ) La méthode trie les vidéos dans une playlist d'une manière identique à celle de JavaScript Array.prototype.sort () méthode.

Paramètre :

• :compareFunction Une fonction qui définit comment les vidéos doivent être triées.

Valeur renvoyée :

La méthode ne renvoie pas de valeur.

Un exemple d'utilisation de la méthode pour trier les vidéos par duration suit:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.on('loadedmetadata', function(){
    myPlayer.playlist.sort(function(a, b) {
      return a.duration - b.duration;
    });
  });
});

La méthode distribue l' playlistsorted événement après l'inversion.

événement beforeplaylistitem

le beforeplaylistitem l'événement est envoyé avant de passer à une nouvelle source de contenu dans une liste de lecture (c'est-à-dire lorsque currentItem() , first() , etc. est appelé) mais avant que l'état du joueur ne soit changé.

événement pendantplaylistchange

le duringplaylistchange l'événement est distribué après la modification du contenu de la liste de lecture lors de l'appel playlist() , mais avant que l'élément actuel de la playlist ne soit modifié. L'objet événement a plusieurs propriétés spéciales:

• :nextIndex L'index de la prochaine liste de lecture qui sera lue en premier.
• :nextPlaylist Un clone superficiel de la prochaine playlist.
• :previousIndex L'index de la playlist précédente (correspondra toujours à l'index actuel lorsque cet événement se déclenche, mais est fourni par souci d'exhaustivité).
• :previousPlaylist Un clone superficiel de la playlist précédente.

mises en garde

Lors du déclenchement de cet événement, la playlist est considérée comme étant dans un état changeant, ce qui a les effets suivants:

• Appel de la méthode de la playlist principale, player.playlist([...]) lancera une erreur.
• Méthodes de navigation de la playlist, first , last , next et previous , sont rendus inopérants.
• le currentItem() La méthode n'agit que comme un getter.
• Alors que les méthodes de tri, sort , reverse et shuffle , continueront à fonctionner, ils n'envoient pas le playlistsorted un événement.
•  

Pourquoi utiliser cet événement

Cet événement offre la possibilité d'intercepter le processus de réglage de la playlist avant qu'une nouvelle source soit définie sur le lecteur et avant le playlistchange l'événement se déclenche, tout en fournissant une API de playlist cohérente. Un cas d'utilisation peut être la lecture aléatoire d'une liste de lecture qui vient juste d'un serveur, mais avant que sa source initiale ne soit chargée dans le lecteur ou que l'interface utilisateur de la liste de lecture ne soit mise à jour:

player.on('duringplaylistchange', function() {
  // Remember, this will not trigger a "playlistsorted" event!
  player.playlist.shuffle();
});

player.on('playlistchange', function() {
  videojs.log('The playlist was shuffled, so the UI can be updated.');
});

événement playlistchange

le playlistchange L'événement est distribué de manière asynchrone chaque fois que la liste de lecture est modifiée. Lorsque cet événement est envoyé, le lecteur commencera à charger la première vidéo dans la nouvelle playlist. Il est déclenché de manière asynchrone pour permettre au navigateur de commencer à charger la première vidéo dans la nouvelle playlist.

événement playlistitem

le playlistitem l'événement est distribué lors du passage à une nouvelle source de contenu dans une liste de lecture (c'est-à-dire lorsque l'un des currentItem() , first() , etc. est appelé) après que l'état du lecteur a été modifié, mais avant la reprise de la lecture.

événement trié

le playlistsorted l'événement est distribué lorsqu'une méthode est appelée qui modifie l'ordre des éléments de la playlist, ceux-ci étant sort() , reverse() ou shuffle().

Jouer sur Select

Cette valeur est une option de configuration qui, lorsqu'elle est définie sur true déclenche la lecture d'une vidéo sur laquelle vous avez cliqué dans la liste de lecture, même si la vidéo actuelle dans le lecteur a été précédemment mise en pause. Par défaut, le fait de cliquer sur une nouvelle vidéo de la liste de lecture chargera la nouvelle vidéo, mais le lecteur reste en pause si elle a été préalablement interrompue.

Vous trouverez des informations sur la manipulation de cette valeur dans le Guide de configuration du lecteur - section Playlists.

Listes de lecture visuelles

Si vous souhaitez avoir une représentation visuelle de la liste de lecture dans votre page, vous devez configurer le lecteur pour le faire. Vous pouvez mettre à jour la configuration à l'aide de Studio, dans le PLAYERS > Styling section, comme indiqué ici (vous pouvez choisir une liste de lecture verticale ou horizontale):

Si vous le souhaitez, vous pouvez également utiliser l'API de gestion du lecteur pour configurer votre lecteur pour les listes de lecture. Voir le Playlists section de la Guide de configuration du lecteur pour des informations complètes.

Vous pouvez vérifier par programme si les listes de lecture sont activées en vérifiant si la valeur de player.playlistUi est défini.

console.log('myPlayer.playlistUi:', myPlayer.playlistUi);