14 Replies Latest reply on Nov 18, 2016 1:51 PM by JeelyK

    How can I add video

    ashrafo87502910

      How can I add video to stage in flash html5 canvas ??

        • 1. Re: How can I add video
          Nipun Asthana Adobe Employee

          Videos are not supported in a Canvas document project in Animate. You'll need to use external script if you really need to show a video in canvas.

          I may be able to help if you can explain the end result of what you're trying to achieve..

          1 person found this helpful
          • 2. Re: How can I add video
            ashrafo87502910 Level 1

            Use this code as you said from outside

            video = document.createElement('video');

            video.src = 'v02.mp4';

            video.type="video/mp4"

            var b = new createjs.Bitmap(video);

            this.min_mc.addChild(b);

            video.play()

             

            it's work fine on windows but on apple devices not work  any help ??!!

            • 3. Re: How can I add video
              ClayUUID Adobe Community Professional

              By "not work", do you mean the video doesn't play, or that nothing appears at all?

               

              My personal approach for playing video in Canvas mode is similar, but I don't try to pipe it through the canvas. I just overlay a DIV containing a video tag on top of the stage. First, I load in these custom functions:

               

              // Create an EaselJS DOMElement DIV layer above the canvas
              // Accepts X, Y, width, height, HTML content, and CSS styling (optional)
              // CSS styling is a CSS-formatted literal string
              // Returns a reference to the DIV, required to remove it later
              //
              // DIV is added as a child to the CreateJS stage, allowing all
              // applicable properties and methods to be used.
              // http://www.createjs.com/docs/easeljs/classes/DOMElement.html
              makeDiv = function(x, y, w, h, html, css) {
                  // create and initialize DIV element
                  var d = document.createElement("div");
                  d.style.cssText = "visibility:hidden; position:absolute; left:0; top:0; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");
                  d.innerHTML = html;
                  // attach element to CreateJS stage
                  canvas.parentNode.appendChild(d);
                  var cjsDom = new createjs.DOMElement(d);
                  cjsDom.x = x;
                  cjsDom.y = y;
                  return stage.addChild(cjsDom);
              }
              
              // Remove a DIV created by makeDiv
              rmDiv = function(ref) {
                  if (ref) {
                      // remove the HTML element
                      var elem = ref.htmlElement;
                      if (elem.parentNode) {
                          elem.parentNode.removeChild(elem);
                      }
                      // remove the DOMElement proxy
                      stage.removeChild(ref);
                  }
              }
              
              

               

              (I've posted a version of this before. This is a shorter, improved version.)

               

              Then call like so to create an HTML5 video element above the stage canvas:

               

              makeDiv(0, 0, 640, 480, "<video src='myvideo.mp4' autoplay controls></video>");
              
              


              2 people found this helpful
              • 4. Re: How can I add video
                bad_cholesterol Level 1

                Thank you Clay’s Unique UID it works perfectly!

                 

                I have a question > I made a button to remove the video from the stage, but I can't figure how to make it work !! :-s

                 

                could you help me on that ? thanks !

                 

                 

                f e w

                from Paris

                • 5. Re: How can I add video
                  ClayUUID Adobe Community Professional

                  It says right in the comments for makeDiv, "Returns a reference to the DIV, required to remove it later". So:


                  this.myDivRef = makeDiv(0, 0, 640, 480, "<video src='myvideo.mp4' autoplay controls></video>");
                  


                  Then:


                  rmDiv(this.myDivRef);
                  

                   


                  • 6. Re: How can I add video
                    bad_cholesterol Level 1

                    sorry monsieur UID I didn't take the time to read the whole comments

                     

                    thank you it works like a charm !!

                     

                    I got another question > is there a way to import a video in a container ? like in adobe flash ?

                     

                    I want the video to be below another layer or text

                     

                    Is it possible ?

                     

                    merci !!

                    1 person found this helpful
                    • 7. Re: How can I add video
                      CAR AUDIO GUY

                      I cannot get this to work. I see the video but it plays off the canvas (stage). I followed your instructions but it is still not working.

                      • 8. Re: How can I add video
                        JeelyK Level 1

                        Hi, Clay UUID,

                        I'm also working on putting a video into an HTML5 document and the code you provided works perfectly to load the video in - however I'm trying to make the video disappear on the next frame and I've used

                        '

                        1. rmDiv(this.myDivRef);  '

                         

                        on the following frame (making a new keyframe on my actions layer), but it does not remove the video for me.

                        Does this have something to do with keyframes in the action layer?

                         

                        Thanks,

                         

                        Keely

                        • 9. Re: How can I add video
                          ClayUUID Adobe Community Professional

                          It can't possibly have anything to do with keyframes, because user-created objects floating around in the browser DOM have no connection to the Animate timeline.

                           

                          What code are you using to create the video?

                          • 10. Re: How can I add video
                            JeelyK Level 1

                            Thanks for the response.

                             

                            I have used the code that you shared above -

                             

                            // Create an EaselJS DOMElement DIV layer above the canvas 

                            // Accepts X, Y, width, height, HTML content, and CSS styling (optional) 

                            // CSS styling is a CSS-formatted literal string 

                            // Returns a reference to the DIV, required to remove it later 

                            // 

                            // DIV is added as a child to the CreateJS stage, allowing all 

                            // applicable properties and methods to be used. 

                            // http://www.createjs.com/docs/easeljs/classes/DOMElement.html 

                            makeDiv = function(x, y, w, h, html, css) { 

                                // create and initialize DIV element 

                                var d = document.createElement("div"); 

                                d.style.cssText = "visibility:hidden; position:absolute; left:0; top:0; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : ""); 

                                d.innerHTML = html; 

                                // attach element to CreateJS stage 

                                canvas.parentNode.appendChild(d); 

                                var cjsDom = new createjs.DOMElement(d); 

                                cjsDom.x = x; 

                                cjsDom.y = y; 

                                return stage.addChild(cjsDom); 

                             

                             

                            // Remove a DIV created by makeDiv 

                            rmDiv = function(ref) { 

                                if (ref) { 

                                    // remove the HTML element 

                                    var elem = ref.htmlElement; 

                                    if (elem.parentNode) { 

                                        elem.parentNode.removeChild(elem); 

                                    } 

                                    // remove the DOMElement proxy 

                                    stage.removeChild(ref); 

                                } 

                            }

                             

                            I have all of that on Frame 1, then at Frame 3 I call the video:

                             

                             

                            makeDiv(150, 250, 854, 450, "<video src='video.mp4' autoplay controls></video>");

                             

                            Then I put the remove code on Frame 4:

                             

                            rmDiv(this.myDivRef);

                             

                            but the video does not remove as I proceed to the next frame. I should also add (sorry didn't mention before) that my doc is sort of set up like an online course / slide show with navigation buttons to move in between frames and a page # counter. Not sure if that would have an effect, I'm (obviously) not a coder so I'm very new to this stuff. Here is the code I used for the page navigation:

                             

                            _root = this; // global handle to root timeline for event listeners 

                            this._maxPage = _root.timeline.duration - 1; // total pages 

                             

                             

                             

                            // event handlers 

                            this.navPrev = function() { 

                                var cur = _root.timeline.position; 

                                if (cur > 0) { 

                                    _root.navToPage(cur - 1); 

                                } 

                             

                            this.navNext = function() { 

                                var cur = _root.timeline.position; 

                                if (cur < _root._maxPage) { 

                                    _root.navToPage(cur + 1); 

                                } 

                             

                            // do navigation 

                            this.navToPage = function(p) { 

                                // set visibility of nav buttons 

                                this.prev.visible = p > 1; 

                                this.next.visible = p < this._maxPage; 

                                // update page counter 

                                this.pageNum.text = "Page " + p; 

                                // navigate 

                                this.gotoAndStop(p); 

                             

                            // assign event listeners 

                            this.prev.addEventListener("click", this.navPrev); 

                            this.next.addEventListener("click", this.navNext); 

                             

                            // get the party started 

                            this.navToPage(1); 

                             

                            This code is all on Frame 1 as well.

                             

                             

                            Much thanks for the help,

                            Keely

                            • 11. Re: How can I add video
                              ClayUUID Adobe Community Professional

                              *cough*

                               

                              Where's the part where you actually assign a value to this.myDivRef?

                              • 12. Re: How can I add video
                                JeelyK Level 1

                                I can see now that I missed that. I'm not super familiar with javascript so it's all sort of a maze to me.

                                 

                                Would that be something as simple as:

                                 

                                this.myDivRef = (150, 250, 854, 450, "<video src='video.mp4' autoplay controls></video>");

                                 

                                Or is that totally wrong? (It's probably wrong).

                                 

                                Help is much appreciated.

                                • 13. Re: How can I add video
                                  ClayUUID Adobe Community Professional

                                  Now you've lost the function name.

                                   

                                  Look, if you scroll up to the sixth post of this thread you'll see I've already answered this exact question.

                                  • 14. Re: How can I add video
                                    JeelyK Level 1

                                    Got it!!

                                     

                                    Thank you!!