Plugin d'interface utilisateur Playlist

Aperçu

Le plug-in d'interface utilisateur de playlist contient les options que vous pouvez utiliser pour personnaliser le comportement de la playlist. Les nombreuses options apportent des modifications aux listes de lecture, y compris leur mise en page, leurs comportements et leurs stratégies de mise en œuvre. Les exemples suivants montrent les deux dispositions de base pour les listes de lecture, verticale et horizontale. Pour chaque exemple, un petit ensemble de comportements est répertorié pour une introduction de ce qui peut être personnalisé.

Disposition verticale

Cet exemple de liste de lecture ci-dessous illustre :

La liste de lecture verticale située sur le côté droit du lecteur a un bouton afficher / masquer et la liste de lecture est automatiquement dimensionnée et positionnée. Il s'agit du comportement par défaut lors de l'utilisation de Standard (iframe) implémentation du joueur.
La liste de lecture s'affiche initialement. Cela peut être modifié en utilisant le hideOnStart option.
Vers la fin de la vidéo, une superposition apparaît qui affiche l'heure de la vidéo suivante et la vignette de la vidéo suivante. Il s'agit du comportement par défaut et contrôlé via le nextOverlay option.

Disposition horizontale

Cet exemple de liste de lecture ci-dessous illustre :

Une liste de lecture horizontale située sous la vidéo.
En plus de l'affichage de la superposition vers la fin de la vidéo, comme c'est le cas dans l'exemple ci-dessus, un écran de fin affiche le temps avant le début de la lecture de la vidéo suivante. C'est parce que le autoadvance L'option est différente de zéro et l'écran final s'affiche pour la pause entre les vidéos. L'écran final peut être modifié en utilisant le nextEndscreen option.

Association joueur / playlist

Par défaut, le plug-in d'interface utilisateur de liste de lecture gérera la recherche du bon élément de conteneur de liste de lecture pour un lecteur donné. Cela signifie qu'il trouvera le premier vide .vjs-playlist élément dans le DOM et utilisez-le. Cependant, le plugin propose des associations plus explicites qui peuvent être faites entre un lecteur et un conteneur de playlist lorsque vous créez des flux de travail complexes avec plusieurs lecteurs.

`data-for` attribut

le data-for l'attribut peut être appliqué au conteneur de playlist pour l'associer à un joueur id , par exemple:

<video-js id="myPlayerID"
  ...></video-js>

<div class="vjs-playlist" data-for="myPlayerID"></div>

Il s'agit de la méthode d'association explicite la plus spécifique disponible. Il a priorité sur les autres méthodes.

`data-player` et `data-embed` les attributs

le data-player et data-embed Les attributs peuvent être appliqués au conteneur de playlist pour l'associer à un Brightcove Player. Notez que les deux attributs doivent être utilisés pour que l'associé fonctionne correctement. Dans l'exemple suivant, seul le second <div> La balise contiendra la liste de lecture du lecteur lorsqu'une association spécifique est établie. La première <div> sera vide.

<video-js data-playlist-id="5455901760001"
	data-account="1507807800001"
	data-player="SJLNAJye7"
	data-embed="default"...></video-js>
<script src="https://players.brightcove.net/1507807800001/SJLNAJye7_default/index.min.js"></script>

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

<div class="vjs-playlist" data-player="SJLNAJye7" data-embed="default"></div>

Options

Vous pouvez transmettre un objet options au plugin lors de l'initialisation. Cet objet peut contenir l'une des options suivantes :

avance automatique

autoadvance:
- Type: number
- Défaut : undefined
- Détermine si, et pendant combien de temps, une pause entre les vidéos d'une playlist se produit. Pour plus de détails, consultez le section autoadvance dans le guide de l'API Playlist.

hideOnStart

:hideOnStart
- Type: boolean
- Défaut : false
- Détermine si la liste de lecture est initialement masquée de la vue. Ceci n'est fonctionnel que lors de l'utilisation du iframe l'implémentation du lecteur, ce qui est logique puisque la fonctionnalité afficher / masquer la playlist n'est disponible que dans l'iframe. Cette option ne fonctionne PAS avec une liste de lecture horizontale.
- Exigences et dépendances :
  - playlistPicker: true
  - iFrame Intégrer
  - horizontal: false

horizontal

:horizontal
- Type: boolean
- Défaut : false
- Affiche la liste de lecture horizontalement sous le lecteur au lieu de verticalement.
- Exigences et dépendances :
  - playlistPicker: true

nextButton

:nextButton
- Type: boolean
- Défaut : true
- Si true , un bouton est ajouté pour passer à l'élément suivant de la playlist. Le bouton peut être désactivé en définissant l'option sur false. Le bouton est ajouté à la barre de contrôle à droite du bouton de lecture.

suivantEndscreen

