5 Replies Latest reply on Aug 3, 2016 11:14 AM by ClayUUID

    HTML5 video rotate and unload

    erikl61197042

      I've followed this code to add video to my html5 canvas.  There are a couple of settings that I would like to configure.  Such as rotating the video several degrees.  I'd also like to unload the clip when its done playing.

       

      how to load video in Html5 Canvas?

        • 1. Re: HTML5 video rotate and unload
          ClayUUID Adobe Community Professional

          Video in canvas mode is played using a standard HTML5 video tag, so you rotate it exactly like you'd rotate anything in HTML-- using a CSS transform.

           

          To do anything when a video ends, you just need to attach an event listener to the video tag.

          Media events - Web developer guides | MDN

          1 person found this helpful
          • 2. Re: HTML5 video rotate and unload
            erikl61197042 Level 1

            The code you provided for the video (makediv) I put that in an Actions layer in Animate, which ends up in a javascript doc (including the call makeDiv(1550, 250, 640, 480, "<video src='video.mp4' autoplay ></video>");.  The css transform is suppose to be in the style tag in the HTML.  I'm just confused as to how you assign the css transform to the makediv in the javascript.  Should the code to call for the video be in an HTML tag? 

            • 3. Re: HTML5 video rotate and unload
              ClayUUID Adobe Community Professional

              My mistake, I should have linked to this thread instead, which includes an improved version of that code: Re: How can I add video

               

              This code accepts a final CSS parameter, using standard inline CSS syntax. So you could pass it something like "transform: rotate(20deg);" to rotate it.

               

              Note that this will not work correctly with stage scaling (mislabeled "Responsive" in the publish settings), because it assumes that the stage and the HTML around it are both at the same scale. Making them scale together is more complicated.

              • 4. Re: HTML5 video rotate and unload
                erikl61197042 Level 1

                Reading up on the CSS3 transform property I tried using the following and it doesn't work.  Also tried just transform by itself.  Video displays, but isn't rotated.

                 

                 

                makeDiv(1550, 250, 640, 480, "<video src='video.mp4' autoplay ></video>", "-ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg);");

                • 5. Re: HTML5 video rotate and unload
                  ClayUUID Adobe Community Professional

                  That won't work with the code from the first thread I linked. You have to use the code from the second thread I linked. They use different CSS syntax.