像标准视频播放器一样在一段时间后隐藏叠加层

Posted 2023-01-19

我正在制作自定义视频播放器，其中有一个包含视频播放器控件的覆盖图

我的播放器开始在全长和高度上工作。

现在我要在5秒钟后将鼠标停在上方以隐藏覆盖物。

现在的问题是，当以下功能鼠标悬停在.ts文件中时，计时器的同步受到损害。

因此，如果我连续移动鼠标，则覆盖层开始闪烁。

请为我提供解决问题的方法。

以下是我的html代码

<div class="video-container" #videoFullscreen>
    <div class="video-wrapper" mouse-move>
      <video class="video video-js" data-dashjs-player  id="myVideo"  autoplay #videoPlayer>
        <source src=" videoSource " type="video/mp4" />
      </video>


      <!-- overlay -->
      <div class="overlay" [class.hideOverlay]="hideTop">  
        <!-- top controls  -->
          .
          .
          <!-- lower controls  -->

        </div>
      </div>

这是我的类型脚本代码

@HostListener('document:mousemove', [ '$event' ]) //fuction to display and hide element sue to mouseover
    onMouseMove($event) 
            this.hideTop = false;
            setTimeout(() => 
                this.hideTop = true;
            , 5000);
    

这是我的CSS代码：

.overlay 
    display: flex;

.hideOverlay 
    display:none;

请帮助我解决这个问题。

答案

我将使用rxjs来解决此问题，如下所示：

ngOnInit(): void 
    fromEvent<MouseEvent>(document, 'mousemove').pipe(tap(() => 
      console.log("show it!");
      this.hideTop = false
    ), switchMap((event) =>
      timer(5000).pipe(tap(() => 
        console.log("hideit");
        this.hideTop = true;
      ))
    )).subscribe();
  

如果您的组件被破坏以防止内存泄漏，请不要忘记取消订阅！

另一答案

存储lastHover时间并与之进行比较。

private lastHover = 0;
@HostListener(...)
onMouseMove($event) 
    this.lastHover = new Date().getTime()
    This.hideTop = true;
    setTimeout( () => 
        ...
        if(lastHover + 5000 < new Date().getTime()) 
            This.hideTop = true;
        
    , 5000)