JSFiddle - React, Tailwind, and code Playground

HTML

<h2>scroll down</h2>
<video class="myVid" width="320" height="240" controls>
    <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
<div id="a"></div>
<video class="myVid" width="320" height="240" controls>
    <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>

CSS

#a {
    height: 2000px;
}

JavaScript

$(window).scroll(function() {
    $('.myVid').each(function() {
        if(isInView(this)) {
            this.play();
        } else {
            this.pause();
        }
    });
});

function isInView(el) {
    windowTop = $(window).scrollTop();
    windowButtom = windowTop + $(window).height();
    elTop = $(el).offset().top;
    elButtom = elTop + $(el).height();

    return (elTop >= windowTop && elButtom <= windowButtom);
}