Add a div to replace Video after Video Plays Through

前端未结

关注

 1  2018

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 g

相关标签:

1条回答

爱一瞬间的悲伤

2021-01-22 01:12

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>

0 讨论(0)