如何在Moodle环境中获取Iframe状态变化

Question

所以我在 Moodle 中开发了一个块，它将检测视频播放和暂停状态（在服务器上上传视频）并且一切正常，但今天我有一个新要求，它也应该在 YouTube 嵌入视频上工作 所以我需要知道如何获得播放或暂停状态，我搜索了各种问题，但如果我只是在简单的html页面上运行它们，它们就会按我需要的方式工作，但一旦我尝试实现我的Moodle jsModule。我收到 YT 错误。玩家未定义，或者不是构造函数 例如https://codepen.io/anon/pen/yPJJbv?editors=1111 这段代码运行得很好，是我真正需要的，但下面是我的代码

define(['jquery', 'core/ajax', 'core/url'], function($, Ajax, url) {
// Function to initialize the YouTube API when it's ready
/**
 *onYoutubeApi
 */
function onYouTubeIframeAPIReady() {
    // eslint-disable-next-line no-console
    console.log('Function called');
    // Now, the YT object is defined, and you can use it
    // eslint-disable-next-line no-undef,no-unused-vars
    let player = new YT.Player('another-love', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
/**
 *asdasd
 * @param {text} event
 */
// eslint-disable-next-line no-unused-vars
function onPlayerReady(event) {
    // eslint-disable-next-line no-console
    console.log('Video player ready');
}

/**
 *asdasd
 * @param {text} event
 */
function onPlayerStateChange(event) {
    // eslint-disable-next-line no-console
    console.log('State has changed');
    // eslint-disable-next-line no-console
    console.log(event.data);
}

// Create the script element
var tag = document.createElement('script');
tag.id = 'another-love';
tag.src = 'https://www.youtube.com/iframe_api';

// Set up a callback function to run when the script is loaded
tag.onload = function () {
    // Initialize the YouTube API
    onYouTubeIframeAPIReady();

    // Log that the YouTube API script has been loaded
    // eslint-disable-next-line no-console
    console.log('YT scripts loaded');
};

但是我的 onYoutubeIframeAPIReady 没有被调用，因为 ncaught TypeError: YT.Player 不是构造函数 在 tag.onload

类似这样的东西 任何人都可以引导我正确的方向吗？我需要这种检测来完成我的项目 并且请不要将其标记为重复，因为我用正常代码检查它们在正常环境中（在moodle范围之外）工作得很好，但在moodle中它们不工作

Answer 1

看到最主要的是你需要定义 窗口播放器 其余一切与文档相同

/**
         *Promise to Load YouTube Api
         */
        function loadYouTubeAPI() {
            return new Promise((resolve, reject) => {
                // Check if the YT object is already defined (API script might have been loaded)
                // eslint-disable-next-line no-undef
                if (typeof YT !== 'undefined' && typeof YT.Player === 'function') {
                    // YouTube API is already available
                    resolve();
                } else {
                    // Define a callback function for when the API script is loaded
                    window.onYouTubeIframeAPIReady = function () {
                        // eslint-disable-next-line no-undef
                        if (typeof YT !== 'undefined' && typeof YT.Player === 'function') {
                            // YouTube API is now available
                            resolve();
                        } else {
                            // API is not available even after initialization
                            reject(Error('YouTube API is not available.'));
                        }
                    };
    
                const tag = document.createElement('script');
                tag.src = 'https://www.youtube.com/iframe_api';
                tag.onerror = () => reject(Error('Error loading YouTube API'));
                document.getElementsByTagName('head')[0].appendChild(tag);
            }
        });
    }
    // Function to handle player state changes
    /**
     *On Playerstate Chnage
     * @param {text} event
     */
    function onPlayerStateChange(event) {
        // eslint-disable-next-line no-undef
        if (event.data === YT.PlayerState.PLAYING) {
            // eslint-disable-next-line no-console
            console.log('Video is playing.');
            // You can add your code to capture the event when the video starts playing.
            // Get the current time of the video
            const currentTime = window.player.getCurrentTime();
            // eslint-disable-next-line no-console
            console.log('Current time: ' + currentTime + ' seconds');
            // For example, you can trigger your webcam code here.
        }
    }

// Create the YouTube player
    // eslint-disable-next-line no-unused-vars
    window.player = null;
    // eslint-disable-next-line no-unused-vars
    /**
     * on youtube Iframe api
     */
    function onYouTubeIframeAPIReady() {
        // eslint-disable-next-line no-undef
      window.player = new YT.Player('another-love', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

// Usage example
    loadYouTubeAPI()
        .then(() => {
            // The YouTube API is loaded and ready to use
            // eslint-disable-next-line no-console
            console.log('YouTube API loaded.');
            // You can now initialize the YouTube player and perform other tasks.
            onYouTubeIframeAPIReady();
        })
        .catch((error) => {
            // eslint-disable-next-line no-console
            console.error(error.message);
        });
    });