Vue3项目集成YouTube API报错，请求技术帮助

问题根源 #

1. 全局的onYouTubeIframeAPIReady无法直接调用Vue组件内部的initYoutube方法，作用域不匹配导致找不到函数
2. 播放器事件回调onPlayerReady、onPlayerStateChange未绑定组件上下文，执行时会找不到对应方法
3. 脚本注入逻辑放在组件外部，和组件生命周期不同步，可能引发DOM未就绪的问题

修复后的完整代码 #

import { store } from "../stores/stores";

export default {
  name: "YoutubeTV",

  data() {
    return {
      player: null,
      jukebox: false
    };
  },

  mounted() {
    // 组件挂载后注入API脚本，确保DOM已准备完毕
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // 将API就绪回调绑定到组件实例，确保能调用内部方法
    window.onYouTubeIframeAPIReady = () => {
      console.log("onYouTubeIframeAPIReady");
      this.initYoutube();
    };
  },

  methods: {
    initYoutube() {
      console.log("initYoutube");
      this.player = new YT.Player("jukebox-player", {
        height: '236',
        width: '408',
        videoId: store.getters.getYoutubeTv.video_id,
        events: {
          // 用箭头函数绑定组件上下文，确保回调能正确执行
          'onReady': (event) => this.onPlayerReady(event),
          'onStateChange': (event) => this.onPlayerStateChange(event)
        }
      });
    },
    onPlayerReady(event) {
      console.log("Player ready");
      event.target.playVideo();
    },
    onPlayerStateChange(event) {
      console.log("Player state changed", event);
    }
  }
}

关键修改点 #

• 调整脚本注入时机：把API脚本注入逻辑移到mounted钩子中，保证组件DOM已挂载完成
• 修复作用域问题：window.onYouTubeIframeAPIReady内部直接通过this调用组件方法，箭头函数会继承组件上下文
• 绑定回调上下文：播放器事件回调用箭头函数包裹，确保this指向Vue组件实例，能正确访问内部方法
• 整合逻辑到组件内部：移除组件外部的全局代码，避免全局作用域污染和生命周期不同步问题

内容的提问来源于stack exchange，提问作者beginnerguy