CODEWITHSUNDEEP
javascripthttp-redirecthtml5-video
new_frontenddev
new_frontenddev

Reputation: 173

redirect to image after video ends

i am working on a site that has a video as soon as we enter the site. The problem is it just ends and I want to replace it with an image after it ends. Is there a way I can redirect it within the same container.?

  <video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
          <source src="videos/trailer.webm" type="video/webm">
          <source src="videos/trailer.mp4" type="video/mp4">
          <source src="videos/trailer.ogv" type="video/ogg ogv">

  </video>

Upvotes: 2

Views: 3712

Answers (2)

Arnaud Leyder
Arnaud Leyder

Reputation: 7002

You need to wrap your video tag in a div container. Try the following code:

CSS:

#wrapper{
width:640px;
height:360px;
background:#000;
}
#image_background{
display:none;
}

HTML:

<div id="wrapper"> 
<video id="video_background" preload="auto" volume="5" autoplay="1" width="100%" height="100%">
    <source src="videos/trailer.webm" type="video/webm" />
    <source src="videos/trailer.mp4" type="video/mp4" />
    <source src="videos/trailer.ogv" type="video/ogg ogv" />
</video>
<img id="image_background" src="yourImage.jpg" width="100%" height="100%" />
</div>

JS:

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 = 'inline';
}, false);

EDIT: how do i smooth-en the transition fade it in or something?

I would use jQuery for this as it is built with such functionalities. 

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"> 
var video = $('#video_background');
var image = $('#image_background');

video.on('ended', function() {
    $(this).fadeOut('200',function(){//$(this) refers to video
        image.fadeIn('200');
    });
});
</script>

Upvotes: 1

user1693593
user1693593

Reputation:

You'll have to use JavaScript to detect video end but it's easy to implement:

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

video.addEventListener('ended', function() {
    // show image here
}, false);

I would recommend to target a parent container which has a pre-loaded image hidden and which you toggle to when the event kicks in (obviously also hiding the video element).

You could also add the image dynamically but be aware of that you will have a delay while the image is loading.

Upvotes: 2

Related Questions