Video play in loop
canzia opened this issue · 1 comments
canzia commented
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
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