添加div以在视频播放后替换视频 [英] Add a div to replace Video after Video Plays Through
问题描述
如何编写视频代码;将发挥作用;并在它运行到最后。然后用 div 替换视频（特别是在#div中使用动画gif）。
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?
类似的东西; （但我不想要新的Window / URL;但是要替换内联的div）
$oVideo.bind('ended', function() {
window.location = 'http://coolurl.com';
$oVideo[0].pause();
$oPause.hide();
$oPlay.css('display', 'block');
});
基本上;视频播放>结束>视频消失> div替换它（#div中带有动画gif）。
Basically; Video plays through > it ends > Video disappears > A div replaces it (#div with an animated gif in it).
推荐答案
所以，如果我理解正确，你想要播放视频，那么视频就会消失，并被包含一些任意内容的div替换。
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常规的HTML / JS / CSS就像你要求的那样。应该很容易转换为jQuery（而不是你在问题中设置的window.location，只需在视频上设置要显示的样式：none和要显示的div：block）
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>
这篇关于添加div以在视频播放后替换视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
