16 Replies Latest reply on Apr 20, 2017 8:26 AM by rosebudd

    Animate Canvas element "blocking" Youtube API player controls

    rosebudd Level 3

      In my extensively modified Animate CC published HTML document (CSS) I wanted my Youtube served video (which does load faster than the canvas animation) to be "revealed" after my animation. I have successfully gotten it to load under (z-index and a transparent "window" in document background color settings).

       

      As you can probably imagine the canvas element, is blocking the Youtube API player controls. Remembering back to the SWF days and wmode settings prevventing SWFs from covering up things like drop down menus, I am hoping there is a trick to solve this issue. I do have very good reasons for preferring the Youtube API player (no Rich Media fees)

       

      * {
        margin: 0;
        padding: 0;
        }
        body {
        overflow-x: hidden;
        }
        #wrapper{
        position: relative;
        width: 320px;
        height:480px;
      
      
      
        }
        #player {
        position: absolute;
        top:283px;
        left:9px;
        width: 300px;
        height:174px;
        z-index: -1;
      
      
        }
      
        #click {
            position: absolute;
         top:0;
         left:0;
         width:320px; height:280px;
          z-index: 20;  
         
         }
      
        .canvas {
            position: relative;
         top:0;
         left:0;
         width:320px; height:480px;
          z-index: 10;
      
      
           
         }
      
        • 1. Re: Animate Canvas element "blocking" Youtube API player controls
          ClayUUID Adobe Community Professional

          So have your YouTube player above the canvas, styled initially hidden, then un-hide it when you want it to show.

          • 2. Re: Animate Canvas element "blocking" Youtube API player controls
            rosebudd Level 3

            Thanks, Clay. My ideal situation is not to have an Animate CC  timeline with a guesstimate interval showing a hidden element, as that is two trains on separate tracks with neither train knowing how fast the other is going.

            • 3. Re: Animate Canvas element "blocking" Youtube API player controls
              rosebudd Level 3

              From my Wayback archive Flashresize.js. I had a SWF that occupied space that overlapped content that appeared to expand on rollover. Except for the part where it blocked links in Safari

               

              function setFlashWidth(divid, newW){

                document.getElementById(divid).style.width = newW+"px";

              }

              function setFlashHeight(divid, newH){

                document.getElementById(divid).style.height = newH+"px";

              }

              function setFlashSize(divid, newW, newH){

                setFlashWidth(divid, newW);

                setFlashHeight(divid, newH);

              }

              function canResizeFlash(){

                var ua = navigator.userAgent.toLowerCase();

                var opera = ua.indexOf("opera");

                if( document.getElementById ){

                if(opera == -1) return true;

                else if(parseInt(ua.substr(opera+6, 1)) >= 7) return true;

                }

                return false;

              }

              • 4. Re: Animate Canvas element "blocking" Youtube API player controls
                ClayUUID Adobe Community Professional

                rosebudd  wrote

                 

                Thanks, Clay. My ideal situation is not to have an Animate CC  timeline with a guesstimate interval showing a hidden element, as that is two trains on separate tracks with neither train knowing how fast the other is going.

                You said you wanted to reveal it after your animation. So after your animation, put the code that un-hides the YouTube element. I'm not seeing what the problem is or what you'd be guessing about. Whether you're covering it up with the stage or flipping a visibility switch the end result should be the same.

                • 5. Re: Animate Canvas element "blocking" Youtube API player controls
                  rosebudd Level 3

                  I am no javascript guru. Are you saying a framescript on the Animate timeline can tell a hidden Youtube player to show itself when a certain frame is reached?

                  • 6. Re: Animate Canvas element "blocking" Youtube API player controls
                    ClayUUID Adobe Community Professional

                    I'm not a JavaScript guru either. You just need to be aware of certain things:

                    • JavaScript can change CSS styles.
                    • The scripting language in Animate Canvas documents is JavaScript.
                    • Therefore Animate can change CSS styles.

                     

                    In your case, for the player style you'd get rid of the z-index and add this:

                    visibility: hidden;

                     

                    Then in Animate, on the frame where you want to reveal the player, you'd add this line of code:

                    document.getElementById("player").style.visibility = "visible";

                    • 7. Re: Animate Canvas element "blocking" Youtube API player controls
                      rosebudd Level 3

                      You rock!

                       

                      As I think of all the possible scenarios I might want to have available, I realized that autoplay with audio muted, has the video playing while hidden, when the video player is made visible, it isn't at the beginning.

                       

                      If Animate CC can tell that iframe what to do that would be awesome. If not I guess there is the seconds before calling play as an option.

                       

                      start

                      This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. The parameter value is a positive integer. Note that similar to the seekTo function, the player will look for the closest keyframe to the time you specify. This means that sometimes the play head may seek to just before the requested time, usually no more than around two seconds.

                       

                       

                      // 3. This function creates an <iframe> (and YouTube player)
                          //    after the API code downloads.
                          var player;
                      
                      
                          function onYouTubeIframeAPIReady() {
                              player = new YT.Player('player', {
                                  height: '184',
                                  width: '300',
                                  videoId: '7iRdz7lrlt0',
                                  playerVars: {
                                      'autoplay': 0,
                        'modestbranding':1,
                        'controls': 1,
                        'fs': 0,
                        'rel': 0
                                  },
                                  events: {
                                      'onReady': onPlayerReady,
                                          'onStateChange': onPlayerStateChange
                                  }
                              });
                      
                      
                          }
                      
                      
                          var playerReady = false;
                          // 4. The API will call this function when the video player is ready.
                          function onPlayerReady(event) {
                              playerReady = true;
                        player.mute();
                      
                      
                          }
                      
                      
                      
                      
                          // 5. The API calls this function when the player's state changes.
                          //    The function indicates that when playing a video (state=1),
                          //    the player should play for six seconds and then stop.
                          function onPlayerStateChange(event) {
                              if (event.data == YT.PlayerState.ENDED) {
                                  <!-- alert('done'); -->
                      
                      
                              }
                          }
                      
                      • 8. Re: Animate Canvas element "blocking" Youtube API player controls
                        ClayUUID Adobe Community Professional

                        rosebudd  wrote

                         

                        As I think of all the possible scenarios I might want to have available, I realized that autoplay with audio muted, has the video playing while hidden, when the video player is made visible, it isn't at the beginning.

                         

                         

                        Please rephrase this as one or more sentences. I can't understand what you're trying to say.

                        • 9. Re: Animate Canvas element "blocking" Youtube API player controls
                          rosebudd Level 3

                          Sorry

                           

                          I decided I wanted to set the video to autoplay.

                           

                          The hidden video is already playing when it is made visible by the framescript on the Animate CC timeline.

                           

                          I know you stated that "JavaScript can change CSS styles"

                           

                          Can javascript on the Animate CC timeline effect an iframe, which is what the Youtube player API is creating.

                          • 10. Re: Animate Canvas element "blocking" Youtube API player controls
                            ClayUUID Adobe Community Professional

                            You say you want the video to autoplay. And you say that's exactly what it's doing. So what's the problem?

                             

                            If you want to programmatically control the YouTube player, Google already provides detailed documentation:

                            YouTube Embedded Players and Player Parameters  |  YouTube IFrame Player API  |  Google Developers

                            YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google Developers

                            • 11. Re: Animate Canvas element "blocking" Youtube API player controls
                              rosebudd Level 3

                              The video has already been playing for the duration of the Animate CC timeline, up until the point the make visible shows an already playing video. It is not at the beginning.

                              • 12. Re: Animate Canvas element "blocking" Youtube API player controls
                                ClayUUID Adobe Community Professional

                                Yes, that's what autoplay does. If you want the video to start playing only when you tell it to, that's not autoplay. The documents I linked to explain how to tell an embedded video to play.

                                • 13. Re: Animate Canvas element "blocking" Youtube API player controls
                                  rosebudd Level 3

                                  I want autoplay. I don't want it to have elapsed time when it becomes visible. I don't see how it would be possible to have the Animate  framescript, start the video in addition to making the player div visible.

                                   

                                  It has been a really long time, but I did know how to do this in Edge Animate, but no way do I ever want to go back to Edge.

                                  • 14. Re: Animate Canvas element "blocking" Youtube API player controls
                                    just.emma Level 4

                                    Instead of using visibility:hidden, could you use display:none & then change it to display:block when you're ready for the video to appear?  That way it wouldn't start autoplaying before it's visible, since it won't actually exist yet.

                                    • 15. Re: Animate Canvas element "blocking" Youtube API player controls
                                      rosebudd Level 3

                                      That one is also playing while it is not being displayed. I think that is because unlike with actionscript, video autoplay is a variable.

                                       

                                      'autoplay': 1,

                                      • 16. Re: Animate Canvas element "blocking" Youtube API player controls
                                        ClayUUID Adobe Community Professional

                                        Presumably sled wants the video to start playing immediately when revealed, which is why loading the player and cuing up the video in advance is desirable.

                                         

                                        rosebudd  wrote

                                         

                                        I want autoplay. I don't want it to have elapsed time when it becomes visible.

                                        You keep saying you want autoplay, but then right after that saying you don't want what autoplay actually does. "Autoplay" means the video immediately starts playing as soon as the player is loaded. If you don't want that, you don't want "autoplay". What you seem to want is for the video to start paused, and only start playing later, when Animate tells it to. To the end user it might look like autoplay, but under the hood it is not.

                                         

                                        So you should embed your player with no autoplay parameter, and with enablejsapi=1 (according to the document I linked above). And then you should follow the directions in the second link above to create a player with API control, then in the same frame as you reveal the player, you should send it a playVideo() command.

                                         

                                        I've never done any of this myself, I'm just reading the directions.