Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
axe-z

Trying to play with .mp4 file currentTime, to forward or reverse

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.
 
 
Link to comment
Share on other sites

Just so I'm clear ... you are having trouble getting click events to play/reverse a <video> element? Is that right?

  • Like 1
Link to comment
Share on other sites

well I 've made this pen 

See the Pen RoGOgB?editors=1111 by axe-z (@axe-z) on CodePen

 

thing is , it does not work on chrome ... 

it does in safari and ff... I do not understand ... 

 

I need to be able do do this...

Link to comment
Share on other sites

thank you for your responses, is there a way for me to get notifications, when I get replies here ? 

Link to comment
Share on other sites

What error were you gettting? It either didn't load correctly when you viewed it, or you have some browser extension interfering with it. I just swapped out the video src with the one you provided, and it works the same.

 

See the Pen 14b61cf9aed3f8c77a4cbb9b17ae9775?editors=0010 by osublake (@osublake) on CodePen

 

For reply notifications, there should be a button at the top that says "Follow this topic". You can also go to your dashboard > account settings > notification settings, and change how you receive notifications.

  • Like 1
Link to comment
Share on other sites

Thanks, but your pen, like mine, does not work in chrome :( that's weird.. 

any other way you think?? 

 

thanks for everything, nicely done for the time duration, I had an other solution, but yours is better. 

Link to comment
Share on other sites

Blake's seemed to work fine for me in Chrome. I suspect he may be right about a browser extension on your end interfering (?)

  • Like 1
Link to comment
Share on other sites

I would check it out in other browsers first. And you might want to try a different video format. In Opera, I noticed that .mp4 didn't work correctly, but .ogg did.

  • Like 1
Link to comment
Share on other sites

It works in ff, and safari, did not try opera. 

I have no plugins for chrome, and the last version ... well I had a sniffer for gsap, but once removed, it still does not work on my end .. weird. on mac that is. 

I guess that is my problem, but I noticed console.log(video.duration) == NaN ...console.dir(video) . if I scroll down to duration, I see a number.. This happens only on chrome. 

 

Obvioulsly the demo on codepen is not what i'm trying to do, h264 is SO good for compression, wished we could use it more. 

Performance is really poor on bigger video files. If only we could use video files with performance and ease. We could do so dawm much more... 

 

sorry for my poor english.

 

Thanks for your help, you guys are great. 

 

Make the web go beyond. 

Link to comment
Share on other sites

Worked for me in Chrome as well on Windows 10

 

When adding video source for the <video> element you should always have at least 2-3 different fallback video files. So along with mp4 you should also have oog and webm. So if one is not supported it will fallback to the other video fallback video source file.

 

Available web media formats

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

 

:)

Link to comment
Share on other sites

I do know about that , but mp4 should be working with chrome, it does, if no action is set . anyways, performance when rewinding is really really poor, skipping a bunch of frames. 

Thought about going with a setinterval, each 24, by animating the .playbackRate , as it is supposed to work, again , big fail. 

very frustrated right now .. I use to do this in flash around 6 years ago, when h264 came out. 

Link to comment
Share on other sites

If mp4 is not playing in Chrome for you then test in Chrome using Incognito Mode tab or window.. Like Jack advised it could be an extension in Chrome causing the conflict.

 

You might have to make sure the video is fully loaded in the window object and preloaded before doing anything with the video. using the preload attribute.

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

 

preload attribute:

  • This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
    • none: indicates that the video should not be preloaded.
    • metadata: indicates that only video metadata (e.g. length) is fetched.
    • auto: indicates that the whole video file could be downloaded, even if the user is not expected to use it.
    • the empty string: synonym of the auto value.

If not set, its default value is browser-defined (i.e. each browser may have its default value). The spec advises it to be set to metadata.

 

Example of multiple video files within the <video> element for fallback

<video width="480" controls preload>
  <source src="/webmvp8.webm" type="video/webm">
  <source src="/webmvp8_512kb.mp4" type="video/mp4">
  <source src="/webmvp8.ogv" type="video/ogg">
  Your browser doesn't support HTML5 video tag.
</video>

:)

  • Like 2
Link to comment
Share on other sites

With everything you can do with three,js and here with gsap, it is very painfull to understand that you can not do this simple thing ( without major frames skipping ) .

Link to comment
Share on other sites

My real problem is not with chrome anymore. but thanks ! I did understand an know all of this. I should have said before. It is just not fluid at all. On chrome, safari , ff, etc...

Link to comment
Share on other sites

I did that (preloaded / settimeouts.., reducing my hd files to 140k) , and I'm working with a local file on a crasy fast ssd. . 

Link to comment
Share on other sites

I have better results with  video.playbackRate = -1.0; but this does not work with chrome.... ( it is NOT supported) , and setinterval with video.currentTime = +=0.1. 

I am a newb only with gsap. 

 

Thanks for all your help. this forum is full of great helping people. wow. 

 

this helps me with the hurt. .

It seems I can not live without the canvas.

Link to comment
Share on other sites

There is hope !!!! 

 

var start = null;
 var video = $("video").get(0);
 
video.addEventListener('loadedmetadata', function() {
    console.log(video.duration);
});
 function frames(timestamp) {
   var progress;
   if (start === null) start = timestamp;
   progress = timestamp - start;
   video.currentTime = video.currentTime += 0.03;
   if (progress < 5965) {
     requestAnimationFrame(frames);
   }
 }
 
 requestAnimationFrame(frames);
Link to comment
Share on other sites

Im sorry to everyone that helped me, the problem for performance was mainly because of the compression software I use ... ( handbreak) ... What software do you use ?? I do not like to use online solution ... Handbreak is very good to acheive amazing result, and my license for Adobe media encoder is over and done.. 

Link to comment
Share on other sites

Open source projects could be an option. I haven't had the need to compress video in a long time so, not much of a help here but I do know that Blender (https://www.blender.org/) has video editing and compositing capabilities. Not sure how good the compression is.

  • Like 1
Link to comment
Share on other sites

Handbrake and HandbreakCLI also works great for compressing video files to really small file sizes for web or various devices.

 

https://handbrake.fr/

 

:)

Link to comment
Share on other sites

  • 2 years later...
On 11/18/2016 at 6:07 AM, axe-z said:

Im sorry to everyone that helped me, the problem for performance was mainly because of the compression software I use ... ( handbreak) ... What software do you use ?? I do not like to use online solution ... Handbreak is very good to acheive amazing result, and my license for Adobe media encoder is over and done.. 

 

Do you remember what kind of compression was causing the issue? I'm experiencing this same issue and trying to figure out what type of compression/output will work the best/smoothest

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.
×