Tutorial Play Video Ketika Scroll dengan HTML5 & Jquery

Play video ketika scroll pada halaman website sedang menjadi trend saat ini, website-website modern banyak yang menerepkan hal tersebut pada websitenya, hal ini banyak kita lihat pada website parallax. Menarik memang melihat perubahan yang terjadi pada website saat ini, website pada saat ini kaya akan fitur, banyak hal bisa diterapkan pada website, efek-efek pun semakin banyak digunakan. Pada kesempatan kali ini akan memaparkan sedikit bagaimana cara membuat fitur yang biasa ada di website Parallax, yang akan memainkan video backgroundnya hanya ketika mouse di scroll.

Struktur HTML

Seperti biasanya, kita mulai dengan membuat struktur HTML nya, simpel saja kita hanya perlu dua buah tag pada tutorial kali ini yang harus di letakan di tag body, tentunya untuk penerapan pada website yang lebih serius bisa lebih banyak tag nya, karena ini hanya untuk demo kita buat sangat sederhana.

<h1> Scroll to play video ► </h1>

CSS

Selanjutnya kita perlu CSS untuk membuat teks menjadi di tengah, serta membuat tinggi body menjadi 4000px, sedangkan video dibuat dalam posisi fixed dan memberikan nilai cover pada background-size agar dia jadi memenuhi layar dan tidak berubah posisi ketika di scroll.

padding: 0;margin: 0;

}

html {

height:100%;

}

body {

height: 4000px;

}

video {

position: fixed;

left: 50%;

top: 0;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

background-size: cover;

-moz-transform: translateX(-50%);

transform: translateX(-50%);

}

h1 {

position: fixed;

top: 50%;

left: 50%;

width: 100%;

-moz-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

z-index: 99;

font-family: HelveticaNeue, Helvetica, sans-serif;

font-size:8vmin;

text-align:center;

color: white;

}

Jquery

Kita membutuhkan fungsi scrollTop() untuk mendapatkan nilai vertical ketika mouse di scroll. Jadi mouse scroll ini akan bertindak seperti tombol previous (scroll ke atas) dan tombol next (scroll kebawah).

function scrollVideo() {

var video = $('#video').get(0),

videoLength = video.duration,

scrollPosition = $(document).scrollTop();

video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;

}

$(window).scroll(function(e) {

scrollVideo();

});

</script>

Download Script

Semoga info ini dapat berguna bagi para pembaca, khususnya buat saya sendiri sebagai penulis. ありがと!