Video Play control on mouse wheel scrolling with jQuery, video play on each mouse scroll wheel with jQuery. you like feel scroll animation on web page with help of video play each scroll.
Table of Contents
How to use :
Add js script from jQuery library in head section.
<script type="text/javascript" src="/cdn/jquery-1.12.4.min.js"></script>
Add Style for overflow web page.
#set-height {
display: block;
}
#v0 {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
p {
font-size: 24px;
}
Add element after body tag.
<div id="set-height"></div>
<p id="time"></p>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="Chrome_ImF.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
Add js Script for mouse scrolling.
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
Done
Thanks for make jQuery plugin is developed by ollieRogers For more Helpfull for users, please check the demo page or visit the official website.
