Apresentação de slides em loop de tela cheia de arquivos de imagens e vídeo em JavaScript

Recentemente, pensei que seria bom converter um monte de GIFs que tenho para o formato MP4 para economizar espaço nos cartões de memória. Eu queria ter certeza de que os arquivos de vídeo resultantes poderiam ser assistidos em um loop. O QuickLook no Mac, infelizmente, não faz isso.

Apresentação de slides



Então, resolvi sozinho o meu problema e rapidamente criei um pequeno projeto em JavaScript puro que me deu o que eu precisava. Aqui você pode experimentar. E aqui está um vídeo demonstrando isso em ação.

Oportunidades

Entre as possibilidades do meu projeto JavaScript para organizar apresentações de slides em loop, quero observar o seguinte:

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

Para usar uma apresentação de slides em uma página HTML, o programa deve fornecer um container no qual criará seus elementos e definirá seus parâmetros definindo os valores das propriedades do objeto slideshow



. Essas propriedades são:

• container
  
  
  
  : uma referência ao elemento HTML no DOM onde a apresentação de slides deve ser colocada.
• media
  
  
  
  : um array com os nomes dos arquivos de vídeo e imagens a serem exibidos.
• folder
  
  
  
  : a pasta que contém os materiais acima, que deve ser um subdiretório da pasta que contém os arquivos que implementam a funcionalidade de apresentação de slides.
• autoplay
  
  
  
  : Uma propriedade que indica se a apresentação de slides deve ser reproduzida automaticamente. Ele pode conter um de dois valores: yes
  
  
  
  (reprodução automática habilitada) ou no
  
  
  
  (reprodução automática desabilitada).
• speed
  
  
  
  : tempo em milissegundos que o programa irá segurar antes de passar a mostrar o próximo material (por exemplo, um valor de 1000 significa 1 segundo).

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Trabalho automático com coleções de arquivos de mídia

Atualmente, estou usando este projeto em um servidor local usando um script index.php



. Para alguém em um Mac, o PHP já está instalado. Portanto, para iniciar o projeto, basta abrir o terminal, acessar a pasta com os materiais do projeto e executar o seguinte comando:

$ php -S localhost:8000

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Então, usando o navegador, você pode ir até o endereço localhost:8000



, e o programa fará o resto sozinho.



Em particular, o script index.php



encontrará todas as pastas no mesmo diretório que o script e as listará. Se você clicar no nome de uma das pastas, a reprodução dos arquivos dessa pasta será iniciada. Você pode facilmente examinar o código deste script, mas direi imediatamente que não há nada de especial nele.



O código index.php



pode ser encontrado no repositório do projeto. Para começar a mostrar suas próprias apresentações de slides, você pode clonar o repositório ou baixá- lo como um arquivo ZIP.



Como você resolveria o problema de mostrar apresentações de slides em loop?