我如何在我的 vue 项目中使用 youtube api？

Question

大家好，实际上我不会在我的项目中使用 youtube api，但之后我将我的脚本放入我的 index html 中，然后将此代码放入我的组件中

  methods: {
    onYouTubeIframeAPIReady() {
      window.player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'Xa0Q0J5tOP0',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g'
        },
        events: {
            onReady: initialize
        } 
    });

我有这个错误YT 没有定义no-undef

42:22 error 'initialize' is not defined.

Answer 1

欢迎来到 StackOverflow！

Youtube Player 会有一些问题，但只要遵守严格的规则，就可以使用它

错误是将onYouTubeIframeAPIReady() 附加到不是window 对象的任何位置，因此您确实需要在窗口中启动该函数，例如：

window.onYouTubeIframeAPIReady = () => {
  console.log("onYouTubeIframeAPIReady")
};

因为你不能在一个方法中使用这个函数，你可以反过来做......让那个函数在你的 Vue 对象中调用一个方法

var vueApp = new Vue({ 
  ...
  methods: {
    initYoutube() {}
  }
})

window.onYouTubeIframeAPIReady = () => {
  console.log("onYouTubeIframeAPIReady")
  vueApp.initYoutube()
};

通过这个小技巧，您可以像平常一样使用 Youtube API：

<div id="app">
  <div id="player"></div>
</div>

var vueApp = new Vue({
  el: "#app",
  data: function () {
    return {
      player: null
    };
  },
  methods: {
    initYoutube() {
      const _ = this;
      console.log("initYoutube");
      this.player = new YT.Player("player", {
        width: 600,
        height: 400,
        videoId: "Xa0Q0J5tOP0",
        events: {
          onReady: _.onPlayerReady,
          onStateChange: _.onPlayerStateChange
        }
      });
    },
    onPlayerReady(evt) {
      console.log("Player ready");
      evt.target.playVideo();
    },
    onPlayerStateChange(evt) {
      console.log("Player state changed", evt);
    }
  }
});

onYouTubeIframeAPIReady = () => {
  console.log("onYouTubeIframeAPIReady");
  vueApp.initYoutube();
};

这是working example in CodePen

（对 Veutify 感到抱歉，但是我的 VueJs CodePen 模板集是自动设置的，只需在没有 vuetify: new Vuetify(), 行的情况下使用） :)