LMSouq
moodle-core Open

how to fetch Iframe state change in Moodle environment

RO
Rohit -
1 month ago
3 views
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

✓ Solution Ready
Analyzing problem and generating solution…
Was this solution helpful?
Back to Knowledge Base