播放视频并显示悬停在图像上的文本

Question

我正在寻找一种方法来实现悬停在一个图像上，触发播放视频。当鼠标不再停留在图像上时，图像(poster?)应该再次显示。视频上也应该有文字显示。请看下面来自Loop的例子。他们在他们的案例中有这种悬停效应。我用imageoverlay或poster image尝试了多种解决方案，但它们都不能让我顺利地从图像过渡到视频。请参阅下面的代码。

我不知道如何在图像/视频的顶部添加文本，在悬停时获得这种“探索”文本，就像Loop：https://www.agentur-loop.com/中的示例(将鼠标悬停在“数字”上可以看到效果)。

编辑1:在这里:agentur-loop.com/case他们有一个非常平滑的悬停从图像到视频的过渡，如果我将鼠标移出视频，它会平滑地过渡/淡出到(海报)图像。我现在的状态可以在下面看到:fredericouis.com/fredericouis.com/admin，谢谢！

$(document).ready(function() {
  $('.video2').each(function(i, obj) {
    $(this).on("mouseover", hoverVideo);
    $(this).on("mouseout", hideVideo);
  });
});

function hoverVideo() {
  $(this).find(".overlayImage").hide();
  $(this).find(".thevideo")[0].play();
}

function hideVideo(video) {
  $(this).find(".thevideo")[0].currentTime = 0;
  $(this).find(".thevideo")[0].pause();
  $(this).find(".overlayImage").show();
}

video2 {
  width: 1200px;
}

.overlayImage {
  position: absolute;
}

<div class="video2">
  <img src="images/apple_vr10.png" class="overlayImage" width="600" alt="apple vr" />
  <video class="thevideo" loop muted poster="images/apple_vr10.png" onmouseout="this.pause()">
        <source src="videos/apple_vr.mp4" type="video/mp4">
    </video>
 </div>

Answer 1

1. 将文本和视频放在一个div中，并使用相对和绝对位置使第一个位置显示在视频前面
2. 使用CSS :hover在悬停时隐藏/显示文本
3. 使用JS播放/暂停视频，具体取决于鼠标是否悬停在视频

上

该解决方案使用普通的JS来帮助非jQuery用户，但是可以很容易地调整为使用jQuery减少几行代码。

​

let div = document.querySelector('div');
let video = document.querySelector('video');

div.onmouseover = () => video.play();
div.onmouseout = () => video.pause();

div {
  width: 100%;
  position: relative;
}
div > p {
  width: 100%;
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  color: white;
  transition: all .5s;
}
div:hover > p {
  opacity: 0;
}
div > video {
  width: 100%;
  position: absolute;
}

<div>
  <video
    src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"
    muted
  ></video>
  <p>Hover to play the video!</p>
</div>

​

Answer 2

网站agentur-loop切换多个图片(在较小的时间内)悬停在文本上...

您可以通过为每个幻灯片添加过渡时间为0.1s (非常小)的幻灯片放映(旋转木马)来做到这一点；

谢谢..。