Controlling Embedded Youtube Video on MM

zichao92

I managed to have some developments with your remote control module’s sendNotifcation command. I hooked up the MM using a browser and observed( using dev console, Note to beginners: press F12 on a browser to access this cool feature ) that a notification was send from MM Remote. This means that you were right all along, just that i didnt know how to observe the sendNotification command via dev console.

Currently, i have another issue. My youtube.js module receives the “PLAY_VIDEO” or “PAUSE_VIDEO” notification but is not able to perform what was desired.

Here’s my snippet of my code from my youtube.js :

notificationReceived: function(notification, payload) {
		if (notification === "PAUSE_VIDEO"){
			pausethevideo()

		}
		if (notification === "PLAY_VIDEO"){
			playthevideo()

		}
	},

getDom: function() {
var wrapper = document.createElement("div");
		wrapper.className = "thin xlarge bright";

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

		function stopthevideo(){
		var myPlayer = document.getElementById('my-video');
		myPlayer.stopVideo();
		};

		function pausethevideo(){
		var myPlayer = document.getElementById('my-video'); 
		myPlayer.pauseVideo();
		};
		
		
		wrapper.innerHTML='<div> <div> allowfullscreen></div></div>'; //youtube video link found here.

		

			return wrapper;
	}

});

However, i got an error from dev console :
Uncaught TypeError: Cannot read property 'pauseVideo' of null at Class.notificationReceived (youtube.js:69)

Im suspecting that my pauseVideo/playVideo function wasn’t recognised as it is getDom.

Will appreciate any help or advice !

strawberry 3.141

@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()

zichao92

@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>';

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