Tampilan slide perulangan layar penuh dari file gambar dan video dalam JavaScript

Baru-baru ini saya pikir akan menyenangkan untuk mengonversi sekumpulan GIF yang saya miliki ke format MP4 untuk menghemat ruang pada kartu memori. Saya ingin memastikan bahwa file video yang dihasilkan dapat ditonton dalam satu lingkaran. QuickLook di Mac, sayangnya, tidak melakukan ini.

Slideshow



Jadi saya mengatasi masalah saya sendiri dan dengan cepat membuat proyek kecil dalam JavaScript murni yang memberi saya apa yang saya butuhkan. Di sini Anda dapat bereksperimen dengannya. Dan di sini adalah video menunjukkan dalam tindakan.

Peluang

Di antara kemungkinan proyek JavaScript saya untuk mengatur tayangan slide berulang, saya ingin mencatat yang berikut:

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

Untuk menggunakan slideshow pada halaman HTML, program harus menyediakan wadah di mana ia akan membuat elemennya, dan mengatur parameternya dengan mengatur nilai properti objek slideshow



. Properti ini adalah:

• container
  
  
  
  : referensi ke elemen HTML di DOM tempat tayangan slide harus ditempatkan.
• media
  
  
  
  : larik dengan nama file video dan gambar yang akan ditampilkan.
• folder
  
  
  
  : folder yang berisi materi di atas, yang seharusnya menjadi subdirektori dari folder yang berisi file yang mengimplementasikan fungsionalitas slideshow.
• autoplay
  
  
  
  : Properti yang menunjukkan apakah slideshow harus diputar secara otomatis. Ini dapat berisi salah satu dari dua nilai: yes
  
  
  
  (putar otomatis diaktifkan) atau no
  
  
  
  (putar otomatis dinonaktifkan).
• speed
  
  
  
  : waktu dalam milidetik yang akan dipertahankan program sebelum melanjutkan untuk menampilkan materi berikutnya (misalnya, nilai 1000 berarti 1 detik).

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Bekerja secara otomatis dengan koleksi file media

Saat ini saya menggunakan proyek ini di server lokal menggunakan skrip index.php



. Untuk seseorang di Mac, PHP sudah diinstal. Oleh karena itu, untuk memulai proyek, Anda hanya perlu membuka terminal, masuk ke folder dengan materi proyek dan jalankan perintah berikut:

$ php -S localhost:8000

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Kemudian, dengan menggunakan browser, Anda dapat pergi ke alamat tersebut localhost:8000



, dan program akan melakukan sisanya dengan sendirinya.



Secara khusus, skrip index.php



akan menemukan semua folder di direktori yang sama dengan skrip dan mencantumkannya. Jika Anda mengklik nama salah satu folder, pemutaran file darinya akan dimulai. Anda dapat dengan mudah melihat kode skrip ini, tetapi saya akan langsung mengatakan bahwa tidak ada yang istimewa tentang itu.



Kode index.php



dapat ditemukan di repositori proyek. Untuk mulai menampilkan tayangan slide Anda sendiri, Anda dapat mengkloning repositori atau mengunduhnya sebagai arsip ZIP.



Bagaimana Anda mengatasi masalah menampilkan tayangan slide yang diputar?