title: Show <video> with Angular 2
body: <p>To display videos, I get a video from an API (link to video). I use this link as a source for  in my template. Important: The video is on an external server. Unfortunately, now only the player is shown to me, but no video. The navigation of the player is also not clickable. If I wrote the video URL directly to the template, the video will work without problems.</p>
  
  <p><a href="https://i.stack.imgur.com/BzAAo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BzAAo.png" alt="Player"></a></p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div *ngIf="templates"&gt;
     &lt;video width="400" controls&gt;
          &lt;source src={{templates.media[0].remoteUrl}} type="video/mp4"&gt;Your browser does not support HTML5 video.
     &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Router, ActivatedRoute, Params} from '@angular/router';
  import { Template } from '../models/index';
  import { TemplateService } from '../services/index';
  
  @Component({
    selector: 'app-template-details',
    templateUrl: './template-details.component.html',
    styleUrls: ['./template-details.component.css']
  })
  
  export class TemplateDetailsComponent implements OnInit {
  
    //patient: Patient;
    templates: Template[] = [];
    constructor(private activatedRoute: ActivatedRoute, private templateService: TemplateService) { }
  
   ngOnInit() {
  
      this.activatedRoute.params.subscribe((params: Params) =&gt; {
         let id= params['id'];
         this.showTemplateDetailsForId(id);
      });
   }
  
   private showTemplateDetailsForId(id: number) {
       this.templateService.getTemplateById(id).subscribe(templates =&gt; { this.templates = templates; });
   }
  
  }
  </code></pre>