点击按钮控制YouTube视频播放/暂停/停止时功能失效问题排查

问题根因 #

• jQuery 选择器语法错误：选中ID为btnplay的元素需要使用$('#btnplay')写法，原代码直接写$(btnplay)属于变量未定义错误，无法稳定绑定点击事件
• 缺少jQuery依赖：原代码使用了jQuery的$方法，但没有引入jQuery库，会导致$ is not defined报错
• 播放器未就绪就调用控制接口：YouTube IFrame API 实例化后需要等待播放器加载完成的onReady事件触发，才能调用playVideo等控制方法，否则调用会无响应
• 播放器变量作用域问题：原代码未显式声明player的全局作用域，可能出现点击事件中无法访问player实例的问题

修正后可运行代码 #

<!-- 引入jQuery依赖 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

<button id='btnplay'>PLAY</button>
<button id='btnpause'>PAUSE</button>
<button id='btnstop'>STOP</button>
<!-- 增加origin参数避免跨域限制 -->
<iframe id="player" src="https://www.youtube.com/embed/rDT93EN_nVI?rel=0&enablejsapi=1&origin=*" width="560" height="315" frameborder="0"></iframe>

<script>
// 显式声明全局播放器变量
var player;

function onYouTubeIframeAPIReady(){
    player = new YT.Player('player', {
        events: {
            // 播放器就绪后再绑定点击事件，避免提前调用方法失效
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady() {
    $('#btnplay').on('click', function(){
        console.log('play clicked');
        player.playVideo();
    });
    $('#btnpause').on('click', function(){
        console.log('pause clicked');
        player.pauseVideo();
    });
    $('#btnstop').on('click', function(){
        console.log('stop clicked');
        player.stopVideo();
    });
}
</script>

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