我如何在我的 vue 项目中使用 youtube api? [英] how i can work the youtube api in my vue project?

问题描述

伙计们，实际上我不会在我的项目中使用 youtube api，但之后我将我的脚本放在我的索引 html 中，并将此代码放在我的组件中

 方法:{onYouTubeIframeAPIReady() {window.player = new YT.Player('视频占位符', {宽度:600，高度:400，videoId: 'Xa0Q0J5tOP0',玩家变量:{白颜色'，播放列表:'taJ60kskkns,FG0fTKAqZ5g'},事件:{onReady:初始化}});

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

<块引用>

42:22 错误初始化"未定义.

解决方案

欢迎使用 StackOverflow！

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

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

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

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

var vueApp = new Vue({...方法: {initYoutube() {}}})window.onYouTubeIframeAPIReady = () =>{console.log("onYouTubeIframeAPIReady")vueApp.initYoutube()};

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

<div id="玩家"></div>
var vueApp = new Vue({el: "#app",数据:函数(){返回 {播放器:空};},方法: {initYoutube() {const _ = 这个；console.log("initYoutube");this.player = new YT.Player("玩家", {宽度:600，高度:400，videoId: "Xa0Q0J5tOP0",事件:{onReady: _.onPlayerReady,onStateChange: _.onPlayerStateChange}});},onPlayerReady(evt) {console.log("玩家准备好");evt.target.playVideo();},onPlayerStateChange(evt) {console.log("玩家状态改变", evt);}}});onYouTubeIframeAPIReady = () =>{console.log("onYouTubeIframeAPIReady");vueApp.initYoutube();};

这是一个 CodePen 中的工作示例

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

Hi gangs actually I wont to use a youtube api inside my project but after that I put my script inside my index html and I put this code in my component

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

I have this errors YT is not defined no-undef

42:22 error 'initialize' is not defined.

解决方案

Welcome to StackOverflow!

You will have several issues with Youtube Player, but it's possible to work with it as long as you follow the strict rules

an error is to append onYouTubeIframeAPIReady() to anywhere that is not the window object, so you really need to start that function in the window, for example:

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

as you can't have this function inside a method, you can do the other way around... have that function call a method inside your Vue Object

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

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

and with that small trick you can use the Youtube API like normal:

<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();
};

Here's a working example in CodePen

(sorry about Veutify, but my VueJs CodePen template set's all up automagically, just use without the vuetify: new Vuetify(), line) :)

这篇关于我如何在我的 vue 项目中使用 youtube api?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！