JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
	<div id="seventh" class="view" data-0="opacity:0" data-50="opacity:1" data-1600="opacity:0">
		<video id="video" class="video-js vjs-default-skin" controls preload="none" width="150" height="150" poster="Penguins.jpg" data-setup="{}">
			<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
			<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
		</video>
	</div>

JavaScript

var s = skrollr.init({
		render: function(data) {
			var $seventh = $("#seventh");
			
			var $video = $("#video");
			var videoElem = $video[0];
			
			var videoTop = $video.offset().top;
			var videoBottom = videoTop + $video.height();
			
			var viewTop = $(window).scrollTop();
			var viewBottom = viewTop + $(window).height();

			//play video when opacity is at least 50% and at least some of the video player is show
			var isViewable = $seventh.css("opacity") > 0.5 && (videoTop < viewBottom && videoBottom > viewTop);
			if(isViewable) {
				if(videoElem.paused) {
					videoElem.play();
					console.log("play");
				}
			}
			else {
				if(!videoElem.paused) {
					videoElem.pause();
					console.log("pause");
				}
			}
		}
	});
	s.setScrollTop(50);