Diaporama

Lecture automatique pour les collections d'images.

image

Aperçu

Props & options interactives

Prop	Type	Défaut	Description	Essayer
enable_slideshow	url param	0	Afficher le bouton lecture/pause du diaporama (active aussi la boucle).
slideshow_duration	url param	5	Durée d'affichage de chaque image, en secondes (2–15).	5s
collection_display_mode	url param	drawer	Disposition de la navigation dans la collection : drawer, bottom-bar ou sidebar.

Essayez dans le player

Pause au survol

Le diaporama se met automatiquement en pause quand le pointeur entre dans le viewer et reprend quand il en sort, pour que les visiteurs puissent s'attarder sur une image sans perdre leur place.

Documentation

Affichez un bouton lecture/pause de diaporama dans la barre d'outils pour que les visiteurs fassent défiler automatiquement la collection. Chaque image reste à l'écran pendant slideshow_duration secondes et le viewer enchaîne en fondu. Activer le diaporama fait aussi reboucler la collection à la fin. La transition respecte prefers-reduced-motion et bascule sur un changement instantané pour les visiteurs qui ont désactivé les animations. À noter : enable_slideshow=1 ne fait qu'afficher le bouton — c'est le visiteur qui lance la lecture en cliquant dessus.

Code

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe
    src="https://app.videas.com/embed/019dcfd1-c6e7-76c4-9306-fff87f028620/?enable_slideshow=1&slideshow_duration=5&collection_display_mode=drawer"
    width="100%" height="100%"
    frameborder="0" allowfullscreen
    allow="fullscreen"
    style="position:absolute;top:0;left:0"
  ></iframe>
</div>

Questions fréquentes

Le diaporama continue-t-il à tourner dans un onglet en arrière-plan ?

Non. Le viewer utilise l'API Page Visibility pour se mettre en pause lorsque l'onglet est masqué et reprend automatiquement quand il redevient visible, ce qui économise le CPU et respecte la concentration des visiteurs.

Que se passe-t-il à la fin de la playlist ?

Par défaut, le diaporama reboucle sur la première image. Un futur paramètre <code>loop=0</code> permettra de s'arrêter à la dernière image et d'afficher à la place un bouton « Recommencer ».