Angular 2-单击div后更改视频src [英] Angular 2 - change videos src after clicking on div
本文介绍了Angular 2-单击div后更改视频src的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对视频src有问题.在源代码中单击我的div(摄像机)后,我可以看到video src正确更改,但是正在播放视频.我该怎么办?
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?
下面是我的组件-stream.component.ts(用于显示所选摄像机组件的视频)和camera.component.ts(用于查看带有摄像机名称的图标)
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;
}
}
因为我放了
<source src = "{{cameraSrc}}" type="video/mp4">
一切都很好.
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() { }
}
推荐答案
不知道为什么,但是那样:
Don't know why, but that way:
<video width="800" [src] = "cameraSrc" controls>
Your browser does not support HTML5 video.
</video>
正在工作.
这篇关于Angular 2-单击div后更改视频src的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文