问题描述
我向页面上的视频添加了一些控件,例如倒带或重新加载,但我希望这些添加的控件像视频的默认控件一样通过移动鼠标(淡入)并在 2 秒后停止移动(淡出)来淡入/淡出.
var videoMov = document.getElementById("video1");
videoMov.onmousemove = function () {
if (videoMov.currentTime > 0 && !videoMov.paused && !videoMov.ended && videoMov.readyState > 2) {
let timeout;
clearTimeout(timeout);
timeout = setTimeout(function () {
$(".reload-video").fadeOut("slow");
},2000);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<video id="video1" muted class="col-12 video-tut" height="720" controls controlsList=" " poster="./images/6.jpg">
<source src="./video/1.mkv#t=15,120">
</video>
解决方法
测试了几种方法后我找到了答案。
let sit = 0;
let timeout;
var videoMov = document.getElementById("video1");
videoMov.onmousemove = function () {
if (videoMov.currentTime > 0 && !videoMov.paused && !videoMov.ended && videoMov.readyState > 2) {
if (sit === 1) {
$(".reload-video").css("display","inline");
$(".rewind-video").css("display","inline");
}
clearTimeout(timeout);
timeout = setTimeout(function () {
if(!videoMov.paused){
$(".reload-video").fadeOut();
$(".rewind-video").fadeOut();
sit = 1;
}else{
$(".reload-video").css("display","inline");
}
},2500);
}
}