<vg-player> 元素外的 Videogular2 控件答案

【问题标题】：Videogular2 control outside <vg-player> element<vg-player> 元素外的 Videogular2 控件
【发布时间】：2017-11-13 14:18:25
【问题描述】：

有没有办法在<vg-player></vg-player> 元素之外使用控制器？

我正在尝试在<vg-player> 之外制作一个全屏按钮，如下所示：

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

  <vg-player>
    <vg-controls>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video [vgMedia]="media" #media id="singleVideo" preload="auto"  autoplay>
      <source src="assets/videos/mov_bbb.mp4" type="video/mp4"/>
    </video>
  </vg-player>´

这是因为我希望此按钮位于另一个位置，而不是视频顶部。

上面的代码给了我以下错误：ERROR TypeError: Invalid event target

【问题讨论】：

标签： angular html5-video videogular html5-fullscreen

【解决方案1】：

自己找到了解决方案。

使用 videogular2 API。

    <vg-player (onPlayerReady)="onPlayerReady($event)">
       <video> <source srcs="myvideo"/></video
    </vg-player>

fullscreen() {
        this.vg.fsAPI.toggleFullscreen();
    }

【讨论】：

【解决方案2】：

您可以创建如下按钮：

<vg-player (onPlayerReady)="onPlayerReady($event)">
   <video> <source srcs="myvideo"/></video
</vg-player>

<button type="button" (click)="fullscreen()"> Fullscreen </button>

<script>

  function fullscreen(){
    document.getElementsByTagName('video')[0].fullscreen();
  }
</script>

【讨论】：