Adding YouTube iframe api in Moodle for my TinyMCE plugin

Adding YouTube iframe api in Moodle for my TinyMCE plugin

Giosuè Suriano -
回帖数:2

Hello everyone and Happy New Year!

I am developing a TinyMCE plugin and I have some Javascript code which works with Youtube Iframe API.

Initially, this code has been developed into a Moodle Page like the following:

HTML
<script src="https://www.youtube.com/iframe_api"></script>

<script>

Variables declaration

function onYouTubeIframeAPIReady() {
            player = new YT.Player('videoPlayer', {
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            highlightCurrentTextAutomatically();
        }

        function onPlayerStateChange(event) {
            if (event.data === YT.PlayerState.PAUSED) {
                cancelAnimationFrame(updateRequest);
                videoPlaying = false;
            } else if (event.data === YT.PlayerState.PLAYING) {
                highlightCurrentTextAutomatically();
                videoPlaying = true;
            }
        }

other functions...

</script>

CSS

Without the API, the code can't work. How I can implement the API? I need to create a lib.php file?

Thank you!

回复Giosuè Suriano

Adding YouTube iframe api in Moodle for my TinyMCE plugin

Eduardo Kraus -
Particularly helpful Moodlers的头像 Plugin developers的头像 Testers的头像

Hi Giosué, Happy New Year to you too! 🎉

I understand your enthusiasm about developing the TinyMCE plugin and integrating the YouTube API, but I’m going to give you a tip that will help you take a leap in your implementation: TinyMCE has some limitations that can complicate things when it comes to integrating more advanced features like the YouTube API via iframe.

Here’s my suggestion: how about creating a plugin based on Moodle’s Media? This plugin can integrate directly with YouTube and other media platforms, which will give you much more flexibility and efficiency when working with embedded videos on your site. To inspire you, you can check out my own CloudStudio plugin, which I developed for this type of need, and you can find the code on CloudStudio on Moodle.

Eduardo Kraus
Teacher and Programmer

回复Eduardo Kraus

Ri: Adding YouTube iframe api in Moodle for my TinyMCE plugin

Giosuè Suriano -
Hi Eduardo, thank you for you answer.
To make things clear, I am working for a plugin which uses srt for displaying transcript on a Moodle page (like transcript in YouTube) and I need to use the API to make it work. Without it, I cannot interact with the text.