Невозможно прочитать свойство 'elem' из неопределенного видео - PullRequest
Новая
       56

Невозможно прочитать свойство 'elem' из неопределенного видео

3 голосов
/ 05 января 2020

Я использую библиотеку videogular в своем проекте Angular. У меня есть эта ошибка Cannot read property 'elem' of undefined

Как я могу ее исправить? Что не так?

player.component. html

<div id="player" *ngIf="playData">

  <vg-player (onPlayerReady)="onPlayerReady($event)">

    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-controls>
      <vg-play-pause></vg-play-pause>

      <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
      </vg-scrub-bar>

      <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>

      <vg-quality-selector *ngIf="bitrates"
                           (onBitrateChange)="setBitrate($event)"
                           [bitrates]="bitrates">
      </vg-quality-selector>

      <vg-mute></vg-mute>
      <vg-volume></vg-volume>

      <vg-fullscreen *ngIf="playData.type == 1"></vg-fullscreen>
    </vg-controls>

    <video #media
           *ngIf="playData.type === 1"
           (onGetBitrates)="bitrates = $event"
           [vgMedia]="media"
           [vgHls]="playData.streamUrl"
           id="video"
           autoplay
           crossorigin>
    </video>

  </vg-player>

</div>

player.component.ts 

export class PlayerComponent implements OnInit {

  @Input() playData: {
    type: number,
    streamUrl: string
  };

  @ViewChild(VgDASH) vgDash: VgDASH;
  @ViewChild(VgHLS) vgHls: VgHLS;

  api: VgAPI;
  data: any;

  bitrates: BitrateOption[];

  constructor() {
  }

  ngOnInit() {
    console.log(this.playData);
  }

  onPlayerReady(api: VgAPI) {
    console.log('onPlayerReady');
    this.api = api;

    if (this.playData.type === 1) {
      // set fullscreen as default
      if (this.api.fsAPI.isAvailable && !this.api.fsAPI.isFullscreen) {
        this.api.fsAPI.toggleFullscreen();
      }
    }

  }

  setBitrate(option: BitrateOption) {
    this.vgHls.setBitrate(option);
  }

}
...