Angular 4/5 load video/mp4 content using GET-request

Question

I'm trying to load a mp4 video file from a secure API using a get request.

In the API documentation we have:

Request (GET): /cma/contentmanager/getfragment?fragmentid=x Header: Key – "Authorization", Value – "Bearer "

Response (JSON): Content-Type – video/mp4

I did the following:

1. Create loader in the request service

public getVideo(url:string): Observable<any> {
        const headers = new HttpHeaders({ 'Authorization': 'Bearer ' + this.authenticationService.token, 'Content-Type': 'video/mp4' });
        const options = { headers: headers };
        return this.http.get(url, options);
    }

2. Run the loader in component

export class MovieComponent implements OnInit {

@ViewChild('videoPlayer') videoplayer: any;
videoUrl: string = '/cma/contentmanager/getfragment?fragmentid=';
videoSource: any;

private loadVideo(id) {
        this.requestService.getVideo(this.videoUrl+''+id) // get video for fragment from secure API
            .subscribe(data => {
                this.videoSource = data;
            })
}
}

3. Add videoplayer to html

<span (click)="loadVideo(dataItem.Id)">Load {{ dataItem.Name }}</span>

<div class="video">
    {{videoSource}}
</div>

But video is missing. What wrong with me?