Angular 2 - change videos src after clicking on div

Question

I have problem with video src. After clicking on my div (camera) in source code I can see that video src is changing properly, but videos arent being played. What should I do?

Below are my components - streaming.component.ts (responsible for displaying videos of chosen camera component) and camera.component.ts (for viewing icon with camera name)

streaming.component.ts

import {Component} from '@angular/core';
import {CameraComponent} from '../camera/camera.component';

@Component({
   moduleId: module.id,
   selector: 'streaming',
   template: `
            <camera cameraName="Kamera 1" (click)='cameraStream("sample.mp4")'></camera>
            <camera cameraName="Kamera 2" (click)='cameraStream("sample2.mp4")'></camera>
            <camera cameraName="Kamera 3" (click)='cameraStream("sample3.mp4")'></camera>
            <camera cameraName="Kamera 4" (click)='cameraStream("sample4.mp4")'></camera>
            <video width="800" controls>
                <source src = "{{cameraSrc}}" type="video/mp4">
                Your browser does not support HTML5 video.
            </video>
            <p>{{cameraSrc}}</p>
            `,
directives: [CameraComponent]
})
export class StreamingComponent {

 cameraSrc:string;
 constructor() { }

 cameraStream(chosenCamera :string){
    this.cameraSrc=chosenCamera;
  }
 }

Videos are working ,because when I put

<source src = "{{cameraSrc}}" type="video/mp4">

everything is fine.

camera.component.ts

import { Component ,Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'camera',
    templateUrl: 'camera.component.html'
})
export class CameraComponent {
     @Input() cameraName:string = "";

     constructor() { }

 }

Here is what I get after clicking on camera2 for example .

Answer 1

Don't know why, but that way:

<video width="800" [src] = "cameraSrc" controls>
    Your browser does not support HTML5 video.
</video>

It is working.

Answer 2

Changing src is not enough for <video>, you need to reload it:

constructor(private elRef: ElementRef) { }   // To find elements inside component

cameraStream(chosenCamera: string) {
  this.cameraSrc = chosenCamera;
  const player = this.elRef.nativeElement.querySelector('video');
  player.load();
}

Or more generally, you can make your component watch the changes through the OnChanges contract:

cameraStream(chosenCamera: string) {
  this.cameraSrc = chosenCamera;
}

ngOnChanges(changes: SimpleChanges): void {
  if (changes.cameraSrc) {
    const player = this.elRef.nativeElement.querySelector('video');
    player.load();
  }
}

(Of course you don't need to lookup the player element every time if you can secure its unchanging value before, like in ngOnInit)