Ionic angular video html 5 fullscreen via function

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

1 post - 1 participant

Read full topic