Using visibility API in Angular?

If you work with Angular 4+, you can use Module angular-page-visibility (https://www.npmjs.com/package/angular-page-visibility).

Here is an example with a component class :

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

    constructor() {
    }

    ngOnInit(): void {
    }

    @OnPageVisible()
    logWhenPageVisible(): void {
        console.log( 'OnPageVisible' );
        console.log( 'visible' );
    }

    @OnPageHidden()
    logWhenPageHidden(): void {
        console.log( 'OnPageHidden' );
        console.log( 'hidden' );
    }

    @OnPageVisibilityChange()
    logWhenPageVisibilityChange( isPageVisible: boolean ): void {
        console.log( 'OnPageVisibilityChange' );
        if ( isPageVisible ) {
            console.log( 'visible' );
        } else {
            console.log( 'hidden' );
        }
    }

    ngOnDestroy(): void {
    }
}

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");
    }
  }
);

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?

 @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 {}
    }

You can use a hostlistener to the visibilityChange event. Then check the state of the document to do one method or others.