Play Html5 video on scroll

Question

I am working on a Wordpress site and I have the code below which is working how I want it (only playing once, with the "replay" button appearing at the end)

I would like it to start playing when it is scrolled to ie. in the viewport.

I have seen a few different ways of making this happen on here, but I can't get them to play nice with my current code.

HTML

<div class="spacer">

  </div>
  <div class="video-wrapper">
    <video id="bVideo" muted autoplay>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    </video>
    <div id="playButton" class="playButton" onclick="playPause()"></div>
    <div class="replayButton" id="replayButton" onclick="playPause()">REPLAY ↻</div>
  </div>
<script>


var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";

function playPause() {
  if (bunnyVideo.paused) 
  {
    bunnyVideo.play();
      replay.className = "replayButton";
  replay.style.visibility = "hidden";
  } 
  else 
  {
    bunnyVideo.pause();
    el.className = "playButton";
    replay.className = "";
  }
}

function playPauseControls() {
  if (!bunnyVideo.paused) {
    el.className ="";
    replay.className = "";
  } else {
     el.className = "playButton";
     replay.className = "";
  }
}

function videoEnd() {
  replay.className = "replayButton";
  replay.style.visibility = "visible";
  el.className = "";
  }




function showControls(){
  bunnyVideo.setAttribute("controls","controls");
}
function hideControls(){
  bunnyVideo.removeAttribute("controls","controls");
}

/*Google Analytics Tracker Function*/
/*Assuming you've already set up the Google Analytics script function on your webpage. This just activates a trigger event when the video plays.*/
/*function bunnyVideoView() {
     ga('send', 'event', { 
          'eventCategory': 'Bunny Video',
          'eventAction': 'play',
          'eventLabel': 'Bunny Video View'
     });
}*/


bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
/*Google Analytics Tracker*/
/*bunnyVideo.addEventListener("play", bunnyVideoView, false);*/

</script>

CSS

.spacer {
  height: 400px;
}

.video-wrapper {
  position: relative;
  max-width: 680px;
}

.video-wrapper > video {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
}

/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
}


.playButton {
  border-radius: 100px;
  border: 8px solid #fff !important;
  height: 100px;
  position: absolute;
  width: 100px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  cursor: pointer;
  display: block;
  opacity: 0.95;
  transition: opacity 400ms;
}

.playButton:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: -10px;
  bottom: 0;
  margin: auto;
}

.replayButton {
    color: black;
  position: relative;
    text-align: center;
  margin: auto;
    margin-top: 0px;
  cursor: pointer;
  display: block;
  opacity: 0.95;
  transition: opacity 150ms;
}

.replayButton:hover, .replayButton:focus {
  color: #ea7200;
}

.replayButton:before {
  height: 45px;
  width: 45px;
  position: absolute;
  top: 18px;
  left: 18px;
  content: '';
  display: block;
  border-color: transparent white white white;
  border-radius: 50%;
  border-style: solid;
  border-width: 8px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.replayButton:after {
  border-color: transparent transparent transparent white;
  border-style: solid;
  border-width: 0 45px 22px 22px;
  height: 0;
  position: absolute;
  top: 40px;
  left: 15px;
  bottom: 0;
  right: 0;
  width: 0;
  content: "";
  display: block;
  margin: auto;
}

https://jsfiddle.net/ag3sowbg/

Answer 1

I had to solve a similar task some time ago.

First, you add an empty element absolutely positioned in the dead center of the video wrapper.

Next, you define the "belt" of your viewport as a tracking zone for the video trigger.

On window.scroll you simply detect if a collision trigger enters or leaves the trigger area and either play or pause the video.

I hope this helps: CodePen link

PS: I would probably be very careful with adding custom play/replay buttons as lots of media players in different browsers use their own (Safari, Firefox) and you'll most likely end up having two over each other (the browser default always wins, mind you). Been there :) Drop them if they aren't essential...