javascript - 在视频播放完后添加一个 div 来替换视频-6ren

javascript - 在视频播放完后添加一个 div 来替换视频

转载作者：太空宇宙更新时间：2023-11-04 15:30:39

如何编写视频代码；这将发挥作用；然后运行到最后。然后视频被替换为 div(特别是在该 #div 中的动画 gif)。

但无论如何；我怎么能写这个？

类似的东西； (但我不想要一个新的窗口/URL；而是一个 div 来替换内联)

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

基本上；视频播放 > 结束 > 视频消失 > 一个 div 替换它(#div 里面有一个动画 gif)。

最佳答案

因此，如果我理解正确的话，您希望播放视频然后视频消失并被包含一些任意内容的 div 替换。

在常规的 HTML/JS/CSS 中，类似这样的东西可以满足您的要求。转换为 jQuery 应该相当容易(而不是您在问题中设置的 window.location 只需将视频样式设置为显示:无和要显示的 div: 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>