Angular 2 - 单击div后更改视频src

Question

我对视频 src 有疑问。在源代码中单击我的 div（相机）后，我可以看到视频 src 正在正确更改，但视频没有播放。我应该怎么办？

下面是我的组件 - streaming.component.ts（负责显示所选相机组件的视频）和 camera.component.ts（用于查看带有相机名称的图标）

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

视频有效，因为当我放

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

一切都好。

相机.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() { }

 }

例如，这是我点击 camera2 后得到的结果。

原文由 Mateusz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不知道为什么，但是那样：

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

这是工作。

原文由 Mateusz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

改变 src 是不够的 <video> ，你需要重新加载它：

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

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

或者更一般地说，您可以让您的组件通过 OnChanges 合同观察变化：

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

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

（当然你不需要每次都查找 player 元素，如果你之前可以确保它不变的值，比如 ngOnInit ）

原文由 Jérôme Beau 发布，翻译遵循 CC BY-SA 4.0 许可协议