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

一切都很好。

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

不知道为什么，但那样：

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

它正在发挥作用。

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）

Answer 3

在html模板中使用视频标记

<video #video id="video" width="100%" height="100%" controls></video>

<mat-icon (click)="playVideo(url)">
            play_arrow
          </mat-icon>

在组件中

@ViewChild('video')

public video: ElementRef;

playVideo(url: string) {
    this.video.nativeElement.src = url;
    this.video.nativeElement.load();
    this.video.nativeElement.play();
  }

Answer 4

似乎run: Mar 21, 2018 11:59:48 PM com.teknikindustries.yahooweather.WeatherDoc <init> null SEVERE: null java.net.UnknownHostException: xml.weather.yahoo.com at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:184) at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392) at java.net.Socket.connect(Socket.java:589) at java.net.Socket.connect(Socket.java:538) at sun.net.NetworkClient.doConnect(NetworkClient.java:180) at sun.net.www.http.HttpClient.openServer(HttpClient.java:463) at sun.net.www.http.HttpClient.openServer(HttpClient.java:558) at sun.net.www.http.HttpClient.<init>(HttpClient.java:242) at sun.net.www.http.HttpClient.New(HttpClient.java:339) at sun.net.www.http.HttpClient.New(HttpClient.java:357) ... BUILD SUCCESSFUL (total time: 10 seconds)元素的src属性并不像动态一样。尝试将标记更改为：

<source>

这样，只有<source *ngIf="cameraSrc" src="{{cameraSrc}}" type="video/mp4">中确实存在值时才会创建DOM元素。

Answer 5

我不能发表评论，因为我太新了，抱歉。

插值不适合你的原因是因为它用于数据绑定，而不是属性绑定。括号表示它是元素的属性，而不是附加到静态属性的可观察对象。

Answer 6

我遇到了类似的问题......我决定使用支持数组

<span *ngFor="let video of app.videoPlayer.videos">
<img src="{{video.artBig()}}" style="width: 1920px;height: 1080px;top: 0px;left:0px;z-index: -1; position: absolute;"/>

<video preload="auto" crossorigin controls autoplay
   style="width: 1920px;height: 1080px;top: 0px;left:0px;z-index:1; position: absolute;">
  <source src="{{video.url()}}" type="{{video.mimeType()}}">
</video>
</span>

每当我的阵列被清空时，视频组件就会消失......如果我的阵列发生变化，组件就会更新。

像魅力一样，希望它有所帮助。

Answer 7

在Angular 6中，这是示例。

    <div style="text-align:center">
  <div *ngFor="let item of data" >
    <div class="module hero">
      <a href="javascript: void(0)" (click)="showVideo(item)">
       {{item.name}}
        </a>
    </div>
  </div>
</div>
<div *ngIf="selectedItem">
  <video controls autoplay #myVideo>
    <source *ngIf="selectedItem" [src]="selectedItem.url" type="video/mp4" />
    Browser not supported
</video>
</div>

组件代码为

showVideo(item: any){
    this.selectedItem =null;
    this.selectedItem =item;  
    this.myVideo.nativeElement.src = item.url; 
  }

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

7 个答案: