javascript - how i can work the youtube api in my vue project? - Stack Overflow

admin管理员组

文章数量:1384646

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 ponent

  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.

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 ponent

  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.

• javascript
• vue.js

Share Improve this question Follow edited Apr 11, 2020 at 23:18 balexandre 75.2k4747 gold badges238238 silver badges351351 bronze badges asked Apr 11, 2020 at 23:07 UrielUriel 3744 silver badges77 bronze badges 2

• where are you importing YT and defining initialize, when are you calling onYouTubeIframeAPIReady? – Lawrence Cherone Commented Apr 11, 2020 at 23:20
• I import YT when I imported the youtube api (inside my index html) and inizialitze in the same mode – Uriel Commented Apr 11, 2020 at 23:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Wele 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) :)

The Youtube Iframe works slightly differently than you've implemented.

1. First, you have to have the youtube iframe api script in your project index.html.

2. Inside the ponent where you're trying use the iframe, implement the code like the following example:

<template>
<div class="playlist">
  <!-- this is the div where the IFrame API will inject the iframe content into -->
  <div id="video"></div>
</div>
</template>
<script>
export default {
  data() {
    return {
      player: null
    }
  }
  mounted() {
    window.onYouTubeIframeAPIReady = this.initPlayer
  },
  methods: {
    initPlayer() {
      const videoEl = document.getElementById("video")
      this.player = new YT.Player(videoEl, {
        width: 600,
        height: 400,
        videoId: 'Xa0Q0J5tOP0',
        playerVars: {},
        events: {
            onReady: this.onInitialize()
        } 
      });
    },
    onInitialize() { console.log("Initialized") }
  }
}
</script>

I've noticed you've used items like color and playlist in the playerVars option while creating the player. I am sorry, but these variables are not valid. You can see the available player variables options at https://developers.google./youtube/player_parameters

Here is an example ponent I have created for a similar use case. In the ponent, API loading is done using promises so you will never face issues like YT undefined. You can check it out at https://github./kiranparajuli589/vue3-ytframe/blob/master/lib/VueYtframe.vue Give it a star, if it helps :)

The reason why you have 'YT' undefined is either you have not included youtube script API or you are calling it without window.YT.

Here is a full implementation I have made.

<template>
  <div>
    <!-- This is the div where the IFrame API will inject the iframe content into -->
    <div id="main-video" class="main-video"></div>
    
    <button @click="play">Play</div>
  </div>
</template>

<script>
export default {
  name: 'MediaBlock',
  mounted() {
    this.mountYouTubeApi();
  },
  data() {
    return {
      player: null,
    };
  },
  methods: {
    mountYouTubeApi() {
       var firstScriptTag = document.getElementsByTagName('script')[0];

  /**
   * We do not want to include iframe_api script few times, when going back and force to page.
   * That's why we need to check if it has been already included.
   * If yes, we just need to create our player object, which will embed video on page.
   */
  if (!firstScriptTag.src.includes('youtube')) {
    /**
     * YouTube API
     *
     * Append youtube iFrame API from https://www.youtube./iframe_api
     * docs: https://developers.google./youtube/iframe_api_reference#Getting_Started
     */
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube./iframe_api';
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    window.onYouTubeIframeAPIReady = this.initPlayer;
  } else {
    this.initPlayer();
  }
    },
    initPlayer() {
      const mainVideoEl = document.getElementById('main-video');
      this.player = new window.YT.Player(mainVideoEl, {
        width: '100%',
        height: 233,
        videoId: 'KJwYBJMSbPI',
        playerVars: { rel: 0 },
        events: {
          onReady: this.onInitialize()
        }
      });
    },
    onInitialize() {
      // console.log('YouTube video Initialized');
    },
    play() {
      this.player.playVideo();
    }
  }
};
</script>

Here you have also a custom "Play" button. Or you can use any other element to play your video.

onYouTubeIframeAPIReady is function, which runs when YouTube API is loaded. Then inside initPlayer you create a player with video defined in videoId.

本文标签： javascripthow i can work the youtube api in my vue projectStack Overflow