用于移动设备的 Videogular2 VgFullscreenAPI 不工作

Question

我正在为我的 angular 应用开发 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>

Answer 1

我已经用小技巧解决了它。上述错误仅发生在 IOS 台设备上。 vg-fullscreen.api.js 中的函数 enterElementInFullScreen 需要一个 polyfill 请求来执行全屏功能。对于所有其他设备，它接收 RequestFullScreen 除了 IOS 设备它接收 EnterFullScreen。所以我将 APIs.ios 对象中的 request 属性更改为 enterElementInFullScreen。我不知道这个 hack 是否会反击我，但在我的情况下工作正常。

用于移动设备的 Videogular2 VgFullscreenAPI 不工作

Videogular2 VgFullscreenAPI for mobile devices is not working

videogular

angular