HTML: Image displays after video background

[warrens0017]

Hi everyone,

Have been working with video backgrounds and everything is going great. I have surfed the web and I have been trying to find out how to display an image after a video plays. I know how I can do a poster image before a video plays, I want a poster image to be displayed after the video is done. Now I don't know where I need to post this so I figure I start here. I will post my code down below so you can take a look at what I already have.

Thanks in advance!

<video onloadstart='this.volume=0.3' id='bg-video-index' onclick='playVideo' autoplay>
  <source src='media/bg-video/bg-video.mp4' type='video/mp4'>
  Your browser does not support HTML5 video.
</video>

<script src="text/javascript">
function playVideo(){
    var video = document.getElementById('bg-video-index');
    video.play();
    video.addEventListener('ended',function(){
        window.location = 'media/images/bg/logo.png';
    });
}
</script>

 

[Ingolme]

What your code currently does is to redirect the browser to an image when the video ends. What I think you actually want to do is to display an image in place of the video on the same page. For that, you need to have an <img> element on the page styled the same was as the video that's invisible. When the video ends, hide or delete the video and make the image visible using the style property or DOM methods. Another option is to use Javascript to set the background image property of the container after deleting the video.