:nextEndscreen
Type: boolean
Défaut : true
Si true , le lecteur affichera un écran final modal sur le lecteur après la lecture. L'écran final peut être désactivé en définissant l'option sur false. Cet écran de fin affichera un aperçu de la vidéo à venir dans la playlist. Les détails du mode sur cette option sont les suivants :
- le autoadvance L'option doit être définie sur une valeur supérieure à zéro (sinon, il n'y a pas de temps pour afficher l'écran final et il est ignoré).
- Le compte à rebours affiché représente le temps restant jusqu'à ce que autoadvance déclencheur.
- Le joueur doit ne pas inclure une implémentation du plugin personnalisé de l'écran final ou du plugin social configuré pour s'afficher après une vidéo. Si l'une ou l'autre condition est détectée, l'écran final ne sera pas affiché.

suivantOverlay

:nextOverlay
- Type: boolean
- Défaut : true
- Si true , le lecteur affichera une petite superposition dans le coin inférieur droit du lecteur. La superposition peut être désactivée en définissant l'option sur false. Cette superposition affichera un aperçu de la vidéo à venir dans la playlist. Les détails du mode sur cette option sont les suivants :
  - Il doit y avoir un élément de playlist suivant.
  - le autoadvance L'option doit être définie supérieure ou égale à zéro.
  - Le compte à rebours représente le temps restant dans la vidéo plus tout autoadvance temps d'attente.
  - La superposition apparaît à 10 secondes de la fin de la vidéo. Cependant, si la vidéo dure moins de 30 secondes, elle apparaît aux 2/3 de la durée.
  - Si la superposition est ignorée par l'utilisateur, elle le restera jusqu'à ce que la source soit modifiée. Il réapparaîtra pour les nouvelles sources.
  - Si la Up Next endscreen est activée, la superposition se masquera à la fin de la vidéo. Sinon, il restera ouvert jusqu'à la prochaine vidéo.

playlist

playlist:
- Type: array
- Défaut : undefined
- Utilisé pour transmettre les données de la playlist initiale. Pour plus de détails, consultez le section playlist dans le guide de l'API Playlist.

playlistPicker

:playlistPicker
- Type: boolean
- Défaut : true
- Détermine s'il faut ou non inclure une liste visuelle de vidéos dans la liste de lecture afin que l'utilisateur puisse cliquer dessus. le hideOnStart et horizontal les options modifient son apparence et son comportement. Quand playlistPicker est false , d'autres éléments de l'interface utilisateur peuvent toujours être affichés à l'aide de nextButton , nextEndscreen et nextOverlay options.

Jouer sur Select

playOnSelect:
- Type: boolean
- Défaut : false
- le playOnSelect L'option permet de contrôler si la lecture de la vidéo doit commencer lorsque l'utilisateur clique sur une vidéo dans la playlist. Lorsque l'option est définie sur true , la sélection d'une nouvelle vidéo dans la liste de lecture lancera la lecture de cette vidéo, même si le lecteur était précédemment mis 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.
- Exigences et dépendances :
  - playlistPicker: true

répéter

:repeat
- Type: boolean
- Défaut : false
- Répète une liste de lecture après avoir terminé la dernière vidéo de la liste de lecture. 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.

montrer la description

:showDescription
- Type: boolean
- Défaut : false
- Affichez les descriptions vidéo de chaque élément de la playlist.

mélanger

:shuffle
- Type: boolean
- Défaut : false
- Mélangez les éléments de la liste de lecture à chaque fois que de nouvelles données sont chargées.

Utiliser les options

Vous pouvez utiliser cette option de deux manières :

Dans les studios JOUEURS> PLUGINS section.
Utiliser JavaScript avec le lecteur.

Utilisation de Studio

Dans Studio, si vous avez sélectionné le lecteur pour utiliser les listes de lecture dans les propriétés du lecteur ' Coiffant section, vous pouvez définir certaines des options ci-dessus dans l'interface utilisateur. Les options suivantes sont disponibles dans le Relecture section pour les lecteurs de playlist:

Si vous sélectionnez Mode de lecture continue vous pouvez choisir un Compte à rebours vidéo option. La représentation visuelle des choix est présentée ici:

Jusqu'à la prochaine carte

Au prochain écran de fin

Option d'écran de fin de liste de lecture

Utilisation de JavaScript

Pour implémenter les options dans le code, vous créez un objet, attribuez aux options souhaitées leurs valeurs respectives, puis transmettez l'objet options lors de l'appel du plugin :

videojs.getPlayer('myPlayerID').ready(function() {
 var myPlayer = this,
  options = {};
  options.horizontal = true;
  options.nextButton = false;
  myPlayer.bcPlaylistUi(options);
});

Changelog

Voir le Notes de version du plug-in d'interface utilisateur de liste de lecture.

Pour les notes de version historiques, voir le changelog ici.