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?

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