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

我建议定位一个隐藏了预加载图像的父容器，并在事件发生时切换到该容器（显然也隐藏了视频元素）。

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

Answer 2

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

CSS：

#wrapper{
width:640px;
height:360px;
background:#000;
}
#image_background{
display:none;
}

HTML：

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

JS：

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

编辑： 我如何顺利过渡淡入其中？

我会使用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>

视频结束后重定向到图像

2 个答案: