JSFiddle - React, Tailwind, and code Playground

HTML

<video id="popo" width="477" height="269" controls="">
<source src="http://www.bassawards.org/videos/284.mp4" />
</video>

<button onclick="javascript:popo.volume-=0.1">-0.1</button>
<button onclick="javascript:popo.volume+=0.1">+0.1</button>

<div id="coco">coco</div>

CSS

#coco {width: 50px; height: 1000px; border: 2px solid black;}

JavaScript

var popo = document.getElementById('popo');
var coco = document.getElementById('coco');
//popo.play();

//setTimeout(function(){
//    popo.pause();
//},3000);

var current = 0;
var doScroll = function (e) {
    // cross-browser wheel delta
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // Do something with `delta`
    current = current + delta;
    coco.innerHTML = current;
    
    if(delta== 1 && popo.volume <= 0.9){popo.volume+=0.1;}
    if(delta== -1 && popo.volume > 0.1){popo.volume-=0.1;}

    e.preventDefault();
};

if (popo.addEventListener) {
   popo.addEventListener("mousewheel", doScroll, false);
    popo.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    popo.attachEvent("onmousewheel", doScroll);
}