Question

如何编写视频代码;将发挥作用;并在它运行到最后。然后视频被替换为 div （特别是在#div中的动画gif）。

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

喜欢的东西; （但我不想要新的Window / URL;但是要替换内联的div）

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

基本上;视频播放＆gt;它结束了>视频消失＆gt; div替换它（#div中带有动画gif）。

Answer 1

所以，如果我理解正确，你正在寻找视频播放，那么视频就会消失，并被包含一些任意内容的div替换。

在普通的HTML / JS / CSS中就像你要求的那样。应该很容易转换为jQuery（而不是你在问题中设置的window.location，只需在视频上设置样式即可显示：none和要显示的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>

添加div以在视频播放后替换视频

1 个答案: