Facing "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture" Issue in Angular

Viewed 317

I am trying to video fullScreen View When I am switching to Mobile landscape view. I used custom fullscreen and exit fullscreen mode.

My Code is below :

ngAfterViewInit() {
    console.log("ngAfterViewInit()")
    window.addEventListener('orientationchange',()=>{
    //  setTimeout(() => {
        this.doOnOrientationChange()
      // }, 1000);
    });
}

doOnOrientationChange() {
    console.log("doOnOrientationChange()",window.innerWidth,window.innerHeight)
    if(window.innerWidth > window.innerHeight)
    {
      //console.log("doOnOrientationChange() - if part called")
      //Potrait View
      this.isLandsCape = false
      if(this.myService.fullScreenButtonMode)
      {
          if(document.readyState === "complete") {
          if (document.fullscreenElement) {
            document.exitFullscreen();
          }
        }
      }
    }
    else 
    {
      //console.log("doOnOrientationChange() - else part called")
      //LandsCape View
      this.isLandsCape = true
      if(!this.myService.fullScreenButtonMode)
      {
        try{
          if(this.myEle.nativeElement)
          {
            if (!document.fullscreenElement) {
        
              if (this.myEle.nativeElement.requestFullscreen) {
                this.myEle.nativeElement.requestFullscreen();
              } else if (this.myEle.nativeElement.mozRequestFullScreen) {
                this.myEle.nativeElement.mozRequestFullScreen();
              } else if (this.myEle.nativeElement.webkitRequestFullscreen) {
                this.myEle.nativeElement.webkitRequestFullscreen();
              } else if (this.myEle.nativeElement.msRequestFullscreen) {
                this.myEle.nativeElement.msRequestFullscreen();
              }
            }
          }
        }
        catch(e)
        {
          console.log("Exaption : ",e)
        }
      }
    }
  }

For Switching I used "orientationchange" EventListner in ngAfterView. And Inside Event Lsitner I am trying to Video FullScreen. Switching is working fine But Video FullScreen creates the problem.

this.myEle.nativeElement.requestFullscreen();

This line is working fine. When I put it into the click Event(Take one button and inside put a click event). But I need to do this automatically when someone goes to landscape mode. Using Automatically, Sometimes It's Working and Sometimes It's randomly giving the below error.

"Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture"

enter image description here

I researched and explore this error. But not find any good solution for this. Can anyone know How to solve this issue?

Thank you.

0 Answers
Related