Html5 Video Play On Mouse Wheel Scrolling With jQuery

Layout
File Size: 1.08 KB
Views Total: 714 views
Last Update:February 28, 2022
Publish Date: February 28, 2022
Official Website: Go to website
License: MIT
Plugin Author: ollieRogers
Demo    Download

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.

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=&quot;vp8, vorbis&quot;" src="Chrome_ImF.webm"></source>
<source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="Chrome_ImF.mp4"></source>
  <p>Sorry, your browser does not support the &lt;video&gt; 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);


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.