Read the statement by Michael Teeuw here.
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 addedid = "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#onYouTubePlayerReadyIt 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; } });
-
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