在Angular中使用可见性API? [英] Using visibility API in Angular?

问题描述

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

I have implemented Visibility API inside a constructor of an Angular component similar to this

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
}

我需要暂停视频，即当可见性"更改为隐藏"时，调用pauseVideo()方法，我该怎么做?

I need to pause the video i.e., call the pauseVideo() method when the Visibility changes to hidden, How do i do it?

推荐答案

我不知道为什么你说document.hidden在事件监听器中不起作用，因为它对我来说很好:

I don't know why you say document.hidden does not work in the event listener as it works just fine for me:

document.addEventListener(
  "visibilitychange"
  , () => { 
    if (document.hidden) { 
      console.log("document is hidden");
    }else{
      console.log("document is showing");
    }
  }
);

如果遇到各种错误，可以打开开发工具(F12)并检查控制台吗?也许打破错误，看看出了什么问题?

If you have an error of sorts could you open the dev tools (F12) and inspect the console? Maybe break on the error and see what's wrong?

这篇关于在Angular中使用可见性API?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！