Angular 8 - When src changes programatically HTML video element does not change the video

Question

I have a MP4 video playing in the background in my web app. However when I update the bindings and change the video source the video stays the same

<video autoplay loop>
    <source [src]="videoSrc" type="video/mp4">
</video>
{{videoSrc}}

My TS code:

this.videoSrc = "video.mp4";
...
interval(10000).subscribe(x => {
  this.videoSrc = "otherVideo.mp4";
});

Why aren't the bindings being updated?

Calves

@RameshReddy Yes that's why I put it there – Calves

Can you console.log(this.videoSrc) in interval? – Amethist

I guess it works, only when otherVideo.mp4 is fully downloaded. Have you checked it? – Grass

@Amethist Yes it shows both sources when using console.log – Calves

@TonyMarko Is there a way to pre load both videos? – Calves

#39180915 – Amethist

If answer above not resolve your problem, you could preload your component by display none component and use (load) attribute to show component onload. – Grass

Answer 1

You should bind the src property in the video tag instead of binding the source tag.

<video autoplay loop muted playsinline="true" webkit-playsinline="true" [src]="videoSrc" type="video/mp4">
</video>

Check this stakblitz https://stackblitz.com/edit/angular-ivy-hlqbza

Luminiferous

Saved my day ;) – Implicatory

This worked like a charm. Should be checked as the asnwer ! – Idaliaidalina