videogular / videogular2

The HTML5 video player for Angular 2
https://videogular.github.io/videogular2-showroom/#/
MIT License
670 stars 211 forks source link

Video play in loop #878

Closed canzia closed 4 years ago

canzia commented 4 years ago

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?

sliceofbytes commented 4 years ago

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