html5 video: play/pause custom button issue

Question

I am using an HTML5 Video on my website, with certain other codes that basically makes usability more customized.

The video is intended to play when in view and pause when not in view. Additionally it also has a play and pause button that comes into view when the mouse hovers on the video.

At the end of the video it turns into an image because by default the html5 video would just turn to blank.

The problem is that the image turns up in the end, but the play/pause continue to appear on hover and function as play pause but only audio. You cannot see the video.

I originally wanted it to just show the picture. But would prefer to have the play pause turn into a restart button if the video ends.

I tried looking for something that would fit my existing setup, but I am not sure how to make it happen and which of these codes would I play with.

Here is a link for the site http://minhasdistillery.com/blumersmoonshine/

  <section id="feature">


                            <div id="trail">
                                  <div id="videocontrol">
                                  <a id="play-pause" class="play"><img src="images/pause.png"/></a>
                                  </div>
                                <video id="video_background" preload="auto" volume="5"><!--or turn on loop="loop"-->
                                  <source src="videos/video.webm" type="video/webm">
                                  <source src="videos/video.mp4" type="video/mp4">
                                  <source src="videos/video.ogv" type="video/ogg ogv">
                                </video>


                                    <img id="image_background" src="images/blumer.jpg" width="100%" height="100%" />


                            </div><!--trail--> 



</section><!--feature-->

Javascript that brings up play/pause button

 <script>
  window.onload = function() {

  var video = document.getElementById("video_background");

  var playButton = document.getElementById("play-pause");

  playButton.addEventListener("click", function() {
      if (video.paused == true) {
          video.play();

          playButton.innerHTML = "<img src='images/pause.png'/>";
      } else {
          video.pause();
          playButton.innerHTML = "<img src='images/play.png'/>";
      }
  });

  }

  </script>  

The code sets the video to play on when visible and pause otherwise

  <script>
  //play when video is visible
  var videos = document.getElementsByTagName("video"), fraction = 0.8;

  function checkScroll() {

    for(var i = 0; i < videos.length; i++) {
      var video = videos[i];
      var x = 0,
          y = 0,
          w = video.offsetWidth,
          h = video.offsetHeight,
          r, //right
          b, //bottom
          visibleX, visibleY, visible,
          parent;

        parent = video;
        while (parent && parent !== document.body) {
          x += parent.offsetLeft;
          y += parent.offsetTop;
          parent = parent.offsetParent;
        }

        r = x + w;
        b = y + h;

        visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
        visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

        visible = visibleX * visibleY / (w * h);

        if (visible > fraction) {
            video.play();
        } else {
            video.pause();
        }
    }

  }

  window.addEventListener('scroll', checkScroll, false);
  window.addEventListener('resize', checkScroll, false);

  //check at least once so you don't have to wait for scrolling for the video to start
  window.addEventListener('load', checkScroll, false);
  checkScroll();

  </script>     

This one adds the photo in the end.

  <script>
  var video = document.getElementById('video_background');
  var wrapper = document.getElementById('wrapper');
  var image = document.getElementById('image_background');
  video.addEventListener('ended', function() {
      video.style.display = 'none';
      image.style.display = 'inline';
  }, false);
  </script> 

A JSBin of the same issue is here JSBin For Issue

as you will see at the end of the video it will continue to show pause and play and will only play audio. How do I get it to read that the video ended and switch the button to "replay"

Answer 1

Initially video display style is block and image display style is none. Video ended event handler sets video display to none and image display to inline. You can check video display style in button click event handler and toggle it:

playButton.addEventListener(
  'click',
  function(event) {
    if (video.style.display === 'none') {
      image.style.display = 'none';
      video.style.display = 'block';
    }
    ...
  },
  false
);

As an alternative add boolean flag which is intially set to false, on video ended event set it to true:

var needReplay = false;

video.addEventListener(
  'ended',
  function() {
    ...
    needReplay = true;
  },
  false
);

playButton.addEventListener(
  'click',
  function(event) {
    if (needReplay) {
      image.style.display = 'none';
      video.style.display = 'block';
      needReplay = false;
    }
    ...
  },
  false
);

Demo