如何解决YouTube播放器代码中的ESLint no-unused-vars与no-undef错误？

阿华AIGC实验室

2026-5-15

针对你遇到的这三个ESLint错误，我给你几个优雅的解决方案，不用全局禁用规则就能搞定：

1. 解决`'YT'未定义（no-undef）`

YT是YouTube iframe API加载后自动注入的全局变量，ESLint默认不知道它的存在。有两种常用处理方式：

代码内声明全局变量：在文件顶部添加注释，告诉ESLint这个变量是合法的全局变量：
```
/* global YT */
```
ESLint配置声明：在你的.eslintrc（或类似配置文件）中添加全局变量配置：
```
{
  "globals": {
    "YT": "readonly"
  }
}
```

2. 解决`'player'已赋值但未使用（no-unused-vars）`

player变量当前只在API回调中赋值，但本地代码没有直接使用它。你可以选择：

挂载到window对象：把player绑定到全局window上，ESLint会识别到它被“使用”，同时后续如果需要控制播放器（比如暂停、切换视频），也能通过window.player访问实例：
```
window.player = new YT.Player('player', { /* ...配置... */ });
```
添加使用标记注释：如果暂时不需要全局访问，也可以给变量加注释标记它是有意保留的：
```
var player; // eslint-disable-line no-unused-vars
```

3. 解决`'onYouTubeIframeAPIReady'已定义但未使用（no-unused-vars）`

这个函数是YouTube API自动调用的，ESLint无法感知到外部调用。最优方案是：

绑定到window对象：把函数挂载到全局window上，既符合API的调用逻辑，也能让ESLint明白这个函数是暴露给外部使用的：
```
window.onYouTubeIframeAPIReady = function() {
  // ...播放器初始化逻辑...
}
```

单行规则禁用：如果不想污染全局window，可以在函数上方添加局部禁用注释：

/* eslint-disable-next-line no-unused-vars */
function onYouTubeIframeAPIReady() {
  // ...播放器初始化逻辑...
}

整合修改后的完整代码

/* global YT */ // 声明YT为全局变量，解决no-undef错误

function videoInit() { // Initialise video
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
      event.target.playVideo();
    }
  }

  // 挂载到window，让API能找到并调用，同时解决no-unused-vars错误
  window.onYouTubeIframeAPIReady = function() {
    // 将player绑定到window，解决未使用错误并保留全局访问能力
    window.player = new YT.Player('player', {
      height: '100%',
      width: '100%',
      videoId: 'ScMzIvxBSi4',
      playerVars : { 'mute' : 1 },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
      },
    });
  }
}