Diaporama en boucle plein écran d'images et de fichiers vidéo en JavaScript

Récemment, j'ai pensé que ce serait bien de convertir un tas de GIF au format MP4 pour économiser de l'espace sur les cartes mémoire. Je voulais m'assurer que les fichiers vidéo résultants pouvaient être visionnés en boucle. QuickLook sur Mac, malheureusement, ne fait pas cela.

Diaporama



J'ai donc abordé mon problème moi-même et créé rapidement un petit projet en pur JavaScript qui m'a donné ce dont j'avais besoin. Ici, vous pouvez l'expérimenter. Et voici une vidéo le démontrant en action.

Opportunités

Parmi les possibilités de mon projet JavaScript pour organiser des diaporamas en boucle, je tiens à noter ce qui suit:

• .
• . (- «» «» , «» .)
• - X .
• - , .
• -. , .

Afin d'utiliser un diaporama sur une page HTML, le programme doit fournir un conteneur dans lequel il créera ses éléments, et définira ses paramètres en définissant les valeurs des propriétés de l'objet slideshow



. Ces propriétés sont:

• container
  
  
  
  : une référence à l'élément HTML dans le DOM où le diaporama doit être placé.
• media
  
  
  
  : un tableau avec les noms des fichiers vidéo et des images à afficher.
• folder
  
  
  
  : le dossier contenant les matériaux ci-dessus, qui doit être un sous-répertoire du dossier contenant les fichiers qui implémentent la fonctionnalité de diaporama.
• autoplay
  
  
  
  : Propriété qui indique si le diaporama doit être lu automatiquement. Il peut contenir l'une des deux valeurs suivantes: yes
  
  
  
  (lecture automatique activée) ou no
  
  
  
  (lecture automatique désactivée).
• speed
  
  
  
  : durée en millisecondes que le programme tiendra avant de passer à l'affichage du matériau suivant (par exemple, une valeur de 1000 signifie 1 seconde).

<div id="slideshow-container"></div>
<script>
  let slideshow = {
    container: '#slideshow-container',
    media: [
    'ball.mp4','dinowalk.mp4','dirty.mp4',
    'goldiejump.mp4','step.mp4','tippy.mp4','wag.mp4'
    ],
    folder: 'imgs/',
    autoplay: 'yes'
  }
</script>
<script src="slideshow.js"></script>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Travail automatique avec des collections de fichiers multimédias

J'utilise actuellement ce projet sur un serveur local à l'aide d'un script index.php



. Pour quelqu'un sur un Mac, PHP est déjà installé. Par conséquent, pour démarrer le projet, il vous suffit d'ouvrir le terminal, d'aller dans le dossier avec les matériaux du projet et d'exécuter la commande suivante:

$ php -S localhost:8000

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ensuite, en utilisant le navigateur, vous pouvez accéder à l'adresse localhost:8000



, et le programme fera le reste tout seul.



En particulier, le script index.php



trouvera tous les dossiers dans le même répertoire que le script et les listera. Si vous cliquez sur le nom de l'un des dossiers, la lecture des fichiers à partir de celui-ci commencera. Vous pouvez facilement consulter le code de ce script, mais je dirai tout de suite qu'il n'y a rien de spécial à ce sujet.



Le code index.php



se trouve dans le référentiel du projet. Pour commencer à montrer vos propres diaporamas, vous pouvez cloner le référentiel ou le télécharger en tant qu'archive ZIP.



Comment résoudriez-vous le problème de l'affichage de diaporamas en boucle?