Controlling Embedded Youtube Video on MM

strawberry 3.141

@zichao92 because there is no html element that has the id your looking for so var myPlayer = document.getElementById('my-video'); is null

zichao92

Hi @strawberry-3.141 ,
Thanks for the clarification!
I have added id = "my-vdieo" into my code, however, it produced another error :

Uncaught TypeError: myPlayer.playVideo is not a function
    at Class.playthevideo (youtube.js:69)

It’s not able to detect the function. After doing some readings about embedded YouTube videos, i came across this site :
https://developers.google.com/youtube/js_api_reference#onYouTubePlayerReady

It was mentioned that i require a callback function named onYouTubePlayerReady. The API will call this function when the player is fully loaded and the API is ready to receive calls.

From there, I should be able to control my video. However, since this function can only be called in getDom function, im not too sure how it should work from here.

strawberry 3.141

@zichao92 do you have your code on github?

zichao92

Hi @strawberry-3.141 ,

I just uploaded to github ( not too sure if i have done it correctly , first time using github) but here you go.

https://github.com/zichao92/youtube/tree/Remote-

Edit 1: I’m still using an older version of Remote Control module by Jopyth, it’s more stable on my MagicMirror( less laggy etc). Im not too sure why though

strawberry 3.141

@zichao92 I cleaned up your module

Module.register("youtube",{

    start: function() {
        Log.info("Starting module: " + this.name);
    },

    getStyles: function() {
        return ['script.css'];
    },

    sendCommand: function(cmd){
        var myPlayer = document.getElementById('my-video');
        if(myPlayer){
            myPlayer.contentWindow.postMessage(JSON.stringify({
                "event": "command",
                "func": cmd
            }), "*");
        }
    },

    notificationReceived: function(notification, payload) {
        if (notification === "PAUSE_VIDEO"){
            this.sendCommand("pauseVideo");
        }
        if (notification === "PLAY_VIDEO"){
            this.sendCommand("playVideo");
        }
    },
    
    getDom: function() {

        var wrapper = document.createElement("div");

        var background = document.createElement("div");
        background.classList.add("video-background");

        var foreground = document.createElement("div");
        foreground.classList.add("video-foreground");

        var iframe = document.createElement("iframe");
        iframe.setAttribute("id", "my-video");
        iframe.setAttribute("src", "https://www.youtube.com/embed/5kIe6UZHSXw?enablejsapi=1&autoplay=1");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("type", "text/html");

        foreground.appendChild(iframe);
        background.appendChild(foreground);
        wrapper.appendChild(background);

        return wrapper;
    }
});

zichao92

@strawberry-3.141

OMG you are life saver. So the whole trick to my module is to use sendcommand instead?

strawberry 3.141

@zichao92 not only you had some more issues and sendCommand is a custom method

pepebc

These modules are very interesting.
Would it be possible to use voice command to manage pause and play of youtube?
Via notification?
Thank you

E3V3A

@strawberry-3.141 Funny how the youtube URL renders within the code tags! :)

Mykle1

@pepebc

I had this problem with my Alarm Clock MM and voice commands. Everything works perfectly until the alarm sounds. Now my voice command has to compete with the alarm that is playing. The success rate was pretty low and I was not happy with that. Setting a long enough pause in the alarm sound to issue a voice command seemed to work ok but I wasn’t happy with that either. In the end, I settled for making a clickable button appear when the alarm sounded.