Membuat background video full-screen untuk website dengan html5 dan jquery | Tren desain web sekarang sudah berbeda dengan zaman dulu. Dimana sekarang kecepatan internet sudah jauh lebih baik dan teknologi yang digunakan untuk membuat website juga sudah semakin berkembang, seperti munculnya html5 dan jquery.
Faktor-faktor penunjang tersebut ternyata membuat desainer web saat ini tidak takut lagi untuk menggunakan video sebagai background website, mereka tidak perlu khawatir websitenya menjadi berat dan sulit diakses. Maklum sekali lagi, koneksi internet sekarang sudah semakin bagus.
– Referensi lain: Menjadikan Video Youtube Sebagai Background Website
Pada kesempatan kali ini Jurnalweb akan menjabarkan sedikit bagaimana cara membuat video background full screen dengan html5 dan jquery. Video ini akan otomatis diputar / autoplay saat pertama kali website dibuka, namun ada tombol pause jika ingin menghentikan video. Ketika video di pause maka tampilan akan berubah menjadi sedikit lebih gelap.
Bahan Untuk Membuat Video Background Website
Layaknya memasak, pertama siapkan dulu bahan-bahan / resource yang diperlukan sebagai berikut:
1. Sebuah video yang akan dijadikan background, dengan format .WEBM & .MP4, video yang akan digunakan adalah video yang dapat di download zip nya secara gratis di situs coverr.co. Sediakan juga file gambarnya yang diambil dari screenshot video tersebut dengan formal .JPG
Jika Anda ingin menggunakan video pendek lainnya, cari saja di 14 website penyedia stok video gratis berdurasi pendek ini.
2. Script jquery versi terbaru (Jquery v2.2.3).
Cara Membuat Background Video Website Dengan HTML5
HTML5
Untuk membuat background video dibutuhkan script HTML5 seperti dibawah ini yang berfungsi untuk memasukan video dan keterangan tambahan yang diperlukan. Serta sebuah tombol untuk pause untuk menghentikan video.
CSS
Setelah struktur HTML nya dibuat, selanjutnya dipercantik dengan CSS agar posisinya menjadi lebih teratur, gunakan script seperti berikut ini.
– Baca juga: Cara Membuat Background Slideshow dengan Jquery
Script dibawha ini juga akan menaruh keterangan dibagian kanan halaman web, dan membuat tombol pause menjadi lebih jelas.
JQuery / Javascript
Sampai disini video sudah bisa jalankan dengan cukup baik, namun agar video bisa di berhenti ketika tombol pause di tekan, maka tambahkan script javascript dibawah ini. Taruh script ini di bagian bawah sebelum tag [/body].
Jika sudah selesai maka sudah bisa dijalankan, untuk Anda yang tertarik ingin mencoba bisa download atau melihat demonya dibawah ini.
Semoga tutorial singkat dan sederhana ini bisa berguna untuk Anda, jika ada pertanyaan bisa di sampaikan melalui form komentar yang ada dibawah.
Videonya kok Blur Ya…?
Memang sengaja kami pilih video yang blur (dengan maksud agar tulisan terlihat jelas). Selain itu konsepnya memang hanya ingin menggambarkan kehidupan kota besar, jadi hanya ingin kesan keramaian saja. Anda bisa cari/gunakan video lain yang tidak blur dan sesuai dengan kebutuhan.
Video pada demo sudah kami ganti agar tidak membingungkan pembaca :)
gan ada tutorial via youtube gak,? ane lebih suka subscribe lewat youtube. hehehe maklum males baca :D