Angular4 - Невозможно связать с vgHls, поскольку оно не является известным свойством video.

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

Чтобы использовать видеопотоки 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]
})