Angular4 - 无法绑定到“vgHls”，因为它不是“视频”的已知属性。

Question

我使用的代码是 angular4，我想显示视频流宽度 videogular2 插件，但错误：

Template parse errors:Can't bind to 'vgHls' since it isn't a known property of 'video'.

应用程序组件.html

<vg-player>
  <video #myMedia
     [vgHls]="'http://static.videogular.com/assets/videos/videogular.m3u8'"
     (onGetBitrates)="hlsBitrates = $event"
     id="my-video"
     type="video/mp4"
     controls>
  </video>
</vg-player>

应用程序模块.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

Answer 1

要在 videogular 播放器中使用 hls 视频流，您需要导入所需的模块

导入定义：

...
import { VgStreamingModule } from 'videogular2/streaming';

@NgModule({
    ...
    imports: [
        ...
        VgStreamingModule
    ],
    ...
})
export class AppModule {
}

Answer 2

当您使用库时，最好告诉它是哪个库，并提供指向它的链接。

这个问题源于 Angular 不了解该属性vgHls，因为它既不是框架的一部分，也不是 HTML 标准的一部分。

要解决此问题，您需要

1. 将库及其定义导入到您的项目中，
2. 将库的模块导入到组件的模块中。

导入模块后，一切都会正常工作。

编辑

根据文档，您的模块应如下所示：

@NgModule({
    declarations: [SingleMediaPlayer],
    imports: [
        BrowserModule,
        VgCoreModule,
        VgControlsModule,
        VgOverlayPlayModule,
        VgBufferingModule
    ],
    providers: [],
    bootstrap: [SingleMediaPlayer]
})