12 Replies Latest reply on Apr 24, 2013 9:22 AM by TimJaramillo

    Help adding video to composition

    grafxman777 Level 1

      I have the following in a trigger on the timeline so that a video will start at a spcific point in time. For some reason I just can't get the video to play.

       

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

      vid.html('<video width="480" height="270" src="video/convert.mp4" type="video/mp4" controls="controls"  autoplay="autoplay" </video>');

       

       

      Any help would be greatly appriciated.

        • 1. Re: Help adding video to composition
          heathrowe Most Valuable Participant

          If I remember correctly, you won't see this play when you Preview in the browser. Is this the instance in which you can't get it to play?

          If so, instead navigate to the xxx.html file and open that in the browser. It should work when you View it this way. Assumming that that the path to the video is correct.

           

          Also to test that your video container works in Preview in Browser, use an absolute url reference.

           

          Example, replace

                    src="video/convert.mp4"

          with  

                    src=http://www.w3schools.com/html/movie.mp4

           

          Then Preview in Browser.

           

          Darrell

          • 2. Re: Help adding video to composition
            grafxman777 Level 1

            Hi Darrell,

            Thanks for the feedback. I'm actually testing it on a server. I changed the path to absolute but it still won't work (on server or in preview). This has me scratching my head. All I want to do is have the video play at a specific point in time, I thought this was going to be quick and easy. Should I not be using a get eliment call in a trigger? Is there a piece of code that I need to have in the compositionready handler? I must be missing something here, this can't be that difficult.

            • 3. Re: Help adding video to composition
              TimJaramillo Level 4

              Hey grafxman, if you are calling this from a trigger on the timeline it may be a scope issue. It's good practice to put all functional code on Stage.compositionReady event. You could then call that function from your trigger.

               

              Try adding a console log in your trigger to make sure you are accessing the symbol. Check your browser's console log when you run the app, to check the "vid variable".

               

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

              vid.html('<video width="480" height="270" src="video/convert.mp4" type="video/mp4" controls="controls"  autoplay="autoplay" </video>');

               

              console.log('at trigger, vid = '+vid);

              • 4. Re: Help adding video to composition
                grafxman777 Level 1

                Thanks TimJaramitto

                I have moved the video load to compositionready but I’m having a problem getting the trigger in the timeline to call the vid. This is what I currently have in compsitionready

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

                • vid.html("<video width='512' height='322' preload='auto'>" +

                "<source src='video/convert.mp4' type='video/mp4' />" +

                "<source src='video/convert.webm' type='video/webm' />" +

                "<source src='video/convert.ogg' type='video/ogg' />" +

                "</video>");

                What’s the best way to call the vid from the trigger?

                • 5. Re: Help adding video to composition
                  TimJaramillo Level 4

                  Hey grafxman, you can put that video code in a function, then call that function from your trigger.

                   

                  Put this on stage.compositionReady:

                   

                  sym.initVideo = function()

                  {

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

                       vid.html("<video width='512' height='322' preload='auto'>" +

                  "<source src='video/convert.mp4' type='video/mp4' />" +

                  "<source src='video/convert.webm' type='video/webm' />" +

                  "<source src='video/convert.ogg' type='video/ogg' />" +

                  "</video>");

                   

                  }

                   

                   

                  And put this on your trigger (this ensures that even if your trigger is nested inside other symbols, it will be able to find your function on the stage.compositionReady event):

                   

                  sym.getComposition().getStage().initVideo();

                  • 6. Re: Help adding video to composition
                    grafxman777 Level 1

                    Perfect - Thank you TimJaramitto. That's just what I needed!!!

                    • 7. Re: Help adding video to composition
                      TimJaramillo Level 4

                      No problem! Can you mark my response as correct, to make it easier for other users to find the right answer?

                      • 9. Re: Help adding video to composition
                        grafxman777 Level 1

                        Hi TimJaramitto - The trigger call works great but for some reason the vid isn't preloading. I need the vid to preload while the composition is doing its thing so when the play head reaches the trigger there isn't a load delay. Any thoughts? You can view the comp here http://www.synergystrategic.net/NTMS/KissTrust/laptop.html  the vid comes into play on the third slide (the piggybank).

                        • 10. Re: Help adding video to composition
                          TimJaramillo Level 4

                          If you want the video to preload, you can separate the code out so that first, you set the video up in order to get then preload going. Then on click, actually play the video.

                           

                          Code on stage.compositionReady:

                           

                          // (take code out of the function so it runs right away- note I added an id prop)

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

                          vid.html("<video width='512' height='322' preload='auto' id='myVideo' >" +

                          "<source src='video/convert.mp4' type='video/mp4' />" +

                          "<source src='video/convert.webm' type='video/webm' />" +

                          "<source src='video/convert.ogg' type='video/ogg' />" +

                          "</video>");

                           

                          sym.playVideo = function()

                          {

                               sym.$('#myVideo').get(0).play();

                          }

                           

                           

                          Code on your trigger:

                           

                          sym.getComposition().getStage().playVideo();

                          • 11. Re: Help adding video to composition
                            grafxman777 Level 1

                            Excellent - that did the trick. Thanks TimJaramitto, I appreciate your help!!

                            • 12. Re: Help adding video to composition
                              TimJaramillo Level 4

                              No problem, glad it worked for you! Btw, if you can mark my last answer as "helpful", it will help others users find the answer more easily. Thanks!