javascript - 如何淡入和淡出视频中添加的控件，如默认控件

Question

我在页面上的视频中添加了一些控件，例如倒带或重新加载，但我希望这些添加的控件像视频的默认控件一样通过移动鼠标（淡入）并在 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>

标签： javascriptvideo

Answer 1

在测试了几种方法后，我找到了答案。

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");
                $(".rewind-video").css("display", "inline");
              }     
            }, 2500);
        }
    }