Search code examples
angularvideogular

Videogular2 VgFullscreenAPI for mobile devices is not working

I am working on Videogular2 api for my angular application. The VgFullscreenAPI is working fine for large screen devices. But it's throwing error when using it for small screen devices. Any lead is appreciated.

I couldn't able to reproduce the same in plnkr.

The following is the code I'm working on.

<div class="visible-xs">
    <div>
      <vg-player (onPlayerReady)="onPlayerReady($event)">
        <vg-buffering></vg-buffering>

        <vg-scrub-bar>
          <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
          <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>

        <vg-controls>
          <div (click)='replayByTen()'>
            <i class="material-icons" style="font-size: 20px">replay_10</i>
          </div>
          <vg-play-pause></vg-play-pause>
          <div (click)='seekByTen()'>
            <i class="material-icons">forward_10</i>
          </div>

          <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

          <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

          <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

          <vg-mute></vg-mute>
          <vg-volume></vg-volume>

          <vg-fullscreen></vg-fullscreen>
        </vg-controls>

        <vg-overlay-play></vg-overlay-play>

        <video [vgMedia]="media" #media preload="auto" crossorigin>
          <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
          <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
          <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">

        </video>
      </vg-player>
    </div>
  </div>
Solution

  • I have resolved it with small hack. The above error occurs only for IOS devices. The function enterElementInFullScreen in vg-fullscreen.api.js requires a polyfill request to perform the fullscreen functionality. For all other devices, it receives RequestFullScreen except for IOS devices it receives EnterFullScreen. So I have changed request attribute in APIs.ios object to enterElementInFullScreen. I don't know if this hack may hit me back, but working fine in my case.