Cara Membuat Play Video Ketika di Scroll Menggunakan JavaSrcipt

Halo teman-teman pada tutorial kali ini saya akan membahas tentang Cara Membuat Play Video Ketika di Scroll Menggunakan JavaSrcipt, pada saat ini play video ketika kita scroll juga banyak diterapkan pada website-website. nah Cara Membuat Play Video Ketika di Scroll Menggunakan JavaSrcipt ada beberapa tahap yang akan kita buat yaitu:

1. Yang pertama kita akan membuat struktur dari HTML nya
2. Berikutnya kita akan membuat file css untuk mengatur layout atau tampilan dari website kita
3. Dan yang terakhir kita akan membuat script javascript-nya

Oke teman-teman tanpa berlama-lama kita langsung saja masuk ketahap yang pertama yaitu kita akan membuat struktur dari website tersebut, teman-teman bisa simpan script dibawah ini dengan nama index.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Play Video Ketika di Scroll Menggunakan JavaSrcipt</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
  	<div class="container">
		<video> 
		  <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
		</video>
		  
	  	<h1>Silahkan di Scroll &Darr;</h1>
	</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="index.js"></script>
</body>
</html>

Pada script diatas kita menggunakan sebuah tag <video>…</video> untuk menyisipkan video yang akan kita tampilkan, tag video tersebut merupakan tag bawaan dari html 5, jadi kita bisa menyisipkan video menggunakan tag video tersebut.

Langkah berikutnya kita akan membuat file cssnya dan silahkan teman-teman simpan script dibawah ini dengan nama styles.css

* {
  padding: 0;
  margin: 0;
}
.container {
  height: 5000px;
}
video {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
h1{position: fixed; color: white}

Dan yang terakhir kita akan membuat file javascript nya dan silahkan teman-teman simpan script dibawah ini dengan nama index.js

(function() {
  
  var window_height   = $(window).height();
  var document_height = $(document).height();
  
  var video  = $('video').get(0);
  var length = 80; //seconds
  
  var start = window_height/2;
  var end   = document_height - start;
  
  $(document).on('scroll', function () {   
    var position = $(document).scrollTop();
    var percent  = (position/end);
       
    var currentTime = length*percent;
    
    console.error(currentTime);
   
    video.currentTime = currentTime;
    
  });
})();

Nah untuk hasil nya teman-teman bisa klik disini

Bagai mana teman-teman cukup mudah bukan Cara Membuat Play Video Ketika di Scroll Menggunakan JavaSrcipt-nya sekian dulu tutorial saya kali ini tentang Cara Membuat Play Video Ketika di Scroll Menggunakan JavaSrcipt.

Semoga bermanfaat

Terimakasih