Pemasangan video pada sebuah background di web merupakan salah satu opsi mempercantik website. Berikut adalah source coda bagaimana membuat background vide pada website. Source code berikut merupakan source yang saya gunakan di berbagai project sistem informasi yang pernah saya buat. Anda dapat menggantinya dengan video yang anda inginkan di dalam folder video.
Silahkan lihat untuk preview :
Berikut adalah langkah pembuatannya :
1. Siapkan Video
Pada tutorial ini saya menyarankan untuk video dengan ukuran kecil seperti 2 atau 3 mb. Mengapa ? karena jika terlalu besar akan membuat loading halaman web anda semakin lambat. Video yang saya siapkan ini berdurasi selama beberapa detik saja.
2. Buat folder bernama video
Buatlah folder bernama video. Dan beri nama vodeo anda clip.mp4
Rekomendasi Resolusi adalah : 1280×720 px
3. Buat file index dengan source code sebagai berikut :
Buatlah file index.php dan sesuaikan nama folder dan file
<br><br>
<video id="my-video" style="position:fixed; right: 0; top: 0; min-width:100%; z-index: -100; object-fit: cover;" class="video" loop muted>
<source src="upload/clip.mp4" type="video/mp4">
<source src="upload/clip.ogv" type="video/ogg">
<source src="upload/clip.webm" type="video/webm">
</video><!-- /video -->
<center>
<div style='background:white; color:black; width:80%; text-align:center'>
<br>
Selamat Datang di SistemIT.com<br>
<br>
<br>
Ini Adalah Contoh Halaman Website dengan Background Video
<br>
<br>
</div>
</center>
<script>
(function() {
/**
* Video element
* @type {HTMLElement}
*/
var video = document.getElementById("my-video");
/**
* Check if video can play, and play it
*/
video.addEventListener( "canplay", function() {
video.play();
});
})();
</script>
Bagaimana ? Gampang bukan. Silahkan mencoba.
Untuk pemesanan dan pembuatan aplikasi berbasis web silahkan hubungi kontak berikut :
