Add a div to replace Video after Video Plays Through

How can I code a video; that will play through; and after it runs to the end. The video is then replaced with a div (Specifically within that #div an animated gif).

But in anycase; how could I write this?

Something like; (But I don't want a new Window / URL; but a div to replace inline)

$oVideo.bind('ended', function() {
window.location = 'http://coolurl.com';
$oVideo[0].pause();
$oPause.hide();
$oPlay.css('display', 'block');
});

Basically; Video plays through > it ends > Video disappears > A div replaces it (#div with an animated gif in it).

Answers:

Answer

so, if I understand correctly, you are looking to have a video play then the video disappear and be replaced with a div containing some arbitrary content.

in regular HTML/JS/CSS something like this does what you're asking for. Should be fairly easy to convert to jQuery (rather than the window.location you're setting in the question simply set the style on the video to display:none and the div you want to show to display:block)

<!DOCTYPE html> 
<html> 
<head>
</head>
<body> 
<div class="vidBox" id="box">
    <video class="vid" poster="http://www.rufan-redi.com/assets/lizard_goldeye.jpg" preload="metadata" controls="true" id="video1" height="240" width="360">
        <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4">
    </video>
    <div id="other" style="display:none; width:400px; height:300px; background-color:#f0f0f0">
        This appears after the video ends
    </div>
</div>
<script>
    var vid=document.getElementById('video1');
    vid.addEventListener("ended", hideVideo, false);

    function hideVideo() {
        var vid=document.getElementById('video1');
        var other=document.getElementById('other');
        vid.removeEventListener("ended", hideVideo, false);
        vid.style.display='none';
        other.style.display='block';
    }
</script>
</body> 
</html>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.