Moodle模块集成YouTube API获取视频播放状态遇构造函数错误求助

问题根源 #

你遇到的YT.Player is not a constructor错误，本质是Moodle的AMD模块沙箱机制和YouTube API加载逻辑的冲突：

1. Moodle的AMD模块以闭包形式运行，内部函数默认不暴露到全局作用域，导致YouTube API加载完成后找不到onYouTubeIframeAPIReady回调
2. 手动调用onYouTubeIframeAPIReady的时机过早，YT对象还未完全初始化
3. 错误地将another-love设置给了script标签，这个ID应该属于页面中的YouTube iframe元素

修复步骤与代码示例 #

1. 核心修正代码 #

define(['jquery', 'core/ajax', 'core/url', 'core/ready'], function($, Ajax, url, ready) {
    // 等待DOM完全就绪后执行
    ready(function() {
        // 将YouTube API回调暴露到全局window对象
        window.onYouTubeIframeAPIReady = function() {
            console.log('YouTube API已就绪，初始化播放器');
            // 确保页面存在id为another-love的YouTube iframe
            let player = new YT.Player('another-love', {
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        };

        function onPlayerReady(event) {
            console.log('视频播放器已就绪');
        }

        function onPlayerStateChange(event) {
            console.log('播放状态变更:', event.data);
            // 这里可以加入你需要的业务逻辑，比如向Moodle上报播放/暂停状态
        }

        // 避免重复加载YouTube API脚本
        if (!document.querySelector('script[src="https://www.youtube.com/iframe_api"]')) {
            const tag = document.createElement('script');
            tag.src = 'https://www.youtube.com/iframe_api';
            const firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        }
    });
});

2. 关键注意点 #

• iframe配置：页面中的YouTube iframe必须满足两个条件：
  • 拥有id="another-love"
  • src参数包含enablejsapi=1（例如https://www.youtube.com/embed/你的视频ID?enablejsapi=1）
• 全局回调：必须把onYouTubeIframeAPIReady挂载到window对象，否则YouTube API无法触发该函数
• DOM就绪：使用Moodle的core/ready模块确保DOM完全加载后再初始化，避免找不到iframe元素

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