Jump to content
Search Community

How gsap video seek control ?

Kemal Durhat test
Moderator Tag

Recommended Posts

Hi. 

In a Nodejs based realtime game, I want to edit the time of the running video when the user logs in to the game. Since there are multiple scenes in the game and I use (timeline to) in these scenes, I transfer the user to the scene with (seek).

 

 getTime(3);
  function getTime(time)
  {
    tm.to(coming_question_section, { display: "block" }, "coming_video");
    tm.to(coming_question_video, { onStart:videoPos, onStartParams:[time]  }, "coming_video");
    tm.to(coming_question_section, { display: "none" }, "question");
    tm.to(question_section, { display: "block", onStart:startQuestion,onStartParams: [0] }, "question");
    tm.seek(time);
  }
  function videoPos(p)
  {
    coming_question_video.currentTime = p ;
  }

 

When I set a value of 0 to the getTime function, there is no problem. But, when I give a value of 3, there is a problem. The video starts from 0.

 

 

 

Link to comment
Share on other sites

Ok, I have worked with HTMLMediaElement  a little and thought I'll take a shot at your question. But You really got me confused over the small issues first.

29 minutes ago, Kemal Durhat said:

When I set a value of 0 to the getTime function


Why on earth would you name a function that sets something getSomething(x) ?

Then you use gsap.to() for setting display:block which is binary and not a thing you could animate.

 

I see a powerful tool like gsap.Timeline charged up with 4 tween that animate exactly nothing. Or am i getting something wrong here?

You probably could pass a parameter  through a lot of jumps and hoops to set a currentTIme on a HTMLMediaELement, but - why?
It's not that animation currentTime in a vide makes a l lot of sens. You just want to jump to a certain point don't you?

Link to comment
Share on other sites

The game continues in the loop and online for 24 hours. If the participating players join the game on the video screen, I write a global time value in the function. All game scenes have a specific duration. example: tm.add ("question", 6); .. 

The only part I need is to dynamically adjust the start time of the video in this timeline if it gets into the game in the video scene.

Link to comment
Share on other sites

I had similar questions as @iDad5

 

It's almost impossible for us to troubleshoot something like this without a minimal demo. I don't know what "tm" is or how it is built or how you're placing those labels in there. From what I can tell, it's a logic issue with how you're populating the timeline. You're putting things at specific labels, and then you're telling the timeline to jump to a numeric time which may not be at all related to where those things are on the timeline. 

 

Also be careful about trying to make a video jump to a certain spot if it hasn't fully loaded it yet. 

 

If you still need some help, please provide a minimal demo in CodePen or something like that. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

As Jack has written a minimal demo would be nice.

 

And also for javascript video players (built-in a browser or custom) all of their methods are guaranteed to work only if the video is loaded fully or up to the required position. You can get that information from HTML5 Video API (or I would strongly suggest to use VideoJS open source player, best IMHO).

 

For more javascript video player information you should probably look in other forums, like here:

 

https://stackoverflow.com/questions/18266437/html5-video-currenttime-not-setting-properly-on-iphone

  • Like 1
Link to comment
Share on other sites

First of I have to apologize for my first comment. If been made aware that it may have sounded rude, and I agree that I should have worded it more carefully. I'm not a native speaker and by the phrase 'why on earth' for example I simply wanted to express my bafflement when I found out that you named the function somewhat counterintuitively. I did not want to sound condescending.

 

Concerning your CodePen: I found it a bit hard to follow with those fixed timings. And I still not 100% sure what it is you need to accomplish.

 

As far as I understand you have an ever repeating cycle of animations where (for now) the only difference is that at the point the video shows you want it to start at a different time each time? If that's that case I see the following pitfalls, you might encounter with your problem.

 

But before I go into the details of what I would see as potential pitfalls I need to understand the following sentence in your comment:

 

Quote

For example, what should I do if the player enters the game at 18 seconds?  

 

If you mean the end-user / site-visitor by 'player' I don't see how he or she can 'enter the game' at any specific point in time other than their own. All I've seen an heard so far is front-end code that runs on the users device exactly at the point of her or his choosing. If by game you mean the timeline we are taking about, right now it would always start at 0 for any user. I guess I'm either missing or not understanding a crucial concept  of yours. Pleas clarify that for me.

 

  • Like 1
