I am developing a moodle block in which I am creating a youtubePlayer script which I needs to pass to another Modules also but problem is its giving me undefined because of js async nature. I have two files detectionEvent.js and check.jsso In my detectionEvent I am checking if the video is uploaded on Moodle server or the embedded video and now I need to pass it to another page but the video if uploaded on server(Moodle) is able to detect the send the tag values but if page is having embedded video then its sending value and giving me undefined below is my code
// eslint-disable-next-line no-unused-varsdefine(['jquery', 'core/ajax', 'core/url'], function($, Ajax, url) { let element = document.getElementById("mod-id"); let videoElement; let value = parseInt(atob(element.getAttribute("value")), 10); if (value === 17) { // Reference the iframe element by its index (you can modify this to match your specific use case) let iframe = document.getElementsByTagName('iframe')[0]; if (iframe) { // Set the id attribute for the iframe iframe.setAttribute('id', 'another-love'); // Get the current src attribute let currentSrc = iframe.getAttribute('src'); // Split the current src at the "?" character let srcParts = currentSrc.split('?'); // Create the new src with "?enablejsapi=1" and the original video ID let newSrc = srcParts[0] +'?enablejsapi=1'; // Update the src attribute with the modified URL iframe.setAttribute('src', newSrc); } 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); }); } else if (value === 19) { let videoTags = document.getElementsByTagName("video"); // eslint-disable-next-line no-unused-vars videoElement = videoTags[1]; }// See in Here I am returning values but when I try to return window.player its giving me undefined. return {"value": value,"videoElement": videoElement,"windowPlayer" : window.player, }; /** * 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"); // eslint-disable-next-line no-undef } else if (event.data === 2) { // eslint-disable-next-line no-console console.log("video is paused"); } } // Create the YouTube player // 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 } }); }});///////////////////////below is my check.js
require(['./detectionEvent'], function(detectionEvent) { // eslint-disable-next-line no-console console.log(detectionEvent.windowPlayer);});