我正在寻找一种将鼠标悬停在触发播放视频的图像上的方法。当鼠标不再位于图像上方时,应再次显示图像(海报?)。视频上也应该显示文本。请参阅下面的Loop示例。他们对他们的案例有这种悬停效果。 我尝试过使用图像叠加层或海报图像的多种解决方案,但是这些解决方案都无法使我从图像过渡到视频。 请参见下面的代码。
我不知道如何在悬停时获取此“ Explore”文本的图像/视频上添加文本,如Loop的示例:https://www.agentur-loop.com/(将鼠标悬停在“数字”上以查看效果)。
编辑1:在这里:agentur-loop.com/cases,它们在从图像到视频的悬停上有一个非常平滑的过渡,如果我将鼠标悬停在视频上,它会平滑地过渡/淡入(海报)图像。在下面的最底部可以看到我的当前状态:fredericlouis.com/fredericlouis.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>
答案 0 :(得分:1)
:hover
在悬停时隐藏/显示文本该解决方案使用普通的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>
答案 1 :(得分:0)