Link to comment
Share on other sites

Thank you for your comment iDad5 . The game is running on nodejs with socket. The socket controls the input and global time. It sends a parameter in the form of cycleControl (18) to this page. The game then starts at the 18th second. Did I explain. I do not know.

Link to comment
Share on other sites

Ok, that clears up thing a bit for me at least. I'm not working with node.js but I guess that's probably not a problem there.

 

Next questions I would like to ask to narrow in on the problem: 

Is it possible that the way you restart the timeline trough itself is part of the problem? (I would say so, but that's probably due to the example being simplified - still I would think that there might be a catch in the fact that each new call make the new timeline start at zero?)

 

Quote

tm.seek()._zTime

I'm not familiar with '_zTime' a quick research makes me think it's something to di with the inner workings of the timeline, but it's not in the docs and I'm not sure what you need it for.

 

And another possible problem might be that the video simply isn't ready / bufferd far enough. Ensuring that is nearly impossible with modern browsers and 'regular' JavaScript, but maybe you have advanced methods to do so?

Link to comment
Share on other sites

After uploading the video, these codes start working. For this reason, I just want to move the video time to its position in the timeline. 

 

cycleControl (18) 

example: seek (18). video should start at 3 seconds. 18 - 15 -> (Video Scane Checkpoint)

 

But, the video does not start from this point. Here is the problem.

Link to comment
Share on other sites

22 hours ago, iDad5 said:

I'm not familiar with '_zTime' a quick research makes me think it's something to di with the inner workings of the timeline, but it's not in the docs and I'm not sure what you need it for.

Definitely NEVER use properties that start with "_" - those are private. If you edit them, you could break things. _zTime isn't meant for you to use. 
 

I didn't have much time, but I glanced at your demo and GSAP seemed to be working correctly. For example, I called cycleControl(18) and checked tm.time() and it was indeed 18. I'm not sure I understand what you're saying the problem is. Do you think GSAP is behaving incorrectly? 

 

21 hours ago, Kemal Durhat said:

But, the video does not start from this point. Here is the problem.

This isn't a GSAP-related issue then, right? I don't have time to troubleshoot non-GSAP issues but my guess is that your video isn't buffered adequately to jump to that spot, but I could be wrong. 

Link to comment
Share on other sites

As @GreenSock has spoken about your use of the 'tm.seek()._zTime' I took another look at your code and thought that you probably should have used tm.time() instead, as tm.seek() isn't supposed to get a value but to set it. I tried that and found that with the first run the parameter submited to your video-control function is -15 and in all other Iteration somewhere around 46. The video then jumped with (loading delay as expected) to that point. (obviously it can not jump to -15 due to the limitations on time-travel still in place)

 

I still do not fully understand what you want to achieve and why ;still I have a strong feeling that there is at least  one logical error in the way you set up things:

 

On 3/21/2021 at 10:54 AM, Kemal Durhat said:

cycleControl (18) 

example: seek (18). video should start at 3 seconds. 18 - 15 -> (Video Scane Checkpoint)

 

your scane2VideoPos function tries to set the plai-head of the HTMLMediaElement (aka <video>) to a certain position. You do it by setting 'video.currentTime' the correct method of the HTMLMediaElement. So that in it self works with the possible problems of buffering as mentioned by GreenSock and me before.

But seek(xx) isn't related to the video, it is a function/method of the GSPTimeline to move its' virtual' play-head. So your sentence: 'example: seek (18). video should start at 3 seconds. 18 ' seems to be  flawed logic to me.

 

You say that by passing a value to cycleControl (example: 18) you want to position the videos play-head. The method to do so is (as seen above) video.currentTime. You use that only in your  'scane2VideoPos' function which you call inside cycleControl from a gsap.tween so far so good. But if I follow the value you passed to your cycleControl (that is tck inside the function), you seem to never pass it (or a computed version of it) to the  scane2VideoPos functinon. The value you pass to this is only connected to the timeline in some way...

 

Am I right, or have I totally missed something?

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...