JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vjs.zencdn.net/4.7/video.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.7/video-js.css">
<div class="videoContainer">
    <p>Each video will play as it is scrolled into view and will be paused as it is scrolled out of view.</p>
<h4>Video 1</h4>

  <video id="example_video_1" class="video-js vjs-default-skin myVideos" controls preload="auto" width="320" height="240"
	  poster = "http://svissinc.com/outdoor-video-poster.png"
	  data-setup="{}">
          <source src="http://svissinc.com/SVI_Outdoor_Video_Alarms.m4v" type='video/m4v' />
  </video>
</div>
<hr />
<div class="videoContainer">
<h4>Video 2</h4>

  <video id="example_video_2" class="video-js vjs-default-skin myVideos" controls preload="auto" width="320" height="240"
	  poster = "http://svissinc.com/how-it-works-poster.png"
	  data-setup="{}">
    <source src="http://svissinc.com/HowItWorks_revised.m4v" type='video/m4v' />
  </video>
</div>

CSS

.videoContainer { text-align: center; height: 600px; }
.videoContainer .myVideos { margin: 0 auto; }

JavaScript

videojs.options.flash.swf = "http://vjs.zencdn.net/c/video-js.swf";
var players = ['example_video_1', 'example_video_2'];

window.addEventListener("resize", playVideos, false);
window.addEventListener("scroll", playVideos, false);

// Loop through all the players, check if video player is visible in the viewport. If it is visible, play it. If not, do not play it.
function playVideos() {

	for (var i = 0; i < players.length; i++) 
	{
		var videoPlayer = $('#' + players[i]);
		var videoPlayerElem = _V_('#' + players[i]);

		if (isOnScreen(videoPlayer))
		{
			videoPlayerElem.play();
		}
		else
		{
			videoPlayerElem.pause();
		}     
	}

}

function isOnScreen(element) {
  var elementOffsetTop = element.offset().top;
  var elementHeight = element.height();

  var screenScrollTop = $(window).scrollTop();
  var screenHeight = $(window).height();

  var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
  var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

  return scrollIsAboveElement && elementIsVisibleOnScreen;
}