Question

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

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

app.component.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>

app.module.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

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

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

要解决此问题，您需要

将库及其定义导入项目
将库的模块导入组件的模块。

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

修改

According to the documentation，您的模块应如下所示：

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

Answer 2

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

导入定义：

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

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

Angular4 - 无法绑定到'vgHls'，因为它不是'video'的已知属性。

2 个答案:

修改