Jump to content
Search Community

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

axe-z test
Moderator Tag

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

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

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

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

  • 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.
×
×
  • Create New...