How to display a div element when HTML5 video ends

Question

I've been trying to do the following on my website's main page : a video in fullscreen plays (no controls, no loop, muted, autoplays, stored locally) and when it ends, the video is hidden and a div element shows.

I'm used to working with HTML and CSS but not so much JavaScript, so what I've done thus far is put the video, and used a checkbox to hide/show the elements (as shown here) and then tried to modify it so it would detect when the video ends, but I can't make it work.

The code I'm using is probably wrong, as it was meant for a checkbox, but I've also tried the solutions written there and it seems like the issue comes from the function used to detect when the video ends not working.

Here is what I've tried to automatize it :

#menudisplay {
    display: none;
    text-align: center;
    margin-top: 20vh;
  font-family: 'Montserrat';
}

#menudisplay ul {
    list-style-type: none;
}

#menudisplay ul li {
    padding: 110px;
}

.style {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color:lightgray;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Website</title>
    <meta http-equiv="Content-Type" content="charset=UTF-8" />
    <link rel="stylesheet" href="./mystyle.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
  </head>

  <video autoplay muted class="style">
    <source src="./video.mp4" type="video/mp4">
    The video is not working.
  </video>

  <div id="menudisplay">

    <img class="style" src="./img.jpg">

    <ul>

      <li>
        <a href="./ex1.html">EXEMPLE 1</a>
      </li>

      <li>
        <a href="./ex2.html">EXEMPLE 2</a>
      </li>

    </ul>

  </div>


  <script>
    function myFunction() {
      var video = document.getElementById("video");
      var menudisplay = document.getElementById("menudisplay");

      if (video.ended == true) {
        menudisplay.style.display = "block";
        video.style.display = "none";
      } else {
        menudisplay.style.display = "none";
      }
    }

  </script>

</html>

I use Visual Studio Code and my web browser is Edge. Thank you in advance, I'm really stuck !

Check the following docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event — prettyInPink, Apr 27 '21 at 13:26

score 1 · Accepted Answer · answered Apr 27 '21 at 14:07

In this example I added both an evenlistener for DOMContentLoaded (for making sure that the document has been loaded) and for the video ending.

document.addEventListener('DOMContentLoaded', e => {
  var video = document.getElementById("video");
  var menudisplay = document.getElementById("menudisplay");

  video.addEventListener('ended', e => {
    menudisplay.style.display = "block";
    video.style.display = "none";
  });
});

#menudisplay {
  display: none;
  text-align: center;
  margin-top: 20vh;
  font-family: 'Montserrat';
}

#menudisplay ul {
  list-style-type: none;
}

#menudisplay ul li {
  padding: 110px;
}

.style {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: lightgray;
}

<!DOCTYPE html>
<html>

<head>
  <title>Website</title>
  <meta http-equiv="Content-Type" content="charset=UTF-8" />
  <link rel="stylesheet" href="./mystyle.css" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
</head>

<body>
  <video autoplay muted class="style" id="video">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <p>The video is not working.</p>
  </video>
  <div id="menudisplay">
    <img class="style" src="./img.jpg">
    <ul>
      <li>
        <a href="./ex1.html">EXEMPLE 1</a>
      </li>
      <li>
        <a href="./ex2.html">EXEMPLE 2</a>
      </li>
    </ul>
  </div>
</body>

</html>

score 0 · Answer 2 · answered Apr 27 '21 at 13:33

this should work,

const video = document.querySelector('video');
const menuDisplay = document.querySelector('#menudisplay');
video.addEventListener('ended', (event) => {
    menuDisplay.style.display = 'block';
    //you can also do things with 'event' obj 
});

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event

score 0 · Answer 3 · answered Apr 27 '21 at 13:48

you can use this script to detect when the video finished and what should be displayed after that: video not supported

 <script type='text/javascript'>
         document.getElementById('myVideo').addEventListener('ended',myHandler,false);
               function myHandler(e) {
           // What you want to do after the event
          }
 </script>

score 0 · Answer 4 · answered Apr 27 '21 at 13:55

like the others.

var video = document.getElementById("video");
var videoPl = document.getElementById("menudisplay");

video.addEventListener('ended', function(e) {
  videoPl.style.display = 'block'
})

https://www.w3schools.com/jsref/event_onended.asp

How to display a div element when HTML5 video ends

4 Answers4