用于移动设备的Videogular2 VgFullscreenAPI无效

时间:2018-01-03 23:39:50

标签: angular videogular

我正在使用 Videogular2 api进行角度应用。 VgFullscreenAPI 适用于大屏幕设备。但是当它用于小屏幕设备时,它会抛出error。任何领导都表示赞赏。

我无法在plnkr中重现它。

以下是我正在处理的代码。

<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>

1 个答案:

答案 0 :(得分:0)

我已经用小黑客解决了它。 上述错误仅发生在IOS设备上。 enterElementInFullScreen中的vg-fullscreen.api.js函数需要填充请求才能执行全屏功能。对于所有其他设备,它会收到 RequestFullScreen ,但收到的 EnterFullScreen 的IOS设备除外。因此,我已将 APIs.ios 对象中的 request 属性更改为enterElementInFullScreen。我不知道这个黑客是否可以打击我,但在我的情况下工作正常。