URL returned from server, not accessible in client angular app

Question

I am trying to create a video rendering app that stores videos on AWS S3 Bucket and returns the location to the angular app, where I am binding the URL to "src" of "video" HTML tag. But it is not rendering the video.

the angular code can be found below for reference:

app.component.ts

    source:string = "";
    
    ngOnInit(): void {
        this.http.get('http://localhost:8080/video/f82c2d2dd221903182626788fc0a1db3', {responseType:'json'} )
        .subscribe((res) => {
          console.log(Object.values(res)[0]['location']);
          this.source = Object.values(res)[0]['location'];   
        })
    }

app.component.html

    <div class="row">
        <div class="col-sm-10 col-sm-offset-2 col-md-offset-2">
          <video width="320" height="240" controls>
            <source [src]='source' type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>

However, when I tried to hard code the location returned from server directly to the "src" attribute, it is getting rendered.

I am not able to understand the behavior.