Control buttons for a video with HTML and Javascript doesn't work

Question

I'm working on a control-button-system for my video. Currently it looks like this:

If I click on the play-button, the url changes to a pause-button and you see the video playing. As far as this, its working just as I want. But now I want the result: If I move out with my cursor from the video while its playing, the pause-button has to disappear. And if I move out while my video is paused(like in the picture), the play-button has to stay. I made an 'onmouseout' for the video but it didn't work. I hope someone could help me.

HTML:

<div id="videodiv" onmouseout="disappear()">
    <div id="video">
        <video id="myVideo">
            <source src="test.mp4" type="video/mp4">
        </video>
    </div>
    <div id="textVideoPlay">
       <a href="#"> <img onclick="playPause()" id="button" src="play.png"> </a>
    </div>
</div>

CSS:

#videodiv {
    display: table;
    width: 70.0vw;
    height: 30vw;
    text-align: center;
    max-height: 400px;
}

#video {
    background-color: red;
    height: 30vw;
    width: 70vw;
    max-height: 400px;
    overflow: hidden;
    position: absolute;
    z-index: -3;
}

video {
    width: 100%;
}

/* PLAY VIDEO */

#textVideoPlay {
    display: table-cell;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.5);
}


img[src="play.png"] {
    height: 20%;
}

img[src="pause.png"] {
    height: 17%;
}

JAVASCRIPT:

function playPause() {
    var video = document.getElementById('myVideo');
    if (video.paused) {
        video.play();
        document.getElementById('button').src = "pause.png"
    }
    else {
        video.pause();
        document.getElementById('button').src = "play.png"
    }

}

function disappear() {
    if( document.getElementById('button').src = "pause.png") {
        document.getElementById('textVideoPlay').style.display = "none";
    }
}

Answer 1

Try using addEventListener() to register the mouseout event. Use classes for the state of player (i.e. on/off, playing/paused, etc...) Details are commented in Snippet below.

SNIPPET

// Reference button and container
var btn1 = document.getElementById('b1');
var pyr1 = document.getElementById('p1');

// When button is clicked...
btn1.addEventListener('click', function(event) {

  // Reference video
  var vid1 = document.getElementById('v1');

  // Conditions based on state: paused
  if (vid1.paused) {
    vid1.play();
  } else {
    vid1.pause();
  }
  /* Whatever the new state is doesn't matter if...
  || we have either .play or .pause class on button
  || previously and that both classes will toggle
  || at the same time.
  */
  btn1.classList.toggle('play');
  btn1.classList.toggle('pause');
}, false);

// If the mouse leaves the area of container...
pyr1.addEventListener('mouseout', function(event) {

  // If the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 0
    btn1.style.opacity = 0;

    // and make it fade away
    btn1.style.transition = '1s ease';
  }
}, false);

// If the mouse enters the container's area...
pyr1.addEventListener('mouseover', function(event) {

  // if the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 1  
    btn1.style.opacity = 1;

    // and make it fade in
    btn1.style.transition = '1s ease';
  }
}, false);

/* This container wraps neatly around 
|| the video's width
*/

#p1 {
  position: relative;
  display: table-cell;
  cursor: pointer;
}


/* This is to make the button an overlay */

#b1 {
  font-size: 100px;
  color: rgba(0, 255, 255, .3);
  position: absolute;
  z-index: 1;
  height: 100px;
  width: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  text-decoration: none;
}


/* These two rulsets use  simple HTML entities
|| for play/pause buttons
*/

.play::after {
  content: '\25b6';
}

.pause::after {
  content: '\23f8';
}

<!-- Simplified the markup a little, less is more -->
<div id="p1">
  <a href="#/" id='b1' class='play'> </a>
  <video id="v1">
            <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
   </video>
</div>

Answer 2

Here's what you can try:

function disappear() {

  var video = document.getElementById('myVideo');

  if (video.paused) {
    document.getElementById('button').src = "play.png";
    document.getElementById('textVideoPlay').style.display = "block";

  } else {
    document.getElementById('button').src = "pause.png";
    document.getElementById('textVideoPlay').style.display = "none";
  }
}

I'm not sure if it works, since I can't test it right now, but seeing that your playPause() is working, this should work too.