Jump to content
Sign in to follow this  
warrens0017

HTML: Image displays after video background

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×