• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Controlling Embedded Youtube Video on MM

Scheduled Pinned Locked Moved Troubleshooting
23 Posts 6 Posters 12.8k Views 8 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    strawberry 3.141 Project Sponsor Module Developer @zichao92
    last edited by Mar 2, 2017, 3:59 PM

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

    Please create a github issue if you need help, so I can keep track

    Z 1 Reply Last reply Mar 3, 2017, 1:51 AM Reply Quote 0
    • Z Offline
      zichao92 @strawberry 3.141
      last edited by zichao92 Mar 3, 2017, 1:52 AM Mar 3, 2017, 1:51 AM

      @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>';
      
      S 1 Reply Last reply Mar 3, 2017, 7:36 AM Reply Quote 0
      • S Offline
        strawberry 3.141 Project Sponsor Module Developer @zichao92
        last edited by Mar 3, 2017, 7:36 AM

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

        Please create a github issue if you need help, so I can keep track

        Z 1 Reply Last reply Mar 3, 2017, 10:22 AM Reply Quote 0
        • Z Offline
          zichao92 @strawberry 3.141
          last edited by Mar 3, 2017, 10:22 AM

          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.

          S 1 Reply Last reply Mar 3, 2017, 10:42 AM Reply Quote 0
          • S Offline
            strawberry 3.141 Project Sponsor Module Developer @zichao92
            last edited by Mar 3, 2017, 10:42 AM

            @zichao92 do you have your code on github?

            Please create a github issue if you need help, so I can keep track

            Z 1 Reply Last reply Mar 3, 2017, 12:09 PM Reply Quote 0
            • Z Offline
              zichao92 @strawberry 3.141
              last edited by zichao92 Mar 3, 2017, 12:11 PM Mar 3, 2017, 12:09 PM

              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

              S 1 Reply Last reply Mar 3, 2017, 1:58 PM Reply Quote 0
              • S Offline
                strawberry 3.141 Project Sponsor Module Developer @zichao92
                last edited by Mar 3, 2017, 1:58 PM

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

                Please create a github issue if you need help, so I can keep track

                Z E 2 Replies Last reply Mar 3, 2017, 2:08 PM Reply Quote 1
                • Z Offline
                  zichao92 @strawberry 3.141
                  last edited by Mar 3, 2017, 2:08 PM

                  @strawberry-3.141

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

                  S 1 Reply Last reply Mar 3, 2017, 2:11 PM Reply Quote 0
                  • S Offline
                    strawberry 3.141 Project Sponsor Module Developer @zichao92
                    last edited by Mar 3, 2017, 2:11 PM

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

                    Please create a github issue if you need help, so I can keep track

                    1 Reply Last reply Reply Quote 3
                    • P Offline
                      pepebc
                      last edited by Feb 11, 2018, 9:40 PM

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

                      Mykle1M 1 Reply Last reply Feb 11, 2018, 10:05 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy