YouTube播放器报错player.playVideo is not a function的修复问题咨询

问题原因 #

报错Uncaught TypeError: player.playVideo is not a function的根本原因是触发播放操作时，YouTube iframe播放器还未完成初始化，此时player变量要么为null，要么还未挂载playVideo实例方法，多发生在API加载完成前点击播放按钮的场景。

修复方法 #

修改videoPlayer模块代码，增加播放器就绪状态校验，避免未就绪时调用播放方法，修改后的完整模块代码如下：

const videoPlayer = (function makeVideoPlayer() {
    "use strict";

    let player = null;
    // 新增播放器就绪状态标识
    let isPlayerReady = false;

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function shufflePlaylist(player) {
        player.setShuffle(true);
        player.playVideoAt(0);
        player.stopVideo();
    }

    function onPlayerReady(event) {
        player = event.target;
        player.setVolume(100);
        shufflePlaylist(player);
        // 播放器初始化完成，修改状态标识
        isPlayerReady = true;
    }

    function addPlayer(video) {

        const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g";

        const config = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            width: 640
        };
        config.playerVars = {
            autoplay: 0,
            cc_load_policy: 0,
            controls: 1,
            disablekb: 1,
            fs: 0,
            iv_load_policy: 3,
            loop: 1,
            playlist,
            rel: 0
        };
        config.events = {
            "onReady": onPlayerReady
        };
        player = new YT.Player(video, config);

    }

    function play() {
        // 新增守卫判断，只有就绪且方法存在时才执行播放
        if (isPlayerReady && player && typeof player.playVideo === 'function') {
            player.playVideo();
        }
    }
    return {
        addPlayer,
        play
    };
}());

上述修改增加了状态拦截逻辑，未就绪时点击播放按钮不会执行报错逻辑，等播放器初始化完成后再点击就可以正常触发播放，完全避免该类型错误。

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