JSFiddle - React, Tailwind, and code Playground

HTML

<div id="set-height">
    <p id="time"></p>
    <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
        <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm">
            <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv">
                <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4">
                    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>
</div>
<div id="butoes">
    <button id="play" type="button">Play</button>
    <button id="pause" type="button">Pause</button>
</div>

CSS

#set-height {
    display: block;
    height: 13500px;
}
#v0 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
p font-family helvetica {
    font-size: 24px;
}
#butoes {
    position: fixed;
    top: 500px;
}

JavaScript

// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();

// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function () {
    vid.currentTime = window.pageYOffset / 400;
    vid.pause();
};

document.getElementById('play').onclick = function () {
    vid.play();
}
document.getElementById('pause').onclick = function () {
    vid.pause();
    window.scrollTo(0, vid.currentTime * 400);
}