1

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.

Player

Template:

<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>

component:

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; });
 }

}
Fabian Tschullik
  • 95
  • 1
  • 2
  • 9
  • 1
    you have to tell angular that it can use an "unsafe url" (external url) without destroying it when it renders the html. – Pac0 Sep 06 '17 at 08:30

1 Answers1

3

Usually, in Angular, when you want to use some external URLs you have to explicitly bypass the security filters. This forces you to be conscious of the security risks.

The general documentation on that is there :

https://angular.io/guide/security#bypass-security-apis

See also this thread : How to set iframe src in Angular 2 without causing `unsafe value` exception?

Pac0
  • 21,465
  • 8
  • 65
  • 74