title: Angular 4/5 load video/mp4 content using GET-request
body: <p>I'm trying to load a mp4 video file from a secure API using a get request.</p>
  
  <p>In the API documentation we have:</p>
  
  <p>Request (GET): /cma/contentmanager/getfragment?fragmentid=x
  Header: Key – "Authorization", Value – "Bearer "</p>
  
  <p>Response (JSON):
  Content-Type – video/mp4</p>
  
  <p>I did the following:</p>
  
  <ol>
  <li>Create loader in the request service</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>public getVideo(url:string): Observable&lt;any&gt; {
          const headers = new HttpHeaders({ 'Authorization': 'Bearer ' + this.authenticationService.token, 'Content-Type': 'video/mp4' });
          const options = { headers: headers };
          return this.http.get(url, options);
      }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>Run the loader in component</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
                  this.videoSource = data;
              })
  }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>Add videoplayer to html</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;span (click)="loadVideo(dataItem.Id)"&gt;Load {{ dataItem.Name }}&lt;/span&gt;
  
  &lt;div class="video"&gt;
      {{videoSource}}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But video is missing. What wrong with me?</p>