Jump to content
Search Community

Search the Community

Showing results for tags 'video'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I've have red almost everything on the net and over here about animation video, but can not get anything working... How do I let say on $(window).on('click', function(){ // play.forward.... }); and dblclick, playinReverse... I've tried so many things... these did not help. http://greensock.com/forums/topic/12771-animating-the-playhead-of-video-element-is-it-possible/?hl=ahrengot#entry53668 http://greensock.com/forums/topic/13719-tweening-video-frames/?hl=video+control
  2. Hi guys, I am looking into building an adverting system that would use GS at it's core. I am going to use bottom end android tables as display units and I currently find that animations are jerking due to the low spec CPUs. I know that there is some GPU support in CSS3 but I am not sure how practical or applicable this is to the mobile platform. Having said that I know that most of these low spec tablets do have quite good GPU's for video playback up to 1080p 30fps and I am only looking for 720p 30-60fps. So what I am looking to do is use the 'save to image' function of canvas and either post to the server or use something like PhantomJS in Node to render the frames to a folder then use ffmpeg to stitch them into mp4s at the desired frame rate. This would also allow a host of other effect to be applied programmatically. I know that GS plays nice with KineticJS for canvas rendering and I have altered the codepen example (http://codepen.io/GreenSock/pen/xaDAG) to use the tick event listener as a test. I am however worried that this is not synchronous and would not post to the server fast enough to capture all the frames if run clientside. Should I rather use seek to jump a frame forward at a time and then render the canvas out. Does seek work with the KineticJS plugin? Many thanks in advance, any other approaches welcome.
  3. I'm experimenting with tweenmax. What I would like to do is: 1. When the mouse passes on a text, you start to see the box where the video is. 2. When the mouse leaves the text, the video resets and hides itself. 3. The procedure is repeated.
  4. Hi there, I've been struggling with this for a while now and finally decided to submit this to the forum. I've read a number of posts that make this seem easy, but I'm obviously missing something. I'm trying to simply add an HTML video element to a timeline so I can control when it starts to play and coordinate it with my other banner elements. In this simple example, I want to control how long I see a black screen with the intro text before I fade that black background and text away and start the video. (The Pen I've posted here is a much shortened version, btw, for simplicity.) I have tried a number of configurations of .play() and .add with a callback function, but it just doesn't seem to work. The only reason the video plays in the Pen I have now is that I have autoplay set in the HTML attributes in the video element. If I remove that attribute from the video element, the rest of my timeline plays over a blank box. Is there something I'm missing with how to configure a video element and add it to a simple timeline? Thanks so much for any insight you can give me!
  5. Hi, I'm trying to sync a Timeline with a video, but the only reliable solution seems to be ontimeupdate, which only fires every half second or so Is there decent solution to this? Thanks
  6. Hello, fellow GSAPpers! This is my first stab at GSAP (love it!) and I'm super-eager to get your input on whether I grasped some of the basics or just totally messed it up. What I wished to create was some scrolling magic where the user controls the position of a video using the scroll wheel . Very similar to what goes on at the top of apple.com/homepod (which also seem to use GSAPs Tween & Timeline. Please have a look and give any hints on how to make this even smoother and more compatible on all sorts of devices (iPhone seems to work pretty good though). One thing that bugs me is that this is 40 lines of code. Apple's example runs one for at least 400. What am I doing wrong? TOM
  7. Hello everyone, I am new to GSAP and I am trying to enable dragging and click on custom html5 video timeline with GSAP. I have read a couple of posts (like this one) on the forum but there is something I can't understand... I've reproduced a simplified example on the following jsfiddle (I hope you don't mind jsfiddle) : https://jsfiddle.net/epigeyre/oLmk6b0d/ So I create my draggable element from an element stored in a variable, bound it to it's container (which is the timeline container), and then add my function onDrag (I guess click will be the same). The timeline progress is shown by a div inside the timeline container that is scaling on an X axis from 0 to 1. I think linking to the current video time is ok but the animation is not (I don't understand why a translate is applied...). Here is that specific snippet: Draggable.create( timelineProgress, { type:'x', bounds: timeline, // My timeline container onDrag: function() { video.currentTime = this.x / this.maxX * video.duration; TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ; }, onClick: function() { console.log('click'); } }); Could you help me understand what's going? Thanks a lot for your help!
  8. Hello, I'm trying to make an animation using a SVG file as framework of a embed video. I don't know how to make rect and paths to animate, I've tried everything. The animation should be from the center of the top line to the left and right and while advancing paint the path and ends in the central part of the bottom line. The final animation is not important, for now, but the svg does not move at all in codepen.
  9. Hello, I can't seem to animate a div that contains a youtube video and I have a project that due asap. I want to be able to animate the opacity or the position. The animation either won't occur or the animation will stop before it has completed. Please let me know what I might be doing wrong. Thanks! ::Carey::
  10. I'm trying to create a morphing icon to overlay a video. It's partially working, the first time the video is paused it works as intended but pressing it again show the icon in its final state without the animation. The second animation to go from pause to play never triggers. Any guidance as to what I'm doing wrong is greatly appreciated.
  11. Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?
  12. mikel

    reverse a video

    Hi guys, I´m a fan of mini videos and would like to control a video by tweening - especially the reverse part. I saw the post https://greensock.com/forums/topic/9838-reverse-video-with-pauses/ but the video runs not smooth. Here is my pen: http://codepen.io/mikeK/pen/Zexqgp Kind regards Manfred
  13. This isn't so much a question as it is a warning. If I had hair I would've pulled it all out by now. I was working on a way to use TimelineMax to trigger separate videos to play in sequence as well as follow a scrub bar. Needed to start and/or stop video clips at any point in the video and then trigger the next one to simulate someone doing a video edit - where they might drag in the edges only exposing certain parts of the video's timeline. So, I just set up a simple array of objects with properties that I could store and retrieve at any point like this: vidArr = [ vid1 = {el: document.getElementById('vid1'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false}, vid2 = {el: document.getElementById('vid2'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false}, vid3 = {el: document.getElementById('vid3'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false} ]; If you look closely you'll see I named one of the properties delay which was as dumb as it gets. Rather than doing much in the way of tweening, I'm just using TimelineMax to trigger opacity, start and end times on the video objects. There is a quick opacity tween at one point but mainly just to keep the first video from flashing on replay. Here's what it looked like: for( let vid of vidArr ) { var tl = new TimelineMax({onStart:startVideo, onStartParams:[vid.el]}); tl.set(vid.el, {currentTime:vid.startAt, immediateRender:false}, 0) .set(vid, {active:true, delay:masterTL.duration(), immediateRender:false}, 0) .to(vid.el, 0.2, {opacity:1, immediateRender:false}, 0) .set(vid.el, {opacity:0, immediateRender:false}, vid.endAt) .set(vid, {active:false, immediateRender:false}, vid.endAt); vid.delay = masterTL.duration(); masterTL.add(tl,vid.delay); } There are 3 videos and each one is 10 seconds or under. The first 2 added up to 17.2 seconds. Everything was good until it got to the last time through the loop and right after this... .set(vid, {active:true, delay:masterTL.duration(), immediateRender:false}, 0) ...where it was ending up being like 34 seconds long instead of 22 or so. Even though I was telling it to set a value on the delay property for vid it was setting it as a delay property for the timeline itself. Sometimes I surprise myself at how long I can stare at something and not see it. Anyway, don't use reserved properties for your custom objects! I renamed the property to wait and all started working. I do have one quick question though. Should it be necessary for me to add immediateRender: false in all those places? I tried to figure out a way to set that once in that glob of set's and to's but it would always break. Anyway, if anyone is looking for a way to accomplish this, it's working in the codepen.
  14. Hi, I'm in the process of creating an 300x250 MPU to be uploaded to DoubleClick Studio and ideally want the video in this creative to autoplay on both desktop browsers as well as mobile browsers. So far the MPU only autoplays on desktop browsers and requires user interaction to start playing on mobile browsers. I've read several forums that state that videos are unable to autoplay on mobile browsers for various reasons; so my question is, has anyone had a similar problem and been able to find a workable solution? Many thanks,
  15. Just wondering if there is a way to add and play/pause/stop media elements like audio and video to an instance of TimelineLite or TimelineMax and control with the GSAP-JS API? What I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline. Anyone any clues?
  16. When I show a video on start, the last frame of that video displays for a split second since that is the current data until the Video refreshes. Normally, Video.clear() would be the fix for that, but... ...there is a known bug with Video.clear(), logged in the Adobe system & never getting fixed: https://bugs.adobe.com/jira/browse/FP-178 The workaround seems to be either: show & hide video (which doesn't help since showing the video on start still displays the last frame) or: when clear() is called, destroy & reinstantiate the Video instance. It would be great if the VideoLoader had a clear() method which did the second point above.
  17. Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around this?
  18. Hi guys! Your community is awesome! I often read this forum but now I can not find an answer to my question. I need to make a responsive banner that stretches vertically and horizontally within certain limits (320x268 -> 1080x328). Inside this responsive container must play video. Advertising requirements are as follows: <script> function getUrlParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } </script> <a id="click1_area" href="#" target="_blank">...</a> <a id="click2_area" href="#" target="_blank">...</a> <a id="click3_area" href="#" target="_blank">...</a> // After "<a href ...></a>" assign them to click handlers: <script> document.getElementById("click1_area").href = getUrlParam('link1'); document.getElementById("click2_area").href = getUrlParam('link2'); document.getElementById("click3_area").href = getUrlParam('link3'); </script> For Video: Thank you guys for any help!
  19. Hi all, I am trying to find a way to export the timeline animation to a mp4(compressed) video. Does someone know how this can be done? Will really appreciate your inputs and suggestions. Thanks
  20. Hi. Maybe a simple question. But how do I start and stop a HTML5 video from a button in an HTML5 ad? I have looket in the forum but found nothing so simple Regards Olle
  21. Hi I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars. That issue has been solved and the codepen is here: http://codepen.io/dipscom/pen/rryZaQ Thanks a lot for that, it was a great help. Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly. I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning and labels but without success and I was hoping someone could help me with this. The codepen is here: http://codepen.io/anon/pen/RGgJrA In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working? Many thanks Pebble
  22. Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble
  23. Recently, we have moved our bespoke animations away from using DOM elements to using Canvas, due to memory issues when running on low to medium powered devices such as Chinese Android "sticks" and Google ChromeBit. Everything went smoothly, until we introduced videos. We have found a bug where a video plays on the first load of the page, but then after subsequent refreshes, the video will not play. Instead it just shows the very first frame. What is peculiar is that the video is loaded into its DOM element (used by Canvas to grab the video) and the frame even shows on the Canvas itself, but viewing the network logs in Chrome Inspector, the video is not shown in the logs as being loaded. Image assets are shown, as are the JS files, but no video, despite it being on the page. After some very brief digging, there does seem to be some kind of timing issue in the code. Assets are added to "sub" timelines which in turn are added to a main timeline. It appears that the sub timelines are firing their onStart callback before the code has chance the load the videos into the DOM element (looking at the code with my colleague, the order looks correct) Is there any reason why a (sub) timeline would start prematurely, before the main timeline is told to play?
  24. Hello, I am about to start doing a landing page with a 10 second video. But the thing is, they wanna add 3d elements to the video so i have to do it with stepped ease or something and make it move by mouse scroll. On the video, a guy jumps off the cliff with a snowy enviroment and when his fall ends he drops in to a cave and landing page itself fadein/scale up. So, I have few ideas but i wonder, how would you make this ? Simply: How to play video frames by mouse scroll with highest performance & quality ? Just wanna see how would you do, thanks.
  25. I'm trying to use scrolling to control video, all is essentially good, but it can be a bit jerky. I thought if i tween the playhead position rather than jumping to the current position it'd be much nicer. However it seems to wait until the tween is complete, then updates the displayed frame, making it much worse.. This is all happening within a much larger framework, so i'm just copying in the relevant snippet here; self.addScrollListener = function() { $(window).bind('scroll',self.updateTimelineByScrollPosition); } self.current_percent = 0; self.updateTimelineByScrollPosition = function() { var current = $(window).scrollTop(); var max = $(document).height() - $(window).height(); var pos = ( current / max ) * 100; var seek_time = self.time * pos; TweenMax.to( self, 0.5, { current_percent: pos, onUpdate: self.tweenUpdatePlayhead }); } self.tweenUpdatePlayhead = function() { self.jplayer_div.jPlayer( "playHead", self.current_percent ); }; Note I'm using jPlayer for the video, but I have tried doing this by setting the currentTime directly on the <video> element. Thanks, Andy
×
×
  • Create New...