Vollbild-Loop-Diashow mit Bildern und Videodateien in JavaScript

Kürzlich dachte ich, es wäre schön, eine Reihe von GIFs, die ich habe, in das MP4-Format zu konvertieren, um Platz auf Speicherkarten zu sparen. Ich wollte sicherstellen, dass die resultierenden Videodateien in einer Schleife angesehen werden können. QuickLook auf dem Mac macht das leider nicht.

Diashow



Also habe ich mein Problem selbst angegangen und schnell ein kleines Projekt in reinem JavaScript erstellt, das mir das gab, was ich brauchte. Hier können Sie damit experimentieren. Und hier ist ein Video, das es in Aktion zeigt.

Chancen

Unter den Möglichkeiten meines JavaScript-Projekts zum Organisieren von Diashows mit Schleifen möchte ich Folgendes beachten:

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

Um eine Diashow auf einer HTML-Seite verwenden zu können, muss das Programm einen Container bereitstellen, in dem es seine Elemente erstellt und seine Parameter durch Festlegen der Werte der Objekteigenschaften festlegt slideshow



. Diese Eigenschaften sind:

• container
  
  
  
  : Ein Verweis auf das HTML-Element im DOM, in dem die Diashow platziert werden soll.
• media
  
  
  
  : Ein Array mit den Namen der anzuzeigenden Videodateien und Bilder.
• folder
  
  
  
  : Der Ordner mit den oben genannten Materialien, der ein Unterverzeichnis des Ordners sein sollte, der die Dateien enthält, die die Diashow-Funktionalität implementieren.
• autoplay
  
  
  
  : Eine Eigenschaft, die angibt, ob die Diashow automatisch abgespielt werden soll. Es kann einen von zwei Werten enthalten: yes
  
  
  
  (Autoplay aktiviert) oder no
  
  
  
  (Autoplay deaktiviert).
• speed
  
  
  
  : Zeit in Millisekunden, die das Programm hält, bevor das nächste Material angezeigt wird (z. B. bedeutet ein Wert von 1000 1 Sekunde).

<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>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Automatische Arbeit mit Sammlungen von Mediendateien

Ich verwende dieses Projekt derzeit auf einem lokalen Server mithilfe eines Skripts index.php



. Für jemanden auf einem Mac ist PHP bereits installiert. Um das Projekt zu starten, müssen Sie nur das Terminal öffnen, in den Ordner mit den Projektmaterialien wechseln und den folgenden Befehl ausführen:

$ php -S localhost:8000

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dann können Sie mit dem Browser zur Adresse gehen localhost:8000



, und das Programm erledigt den Rest selbst.



Insbesondere findet das Skript index.php



alle Ordner im selben Verzeichnis wie das Skript und listet sie auf. Wenn Sie auf den Namen eines der Ordner klicken, wird die Wiedergabe von Dateien gestartet. Sie können sich den Code dieses Skripts leicht ansehen, aber ich werde sofort sagen, dass daran nichts Besonderes ist.



Der Code index.php



befindet sich im Projekt- Repository . Um Ihre eigenen Diashows anzuzeigen, können Sie das Repository klonen oder als ZIP-Archiv herunterladen .



Wie würden Sie das Problem der Anzeige von Diashows mit Schleifen lösen?