Javascript 视频结束后重定向到图像

我在一个网站上工作，我们一进入网站就有视频。 问题是它刚刚结束，我想在它结束后用一个图像替换它。 有没有办法在同一个容器中重定向它

  <video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
          <source src="videos/trailer.webm" type="video/webm">
          <source src="videos/trailer.mp4" type="video/mp4">
          <source src="videos/trailer.ogv" type="video/ogg ogv">

  </video>

---

您必须使用JavaScript来检测视频结束，但它很容易实现：

var video = document.getElementById('video_background');

video.addEventListener('ended', function() {
    // show image here
}, false);

我建议以一个父容器为目标，该容器隐藏了一个预加载的图像，并且在事件开始时切换到该容器（显然还隐藏了视频元素）

---

您也可以动态添加图像，但请注意，加载图像时会有延迟。

您需要将视频标签包装在div容器中。请尝试以下代码：

CSS:

HTML:

编辑：如何平滑过渡淡入淡入或其他

我将使用jQuery来实现这一点，因为它是用这样的功能构建的

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"> 
var video = $('#video_background');
var image = $('#image_background');

video.on('ended', function() {
    $(this).fadeOut('200',function(){//$(this) refers to video
        image.fadeIn('200');
    });
});
</script>

var video=$（“#video_background”）；
var image=$（“#image_background”）；
video.on（'end'，function（）{
$（this）.fadeOut（'200'，function（）{/$（this）指的是视频
image.fadeIn（'200'）；
});
});

我将如何在那里添加图像。我对javascript非常陌生，所以请原谅我缺乏知识。你还可以详细说明隐藏的元素吗？工作起来很有魅力！除了突然之间我该如何平滑过渡淡入淡入还是什么？@user2861086-感谢接受答案-我添加了一个示例，说明如何使用jQuery实现这一点。如果这对你有好处，你也可以投票决定答案：）

<div id="wrapper"> 
<video id="video_background" preload="auto" volume="5" autoplay="1" width="100%" height="100%">
    <source src="videos/trailer.webm" type="video/webm" />
    <source src="videos/trailer.mp4" type="video/mp4" />
    <source src="videos/trailer.ogv" type="video/ogg ogv" />
</video>
<img id="image_background" src="yourImage.jpg" width="100%" height="100%" />
</div> 

var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
    video.style.display = 'none';
    image.style.display = 'inline';
}, false);

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"> 
var video = $('#video_background');
var image = $('#image_background');

video.on('ended', function() {
    $(this).fadeOut('200',function(){//$(this) refers to video
        image.fadeIn('200');
    });
});
</script>