2 Replies Latest reply on Mar 1, 2013 9:52 AM by TimJaramillo

    How to stop youtube video by clicking on other elements in a stage?

    Gabri3l1978

      This is the embed of youtube video in a container

       

      var container = sym.$("video");

      var youtube = '<iframe width="'+container.width()+'" height="'+container.height()+'" src="http://www.youtube.com/embed/v1uyQZNg2vE" frameborder="0" allowfullscreen></iframe>'

      container.html(youtube);

       

      But when i click on other element in the stage, the video keeps playing...

       

       

      Help pls..

        • 1. Re: How to stop youtube video by clicking on other elements in a stage?
          josh.dura Adobe Employee

          If you would like to control any sort of video embedded by youtube, you are probably going to need to use their JS API. Here's a couple links...

           

          http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

          https://developers.google.com/youtube/js_api_reference

          • 2. Re: How to stop youtube video by clicking on other elements in a stage?
            TimJaramillo Level 4

            You also might want to check out this thread that Elaine posted a while ago:

             

            http://forums.adobe.com/message/4614108

             

            Begin quoting Elaine:

             

            Hey, guys-

             

            Okay, I've put together a simple project for you to play with.   (While I can't compete with a broken foot, I can say I've been heads down working on a great feature in the next preview.)  Again, please note that the video player APIs are highly proprietary to the services themselves, so what will work for YouTube will not necessarily work for Vimeo.  Since we don't control either the API or the services, these could break at any time.

             

            Live sample:

            http://www.gotspit.com/edge/videoSample/

             

            Project Files (Preview 6.1):

            http://www.gotspit.com/edge/videoSample/videoSample.zip

             

            Because a lot of the magic doesn't happen in Edge, you're going to have to open up the index.html to view where the real magic happens.  To boil it down, you need to have your parent HTML hook into the JavaScript APIs, and then you can access them in your Edge composition as a variable.

             

            This is how I did it:

            1. I created a very simple HTML page that had only <html><head></head><body></body></html>
            2. I cut and pasted from Google's API
            3. I added a function for Google's API to call and copied and pasted their code snippet as to how to get a JS handle to the player (which I named "player")
            4. I opened the HTML file in Edge, which created the project, and then added the buttons with the variables.

             

            The one thing to note is that in this sample, I trust that the player will be available before the Edge runtime initializes.  While this can be true in some cases, it's not always the case.  That being said, if the only thing you're doing is pressing play/pause/stop, etc., it's likely you'll never hit on this problem.  But if you're doing something like setting up a playlist for YouTube to play through before the player begins playing, you might have some problems (what we call "race conditions") if the player doesn't finish initializing before your Edge code runs.

             

            Hope that helps.

             

            Cheers,

             

            -Elaine