Ionic angular video html 5 fullscreen via function

Ionic Framework
1

I am trying to enable fullscreen video with this fn → 

toFullScreen() {
    let showed = this._authService.user.building.streams.filter(obj => obj.show)[0];
    if (showed) {
      var player = <HTMLVideoElement>document.getElementById(showed.url);
    }
    if (player.requestFullscreen)
    this.fullScreen().then(res => console.log('succesfully fullscreen')).catch(e => console.log(e))

  }

  fullScreen() {
    let retries = 0;
    const self = this;
    return new Promise((resolve, reject) => {
      function toFull() {
        let showed = self._authService.user.building.streams.filter(obj => obj.show)[0];
        if (showed) {
          var player = <HTMLVideoElement>document.getElementById(showed.url);
        }
        if (player.requestFullscreen)
        player.requestFullscreen().then(res => {
          resolve(res);
        }).catch(e => {
          console.log(e);
          if (retries <= 3) {
            toFull();
            retries++;
          } else {
            reject(e);
          }
        })
      } toFull();
    })
  }

Sometimes I get Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture. but others it works okey…

Any idea how to avoid that error ALWAYS? I made that fn to repeat request if gets error

2

These kinds of APIs need to be called via a user gesture and cannot be called programmatically in your code.

For example, calling requestFullScreen in your component’s init method will not work because it was not initiated by a user gesture. Calling requestFullScreen in the click event callback on a button will work because the button is clicked by a user.

I would check your code to ensure that toFullScreen is only being called as a result of a user gesture.

3

The weird thing is sometimes I can get it work and I dont know why… I am calling that fn when screen rotation change

 this.screenOrientation.onChange().subscribe(
      () => {
        console.log(this.screenOrientation.type)
        if (this.rotation.indexOf('landscape') == -1 && this.screenOrientation.type.indexOf('landscape') > -1) {
          this.toFullScreen();
        } else if (this.rotation.indexOf('landscape') > -1 && this.screenOrientation.type.indexOf('portrait') > -1) {
          this.exitFullScreen()
        }
        this.rotation = this.screenOrientation.type;

      }
    );

Like I said… it works sometimes

4

Which browser are you testing this in?

5

Android device. Its a mobile app. I wont build for browsers

6

Looking at the code here, toFullScreen is not being called as a result of a user gesture, so I would not expect it to work consistently.

Some webviews/browsers implement this differently, but most give you a “grace period” of up to 1 second to have user gestures propagate through your code. For example, the webview on iOS 15 gives you a 1 second time limit to propagate user gestures through requestAnimationFrame: New WebKit Features in Safari 15 | WebKit

Removing as much async code as possible and ensuring this fullscreen call is a direct result of users gestures is going to be important here to get this working consistently.

2 Likes
7

Thanks you so much. Now I understand a bit more. Its what you say. When I click a button and flip phone it works. It seems like requestFullscreen api thinks that is a gesture. When I click, wait 2 seconds, its not work. I will figured it out how to make it work efficently. Maybe I need to use a plugin for video.