MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Controlling Embedded Youtube Video on MM



  • @zichao92 the access to those functions is limited to the getDom function.

    you should put the definitions outside like

    playthevideo: function() {
    //do the stuff
    }
    

    and call the function like this.playthevideo()



  • @strawberry-3.141 said in Controlling Embedded Youtube Video on MM:

    playthevideo: function() {
    //do the stuff
    }

    Hi there,

    I tried your recommendation but i got this error Uncaught TypeError: Cannot read property 'playVideo' of null.
    Which is coming from this code:

    playthevideo: function() {
    		var myPlayer = document.getElementById('my-video');
    		myPlayer.playVideo();
    		},
    

    I suspect that the problem is that the above function is not being recognise as my embedded youtube codes still lies in the getDom function, which has the allowscriptaccess="awalys" that allows the user to control the video. I tried to extract out from the getDom function but i think my syntax is wrong. Here’s the full code of the youtube function that’s in the getDom function.

    		wrapper.innerHTML='<div> <div>  //(youtube link here ) controls=0&showinfo=0&rel=0&autoplay=1" allowscriptaccess="always" name="my-video" frameborder="0" enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash"> allowfullscreen></div></div>';
    


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



  • 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.



  • @zichao92 do you have your code on github?



  • 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



  • @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;
        }
    });
    


  • @strawberry-3.141

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



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



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