Facing a "a3.fc(...)[aMJ(...)] is not a function error" While trying to Full Screen Video Player in Mobile Browser

Viewed 27

I tried to video player fullscreen on the browser as well as mobile. I am facing an issue in mobile fullscreen mode. It's Giving the below error When the fullScreen Function is calling.

enter image description here

I don't know This error coming from Where. Has anyone faced this type of error before? or does anyone knows about the solution for this error?

My Code is below :

HTML Code:

<div #myVle class="video-player position-relative p-0" id="video-player-selecter">
     <video class="video" id="myvideo" 
            style="width: inherit;height: inherit;max-width: 100%;"
            disablepictureinpicture controlslist="nodownload" autoplay muted playsinline>
              Your browser does not support the video tag.
     </video>
</div>

<div class="col-lg-12 p-0">
   <button class="btn btn-theme-select btn-block btn-sm" type="button"
(click)="fullScreen($event)">
         Full Screen      
   </button>
</div>

ts File Code:

@ViewChild('myVle') myVleEle: ElementRef

// This error comes When This Below Function's 'if part' called. "a3.fc(...)[aMJ(...)] is not a function error"

My Function:

fullScreen(event) {
    if(!document.fullscreenElement) {
      if(this.myVleEle.nativeElement)
      {
        event.stopPropagation() // I also checked with removing this line
        if (this.myVleEle.nativeElement.requestFullscreen) { // Also tried with requestFullScreen
          this.myVleEle.nativeElement.requestFullscreen();
        } else if (this.myVleEle.nativeElement.mozRequestFullScreen) {
          this.myVleEle.nativeElement.mozRequestFullScreen();
        } else if (this.myVleEle.nativeElement.webkitRequestFullscreen) { 
          this.myVleEle.nativeElement.webkitRequestFullscreen();
        } else if (this.myVleEle.nativeElement.msRequestFullscreen) {
          this.myVleEle.nativeElement.msRequestFullscreen();
        }
      }
  } else {
      if(document.exitFullscreen) {
          event.stopPropagation() // I also checked with removing this line
          document.exitFullscreen()
      }
    }
}

This Code is Working fine on the web browser also on the web browser responsive view. But When I am trying to Mobile Browser it gives an error. I tried all the browsers like chrome, firefox, opera safari. But, none of the browsers it's worked. Can anyone suggest what is missing here?

Thank you.

0 Answers
Related