javascript - 在 Angular 中使用可见性 API？

Question

我已经在类似于此的 Angular 组件的构造函数中实现了 Visibility API

constructor() {
    var hidden, state, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    }

    document.addEventListener(visibilityChange, function() {
        if(status == hidden){
            console.log("Hidden");
        }
        else if(status != hidden){
            console.log("Visible");
        }
    }, false);
}

pauseVideo(){
    //Video pause code
}

我需要暂停视频，即在 Visibility 更改为 hidden 时调用 pauseVideo() 方法，我该怎么做？

Answer 1

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy, OnInit {
  constructor() {}

  @HostListener('document:visibilitychange', ['$event'])
  visibilitychange() {
    this.checkHiddenDocument();
  }

  checkHiddenDocument() {
    if (document.hidden) {
      this.pauseVideo();
    } else {
      this.playVideo();
    }
  }

  ngOnInit(): void {}

  ngOnDestroy(): void {}
}

您可以使用 hostlistener到 visibilityChange事件。然后查看document.hidden的状态执行一种方法或其他方法。