Html5 Video Play On Mouse Wheel Scrolling With jQuery

Html5 Video Play On Scrolling With The Mouse Wheel
File Size: 0.95 KB
Views Total: 3532 views
Last Update:March 18, 2023
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>

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() { = Math.floor(vid.duration) * playbackConst + "px";

// Use requestAnimationFrame for smooth playback
function scrollPlay(){  
  var frameNumber  = window.pageYOffset/playbackConst;
  vid.currentTime  = frameNumber;



Thanks for make jQuery plugin is developed by ollieRogers For more Helpfull for users, please check the demo page or visit the official website.


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.