Cara Membuat Play Video Ketika di Scroll Menggunakan JavaSrcipt
Halo teman-teman di panduan kali ini saya akan membahas mengenai Cara Membangun Play Video Ketika di Scroll Menggunakan JavaSrcipt, di dikala ini play video ketika kita scroll pun banyak dipakai di website-website. nah Cara Membangun Play Video Ketika di Scroll Menggunakan JavaSrcipt ada beberapa tahap yang akan kita bikin yaitu:
- Yang pertama-tama kita akan membangun struktur dari HTML nya
- Berikutnya kita akan membangun file css bagi mengatur layout atau tampilan dari laman kita
- Dan yang terakhir kita akan membangun script javascript-nya
Oke teman-teman tanpa berlama-lama kita seketika saja masuk ketahap yang pertama-tama yaitu kita akan membangun struktur dari laman tersebut, teman-teman dapat simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html >
<head>
<meta charset=UTF-8>
<title>Cara Membangun 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>
Di script diatas kita menggunakan sebuah tag <video>…</video> bagi menyisipkan video yang akan kita tampilkan, tag video tersebut adalah sebuah tag bawaan dari html 5, jadi kita dapat menyisipkan video menggunakan tag video tersebut.
Langkah berikutnya kita akan membangun 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 membangun 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 bagi hasil nya teman-teman dapat klik disini
Bagai mana teman-teman lumayan gampang bukan Cara Membangun Play Video Ketika di Scroll Menggunakan JavaSrcipt-nya sekianlah dulu panduan saya kali ini mengenai Cara Membangun Play Video Ketika di Scroll Menggunakan JavaSrcipt.
Semoga bermanfaat
Terimakasih
Sumber https://kursuswebsite.org
