javascript - 视频结束后重定向到图像

Question

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

  <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>

Answer 1

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

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

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

我建议定位一个父容器，该容器隐藏了预加载的图像，并且您可以在事件开始时切换到该容器(显然也隐藏了视频元素)。

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