Angular：播放视频时避免应用闲置，完善5分钟无活动自动登出逻辑

要实现视频播放时不被判定为闲置，你需要监听HTML5视频元素的播放相关事件，将这些事件加入到现有的用户活动事件流中，触发时重置登出计时器。

需添加的视频事件 #

针对HTML5 <video> 元素，推荐监听以下事件：

• playing：视频开始播放（包括暂停后恢复播放）时触发
• timeupdate：视频播放进度更新时触发（播放过程中每秒会触发数次）
• play：视频启动播放动作时触发
• loadeddata：视频加载完成第一帧数据时触发（适配自动播放场景）

Angular中的具体实现 #

1. 在组件模板中给视频元素添加模板引用：

<video #videoPlayer src="your-video-source.mp4" controls></video>

2. 在组件类中通过ViewChild获取视频元素引用，将视频事件合并到现有活动事件流：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { fromEvent, merge } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  @ViewChild('videoPlayer') videoPlayer!: ElementRef<HTMLVideoElement>;

  ngOnInit(): void {
    // 合并原有用户活动事件与视频事件
    const allActivityEvents = merge(
      // 原有事件
      fromEvent(document, 'mousemove'),
      fromEvent(document, 'click'),
      fromEvent(document, 'mousedown'),
      fromEvent(document, 'keypress'),
      fromEvent(document, 'DOMMouseScroll'),
      fromEvent(document, 'mousewheel'),
      fromEvent(document, 'touchmove'),
      fromEvent(document, 'MSPointerMove'),
      fromEvent(window, 'mousemove'),
      fromEvent(window, 'resize'),
      // 新增视频事件
      fromEvent(this.videoPlayer.nativeElement, 'playing'),
      fromEvent(this.videoPlayer.nativeElement, 'timeupdate'),
      fromEvent(this.videoPlayer.nativeElement, 'play'),
      fromEvent(this.videoPlayer.nativeElement, 'loadeddata')
    );

    // 订阅事件流重置登出计时器
    allActivityEvents.subscribe(() => {
      this.resetLogoutTimer();
    });
  }

  // 你的重置计时器逻辑
  private resetLogoutTimer(): void {
    // 示例：清除现有计时器并重新启动5分钟倒计时
    clearTimeout(this.logoutTimer);
    this.logoutTimer = setTimeout(() => {
      this.performLogout();
    }, 5 * 60 * 1000);
  }

  private performLogout(): void {
    // 登出逻辑实现
  }
}

多视频场景适配 #

如果页面存在多个视频元素，可使用ViewChildren获取所有视频元素，循环添加事件监听：

import { ViewChildren, QueryList } from '@angular/core';

// ...

@ViewChildren('videoPlayer') videoPlayers!: QueryList<ElementRef<HTMLVideoElement>>;

ngOnInit(): void {
  const videoEvents$ = this.videoPlayers.map(player => 
    merge(
      fromEvent(player.nativeElement, 'playing'),
      fromEvent(player.nativeElement, 'timeupdate')
    )
  );

  const allActivityEvents = merge(
    // 原有事件...
    ...videoEvents$
  );

  // 后续订阅逻辑不变
}

内容的提问来源于stack exchange，提问作者Ramchendar m