videogular/videogular2

Video play in loop

canzia opened this issue · 1 comments

I'm trying to insert videos that once played continue loop playback.
Is it possible to do this with a command to insert into the tag?

You can loop single videos by just adding the loop attribute to the video tag.

<vg-player>
    <video #media [vgMedia]="media" id="singleVideo" preload="auto" controls autoplay loop>
        <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogg" type="video/ogg">
        <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
    </video>
</vg-player>

For multiple videos just change the source once the first video has ended with autoplay enabled.

<vg-player>
    <video #media controls autoplay
    [vgMedia]="media" 
    [src]="source"
    preload="auto"   
    (ended)="switchSource()">
    </video>
</vg-player>
export class AppComponent   {
  vid1 = 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
  vid2 =  'https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/Polar_orbit.ogv/Polar_orbit.ogv.360p.vp9.webm'
  source = this.vid1;


  switchSource() {
    this.source = this.source === this.vid1 ? this.vid2 : this.vid1;
  }
}

Example: https://stackblitz.com/edit/ngx-videogular-yfoo7g?file=src%2Fapp%2Fapp.component.ts