Play video forward and backward on full page js scroll

Question

Please help me to play the video as in the "https://codepen.io/ollieRogers/pen/lfeLc" in full page js. The video should be fixed and should play while scrolling.

Answer 1

I've done some minor tweaking which should make this easier for you.

<style>
    #set-height {
        display block
    }
    #my_video {
        position fixed 
        top 0  
        left 0  
        width 100%
    }
    p {
        font-family helvetica 
        font-size 24px
    }
</style>
<div id="set-height">
    <p id="time">
    <video id="my_video",  tabindex="0" autobuffer preload>
        <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
        <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
        <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
        <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>
    </p>
</div>
<script>
    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('my_video'); 
    // 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);
</script>