Использование API Youtube с Angular 6 (Typescript)

Я могу заставить API Youtube Iframe (каким-то образом) работать в моем приложении Angular 6. Тем не менее, я хотел бы передать ему динамические видеоидентификаторы из списка, который я контролирую. Мой план состоит в том, чтобы прослушивать события из проигрывателя, а затем загружать другое видео после завершения воспроизведения текущего видео. Но я не мог пройти мимо этого вопроса. Я все еще изучаю Typescript и Angular, и мне любопытно, почему мой любой метод, который я вызываю из любой функции, которую я вызываю из API-плеера IFrame, получает Uncaught TypeError:

Вот мой код:

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Video } from '../shared/model/video.model';
import { Subscription } from 'rxjs';
import { VideoPlayerService } from '../shared/services/video-player.service';

@Component({
  selector: 'ntv-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit, AfterViewInit {

  player;
  video: Video;
  videos: Video[];
  videoSubscription: Subscription;

  constructor(private videoService: VideoPlayerService) { }

  ngAfterViewInit() {
    const doc = (<any>window).document;
    const playerApiScript = doc.createElement('script');
    playerApiScript.type = 'text/javascript';
    playerApiScript.src = 'https://www.youtube.com/iframe_api';
    doc.body.appendChild(playerApiScript);
  }

  ngOnInit() {

    (<any>window).onYouTubeIframeAPIReady = () => {
      this.player = new (<any>window).YT.Player('player', {
        height: '100%',
        width: '100%',
        // videoId: this.getVideo(),
        events: {
          'onReady': this.onPlayerReady,
          'onStateChange': this.onPlayerStateChange
        },
        playerVars: {
          autoplay: 1,
          controls: 0,
          modestbranding: 1,
          // playlist: 'UG3sfZKtCQI,ALZHF5UqnU4,x9ZkC3OgI78',
          rel: 0,
          showInfo: 0
        }
      });
    };
  }



  // The API calls this function when the player's state changes.
  onPlayerStateChange(event) {
    console.log('onPlayerStateChange');
    console.log(event.data);
  }

  // The API will call this function when the video player is ready
  onPlayerReady(event) {
    console.log(event);

    const videoId = this.getVideo();
    event.target.cueVideoById({
      'videoId': videoId
    });
    event.target.playVideo();
  }

  getVideo() {
    return '60ItHLz5WEA';
  }

}

И вот ошибка, которую я получаю:

    Uncaught TypeError: Cannot read property 'getVideo' of undefined
    at push../src/app/video-player/video-player.component.ts.VideoPlayerComponent.onPlayerReady (video-player.component.ts:63)
    at M.h.G (www-widgetapi.js:48)
    at Y.h.o (www-widgetapi.js:92)
    at Y.h.H (www-widgetapi.js:105)
    at Wa.g (www-widgetapi.js:81)
    at Oa.f (www-widgetapi.js:70)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
push../src/app/video-player/video-player.component.ts.VideoPlayerComponent.onPlayerReady    @   video-player.component.ts:63
h.G @   www-widgetapi.js:48
h.o @   www-widgetapi.js:92
h.H @   www-widgetapi.js:105
Wa.g    @   www-widgetapi.js:81
Oa.f    @   www-widgetapi.js:70
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask    @   zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask   @   zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask    @   zone.js:496
invokeTask  @   zone.js:1540
globalZoneAwareCallback

this.getVideo(), кажется, работает, если я вызываю его из свойства 'videoId', но я хотел бы иметь возможность вызывать его либо onPlayerReady, либо onPlayerStateChange, чтобы сделать его более динамичным. Кто-нибудь делал это раньше? Документации по Angular не так много.

Заранее спасибо.


angular youtube-api youtube youtube-iframe-api
person Noel R.    schedule 11.09.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я думаю, что то, что вы испытываете, является проблемой области действия, ваша функция OnPlayerReady выполняется не в области вашего класса, а в области действия проигрывателя YouTube. Я делаю вывод об этом из сообщения об ошибке «Не удается прочитать свойство getVideo неопределенного». В этот момент исполнения «это» не то, чем кажется.

Попробуйте изменить код назначения события следующим образом:

 events: {
          'onReady': (event) => { this.onPlayerReady(event); },
          'onStateChange': (event) => { this.onPlayerStateChange(event); }
        },
person Joel Richman    schedule 11.09.2018
comment
Это помогло мне обойти проблему. Спасибо! - person Noel R.; 12.09.2018

arrow_upward
0
arrow_downward

Спасибо Джоэл! Это поможет мне решить проблему. Сначала я получил ошибку, потому что не передал параметр. Итак, я сделал это так, и это сработало!

events: { 'onReady': (event) => { this.onPlayerReady(event); }, 
'onStateChange': (event) => { this.onPlayerStateChange(event); } 
},

Я предполагаю, что мне трудно понять документацию API и попытаться перевести ее на Typescript. Я просто хочу, чтобы они добавили туда больше документации. Кроме того, подобные вещи (<any>window).onYouTubeIframeAPIReady = () => { кажутся мне хакерскими. Есть ли лучший способ сделать это?

Извините, я не смог проголосовать за ваш ответ, так как у меня еще недостаточно очков репутации.

person Noel R.    schedule 12.09.2018
comment
Рад, что это заставило тебя идти. Я обновил свой ответ. Вы можете взглянуть на сторонние пакеты npm для упаковки API YouTube, например npmjs.com/ package/angular-youtube-player или npmjs.com/package/ngx- youtube-плеер. - person Joel Richman; 12.09.2018
comment
Спасибо, Джоэл. Я посмотрю на них. Я видел те, которые упоминаются здесь, в Stack Overlow, в других сообщениях, но я боялся, что это может добавить мне еще один уровень сложности/кривой обучения. Еще раз спасибо. - person Noel R.; 13.09.2018
comment
Ноэль - вы тоже можете попробовать этот пакет. Я обнаружил, что он самый маленький и простой в использовании (это один файл index.js), хотя он и не в машинописи. github.com/feross/yt-player - person henry74; 22.09.2018