Problem Description
So I developed a block in Moodle which will detect the video play and pause state (uploaded video on server) and working everything well, but today I had a new requirement that it should work on YouTube embedded video also
so I need to know how I can get the play or pause state, I searched various questions but if I am running them on just simple html page they are working as I needed but as soon as I try to implement to my Moodle jsModule. I am getting errros of YT. player is not defined, or is not a constructor
for e.g https://codepen.io/anon/pen/yPJJbv?editors=1111
this code is working so fine what I really need, but below is my code
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');
};
but my onYoutubeIframeAPIReady is not getting called because of ncaught TypeError: YT.Player is not a constructor
at tag.onload
something like this
can anyone guide me to right direction please. I needed this detection to complete my project
and Please don't mark it as duplicate as I check with normal code they are working very well in normal environment (outside of moodle scope) but in moodle they are not working
AI-Generated Solution
Powered by LMSouq AI · GPT-4.1-mini
Analyzing problem and generating solution…
Was this solution helpful?