从YouTube Iframe API流程包导入YT和YTConfig

We're using the adrianliaw:youtube-iframe-api package to display youtube iframes in our project.

我们正在使用adrianliaw:youtube-iframe-api包在我们的项目中显示youtube iframe。

This was working fine before but we decided to move certain parts of our project into their own packages. After doing that, I can't seem to get the YT and YTConfig object imported into our packge.

这之前工作正常但我们决定将项目的某些部分移动到他们自己的包中。在这样做之后,我似乎无法将YT和YTConfig对象导入到我们的包中。

This is what I have:

这就是我所拥有的:

package.js:

Package.onUse(function(api) {
    api.versionsFrom('METEOR@0.9.1.1');

  // API Use - Both client and server
  api.use([
    'ecmascript',
    'templating',
    'fourseven:scss'
  ], ['client', 'server']);

  // API Use - Client only
  api.use([
    'adrianliaw:youtube-iframe-api'
  ], ['client']);
});

youtube-display.js:

import { YT, YTConfig } from 'meteor/adrianliaw:youtube-iframe-api';

/**
 * Video display controller
 * Assuming youtube-only for now
 */

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player,
    videoId,
    videoElement,
    isPreview = false,
    isMuted = false;

onYouTubeIframeAPIReady = function() {
    player = new YT.Player(videoElement, {
        height: window.innerHeight,
        width: window.innerWidth,
        videoId: videoId,
        playerVars: {
            controls: 0,
            showinfo: 0,
            modestbranding: 1,
            iv_load_policy: 3,
            rel: 0
        },
        events: {
            onReady: function (event) {
                if ( ! isPreview ) {
                    // Play video when player ready.
                    event.target.playVideo();

                    if ( isMuted ) {
                        event.target.mute();
                    }
                }
            }
        }
    });
}

Template.HBModule_youtube_Display.onCreated(function() {
    videoId = Template.instance().data.media.youtubeId;

    if ( Template.instance().data.preview ) {
        isPreview = true;
    }

    if ( Template.instance().data.muted ) {
        isMuted = true;
    }
});

Template.HBModule_youtube_Display.onRendered(function() {
    videoElement = Template.instance().$('.module__video')[0];

    // Start
    YT.load();
});

Template.HBModule_youtube_Display.onDestroyed(function() {
    player.destroy()
});

and I'm getting this error: _adrianliawYoutubeIframeApi.YT.load is not a function.

我收到此错误:_adrianliawYoutubeIframeApi.YT.load不是一个函数。

and like I said, minus the import at the top of the display file, this all worked perfect before.

就像我说的,减去显示文件顶部的导入,这一切都完美无缺。

Any help would be appreciated. Thanks!

任何帮助,将不胜感激。谢谢!

1 个解决方案

#1

The trick was getting rid of the import at the top of youtube-display.js and changing the onYouTubeIframeAPIReady function to window.onYouTubeIframeAPIReady as per this SO answer: https://*.com/a/16701359/5463842

诀窍是摆脱youtube-display.js顶部的导入,并将onYouTubeIframeAPIReady函数更改为window.onYouTubeIframeAPIReady,根据此SO答案:https://*.com/a/16701359/5463842

EDIT: Oh! and also, adding @1.3.122 to the package as mine was using an old version.

编辑:哦!并且,当我使用旧版本时,将@ 1.3.122添加到包中。