顯示<video>與Angular 2

要顯示視頻，我從API獲取視頻（鏈接到視頻）。我使用此鏈接作爲我的模板中的源代碼。重要提示：視頻位於外部服務器上。不幸的是，現在只有玩家顯示給我，但沒有視頻。玩家的導航也不可點擊。如果我將視頻網址直接寫入模板，則視頻將毫無問題地運行。顯示<video>與Angular 2

模板：

<div *ngIf="templates"> 
    <video width="400" controls> 
     <source src={{templates.media[0].remoteUrl}} type="video/mp4">Your browser does not support HTML5 video. 
    </video> 
</div>

組件：

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) => { 
     let id= params['id']; 
     this.showTemplateDetailsForId(id); 
    }); 
} 

private showTemplateDetailsForId(id: number) { 
    this.templateService.getTemplateById(id).subscribe(templates => { this.templates = templates; }); 
} 

}

來源

2017-09-06 Fabian Tschullik

你一定要告訴角度，它可以使用「不安全的網址」（外部URL）而不破壞它呈現html時。 – Pac0