Making an image show up after video ends-CodePudding

I am working on a webpage that will go and show a button that will link to another page. I found something on here that had something similar but it's not working. It is hiding the button like it should but when the video ends the button does not appear. Here is the code:

<html><head><style>
body {
    background-color: F4F0EC;
    /*background-color: DCDCDC;*/
    /*background-color: lightgrey;*/
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
div.heading {
    width: 40%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Verdana;
    font-size: 18px;
}
div.wrapper {
    width: 40%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
div.image_background {
    display: none;
}
div.copyright {
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    font-family: Verdana;
    font-size: 12px;
    text-align: center;
    color: E21D38;
    margin: 0;
    position: absolute;
    top: 95%;
    -ms-transform: translateY(-2%);
    transform: translateY(-2%);
}
</style>
</head>
<body><br><br>
    <img style="width: 50%;" src="Banner.png" alt="Banner"><br><br><br>
    <div class="heading">Introduction</div><br><br>
    <div class="wrapper"><video width="100%" controls preload="metadata" controlsList="nodownload" id="video_background">
    <source src="/test-video.mp4" type="video/mp4">Your browser does not support the video tag.</video><br></div><br><br>
    <div class="image_background"><img id="image_background" src="/next-button.png" alt="Next Button"></div><br><br><br><br>
    <div class="copyright">&#169; 2021 Takachsin Lodge. All Rights Reserved.</div>
<script type="text/javascript"> 
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 = 'block';
}, false);
</script>
</body>
</html>

Any help on this would be greatly appreciated. What I am trying to do is build a training website that users will watch video trainings and move on to the next segment of the training. I'm not good with JavaScript and so that's why I need some help. I don't know if it can be done or not, but it would be nice if I could also remove the ability to fast forward on these videos as well.

CodePudding user response：

There are a number of issues here.

First, your script is running before your HTML, so you need to move the script to the bottom so that the DOM renders before the script is executed.

Second, var video = document.getElementById('video_background'); refers to the source HTML element, not the video HTML element, so we need to change that to var video = document.getElementById('video');

Third, your CSS is hiding the button, not the image, so when your javascript is changing the image to display: inline, the parent button is still set to hidden. So we need to set an id on that parent element <div id="button"><img src="" alt="Next Button" id="image_background"></div> and make the corresponding changes in our js var image = document.getElementById('button');

The below code works:

<html><head><style>
body {
    background-color: F4F0EC;
    /*background-color: DCDCDC;*/
    /*background-color: lightgrey;*/
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
div.heading {
    width: 40%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Verdana;
    font-size: 18px;
}
div.wrapper {
    width: 40%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
div.button {
    display:none;
}
div.copyright {
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    font-family: Verdana;
    font-size: 12px;
    text-align: center;
    color: E21D38;
    margin: 0;
    position: absolute;
    top: 95%;
    -ms-transform: translateY(-2%);
    transform: translateY(-2%);
}
</style>
</head>
<body><br><br>
    <img style="width: 50%;" src="Banner.png" alt="Banner"><br><br><br>
    <div class="heading">Introduction</div><br><br>
    <div class="wrapper"><video width="100%" controls preload="metadata" controlsList="nodownload" id="video">
    <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4" id="video_background">Your browser does not support the video tag.</video><br></div><br><br>
    <div class="button" id="button"><img src="https://dabuttonfactory.com/button.png?t=Next&f=Open Sans-Bold&ts=30&tc=fff&tshs=1&tshc=666&hp=45&vp=20&w=200&h=50&c=13&bgt=gradient&bgc=e21d38&ebgc=900&bs=1&bc=000&shs=1&shc=999&sho=se" alt="Next Button" id="image_background"></div><br><br><br><br>
    <div class="copyright">&#169; 2021 All Rights Reserved.</div>
</body>

<script type="text/javascript"> 
var video = document.getElementById('video');
var image = document.getElementById('button');
video.addEventListener('ended', function() {
    video.style.display = 'none';
    image.style.display = 'inline';
}, false);
</script>

</html>

CodePudding user response：

At a glance I suspect this isn't working because your script runs before your html is rendered, so your getElementById calls don't find what they're looking for.

Try moving your script to the end, just inside the closing body tag.
I think you'll also need to move the event listener to the instead of the .
Your .button is also display: none, so the image won't be visible regardless of its own display style, because it's inside div.button

Suggestion:

Instead of applying various style rules to multiple elements, toggle a class on the container and have all of your other rules predicated on that in your static css:

const states = ['initial', 'playing', 'finished'];
let stateIndex = 0;

const container = document.querySelector('.video-container');
const video = document.querySelector('.video');

video.addEventListener('click', () => {
  container.classList.remove(states[stateIndex]);
  stateIndex = (stateIndex   1) % states.length;
  container.classList.add(states[stateIndex]);
  console.log(states[stateIndex]);
});

.video-container .video {
  width: 300px;
  background: bisque;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto;
}

.message {
  display: none;
}

.initial .message.initial {
  display: block;
}

.playing .message.playing {
  display: block;
}

.finished .message.finished {
  display: block;
}

<div class="video-container initial">
   <div class="video">Pretend I'm a video. Click me to cycle through states.</div>
    <div class="message initial">I'm visible when state is 'initial'.</div>
   <div class="message playing">I'm visible when the video is playing.</div>
   <div class="message finished">I'm visible when the video is finished.</div>
</div>