Videogular2 control outside element

Question

Is there a way to use a controler outside the <vg-player></vg-player> element?

I'm trying to make a fullscreen button outside the <vg-player> like following:

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

This because I want this button on another place, not ontop of the video.

The code above gives me following Error: ERROR TypeError: Invalid event target

score 2 · Accepted Answer · answered Nov 14 '17 at 10:02

2

Found solution myself.

using the videogular2 API.

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

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

answered Nov 14 '17 at 10:02

Fig

275
1
7
19

score 0 · Answer 2 · answered Sep 25 '19 at 11:16

you can create a button like:

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

Videogular2 control outside element

2 Answers2