Contoh cara mudah mengimplementasikan background video layar penuh menggunakan HTML5

Ingin memutar video layar penuh di beranda Anda? Video ini digunakan sebagai latar belakang halaman web dan tidak mempengaruhi penelusuran normal konten web. Kalau begitu izinkan saya memberi tahu Anda bahwa ada perpustakaan Javascript yang sesuai dengan kebutuhan Anda, yaitu Bideo.js.

Penyesuaian otomatis: Bideo.js dapat secara otomatis menyesuaikan ukuran video sesuai dengan ukuran jendela browser saat ini. Ketika jendela browser disesuaikan, maka akan beradaptasi dengan ukuran jendela. Baik sisi seluler maupun PC dapat secara otomatis menyesuaikan sehingga video dapat digunakan sebagai latar belakang dan ditampilkan dalam layar penuh.

Overlay: Setelah video digunakan sebagai latar belakang halaman web, kita dapat menempatkan konten HTML apa pun di atas video.

Sampul video: Saat halaman dibuka, video mungkin memerlukan waktu beberapa detik untuk dimuat. Kemudian kita dapat mengatur gambar sebagai sampul video dan menunggu hingga dimuat sebelum diputar.

Tambahkan kode HTML berikut ke badan halaman Anda. Jelas, tag <video> digunakan untuk memuat video, atribut loop mengacu pada perulangan video, dan muted mengacu pada mode mute, yaitu volumenya 0. #video_cover adalah sampul video default. #overlay adalah lapisan topeng tempat semua konten halaman lainnya ditampilkan.

 <div id=container> <video id=background_video loop dibisukan></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <bagian id=main_content> <div id=head> <h1>HTML5 dengan mudah mengimplementasikan latar belakang video layar penuh - Bideo.js</h1> <p class=sub_head>Perpustakaan Javscript yang dapat dengan mudah menambahkan video latar belakang layar penuh ke halaman </p> <p class=info>(Tunggu sebentar, video memerlukan waktu beberapa saat untuk dimuat.)</p> </div> </section></div>

Kami juga menambahkan #video_controls, yang digunakan untuk mengontrol pemutaran dan jeda video, cocok untuk ponsel. Terakhir, Anda dapat menambahkan konten HTML apa pun yang ingin Anda tampilkan di bagian selanjutnya.

CSS juga penting untuk diperhatikan adalah pengaturan #container dan #background_video. Kode css berikut ini bisa langsung diambil tanpa penjelasan:

 * { margin: 0; padding: 0;}html, body { lebar: 100%; tinggi: 100%; overflow: tersembunyi;}#container { overflow: tersembunyi; : 0; bawah: 0; tinggi: 100%;}#background_video { posisi: absolut; atas: 50%; kiri: 50%; -50%); kesesuaian objek: tinggi sampul: 100%; lebar: 100%;}#video_cover { posisi: absolut; lebar: 100%; -ulangi; ukuran latar belakang: penutup; posisi latar belakang: tengah;}#overlay { posisi: absolut; kanan: 0; rgba(0,0,0,0.5);}

Muat dulu perpustakaan Bideo:

 <skrip src=bideo.js></skrip>

Kemudian buat instance bido: new Bideo(), lalu inisialisasi pemuatan secara langsung dan atur opsi berikut:

 (fungsi () { var bv = new Bideo(); bv.init({ // Elemen video videoEl: document.querySelector('#background_video'), // Wadah elemen penampung: document.querySelector('body'), / / Perubahan ukuran penyesuaian adaptif: benar, // putar otomatis: salah, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), pauseButton: document.querySelector('#pause'), // Muat sumber video dan ganti file sumber video Anda sendiri sesuai dengan bisnis sebenarnya src: [ { src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4', ketik: 'video/mp4' }, { src: 'night.webm', ketik: 'video/webm;codecs=vp8, vorbis' } ], // Setelah video dimuat, sampul video akan disembunyikan onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());

Sama seperti ini, halaman video latar belakang yang terlihat bagus telah selesai. Selamat melihat demo online DEMO dan unduh kode sumbernya. Untuk informasi lebih lanjut tentang Bideo.js, silakan lihat alamat proyek github: https://github.com/rishabhp/bideo.js.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.