[SOLVED] Angular 15: Video-source tag works with a hard-coded URL but doesn't work with property binding

Angular 15: Video-source tag works with a hard-coded URL but doesn't work with property binding

I am trying to build a video player in an angular app, and while testing this code with hardcoded values:

<video controls Autoplay="autoplay" autoplay="true">
      <source src="urlFromDB.mov" type="video/mp4" />
</video>

This works totally fine. But when I pass the exact same URL through a property, it doesn't work for some reason.

<video controls Autoplay="autoplay" autoplay="true">
      <source [src]="property" type="video/mp4" />
</video>

In both cases, the HTML source in chrome dev tools showed the same src URL. Wasn't able to find any help specifically for this, any help would be much appreciated.

Solution

I've fixed this: Apparently, the browser has a weird way of evaluating the src attribute on page load, so the best way was to use Renderer2 to dynamically create the <source> tag and append it to <video> (in the ngOnInit function).

Leaving this open for somebody else with the same problem.