0

我的 index.html 页面上有几个自定义角度元素<my-video>，每个元素都通过 YouTube Iframe API 加载视频播放器。我为加载 API 脚本时在窗口对象上触发的 onYouTubeIframeAPIReady 回调定义了一个回调。回调设置视频播放器。为了设置多个播放器，我在回调内部手动调用 window['onYouTubeIframeAPIReady'] 回调（它调用自己）。结果：每个播放器都可以正常加载并按预期运行。创建最终播放器后，我收到错误消息：“未捕获的 TypeError：youTubeIframeAPIReady 不是函数”。对于我的生活，我无法弄清楚如何解决控制台 TypeError。请帮忙。

这是使用 Angular 自定义元素而不是完整应用程序的组件库中的视频组件。

索引.html

<my-video some-property="some value"></my-video>
<my-video some-property="some value"></my-video>

视频.component.ts

import { Component, OnInit} from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {
  videoYoutubeId = 'WWXfdIK1WxA';
  private player: any;
  private YT: any;

  constructor() {}

  ngOnInit() {
    this.loadYoutubeScript();
    this.createVideoPlayer();
  }

  loadYoutubeScript() {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  createVideoPlayer() {
    const youTubeIframeAPIReady = window['onYouTubeIframeAPIReady'];

    window['onYouTubeIframeAPIReady'] = () => {

      this.YT = window['YT'];
      const iframeId = this.videoYoutubeId.toLowerCase();
      this.player = new window['YT'].Player(iframeId, {
        events: {
          'onReady': this.onPlayerReady.bind(this)
        }
      });

      youTubeIframeAPIReady(); // <==== Uncaught TypeError: youTubeIframeAPIReady is not a function
    };
  }

}

Video.component.html

<iframe
   [id]="videoYoutubeId | lowercase"
   width="640"
   height="360"
   style="width: 100%; height: 100%; padding: 0; margin: 0;"
   frameborder="0"
   src="https://www.youtube.com/embed/WWXfdIK1WxA?controls=1&rel=0&showinfo=0&autoplay=0&modestbranding=1&enablejsapi=1&html5=1&fs=0">
</iframe>

我希望能够将几个视频元素加载到我的索引页面中，并且每个视频都有自己的播放器，然后我可以通过打字稿检索信息或进行控制。在创建最后一个播放器后，我需要一种方法来消除错误：“Uncaught TypeError: youTubeIframeAPIReady is not a function”。

4

1 回答 1

0

从匿名函数调用另一个方法的最佳方法是使用箭头函数来触发该方法，例如：

让 readyFuction = () => this.youTubeIframeAPIReady();

于 2019-07-10T05:28:19.643 回答