如何解决悬停/鼠标悬停html时将视频源更改为图像源
所以我在 flexBox 中有视频缩略图。当鼠标悬停在视频上时,如何更改它以显示图像? 我可以将视频更改为视频,将图像更改为图像,但是我不确定如何将源从视频更改为图像,而且由于它在 flexBox 中,我无法在视频下隐藏图像
<video autoplay loop muted src="./video.mp4" type="video/mp4 id="video""
onmouSEOut="this.src='./video.mp4'"
onmouSEOver="this.src='./image.png'"> </video>
我也尝试过用 jQuery 来替换整个视频源块,但我认为我做对了
$("#video").mouSEOver( function () {
var $image = $("img").attr('src','./image.png');
$(this).replaceWith($image );
});
https://codepen.io/saltykiam/pen/abmGbWK
编辑:如何在视频上叠加图像
解决方法
这里是如何将图像添加到叠加层中并在有人播放视频时显示的基本思想,希望您也能找到相同的内容
.videoWraper{
position:relative;
display:block;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
}
video#video {
width: 100%;
}
.videoWraper:hover .img-overlay{
opacity:1;
}
<div class="videoWraper">
<video autoplay loop muted src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" id="video"> </video>
<img class="img-overlay" src="https://picsum.photos/200">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。