2

I've found several posts like this but none of them work. For example, this post's first answer is a common solution. I made a fiddle based on his fiddle. The problem is it does work if you change the video's position it'll draw the current frame of video. But what I need is the first frame of the video just after I uploaded it. I tried to draw an image when the loadeddata event is fired. According to its description just what I need:

The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.

Still won't draw the first frame. Then I tried to draw an image on canplay and canplaythrough events which should work fine. But it didn't.

After some time playing with events, I found a temporal solution if we set a timeout for > 50 ms and try to draw a canvas it'll draw the first frame. But it's not a stable solution.

My thoughts are maybe the problem with buffering but at the same time canplaythrough fires when the user agent can play the media and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. And it still didn't work.

Any thoughts?

Alex Park
  • 651
  • 8
  • 15
  • I found a more stable solution I guess. In the `canplay` handler we change the `currentTime` close to the beginning and it'll draw it. Still though :\ – Alex Park Jan 14 '21 at 12:54
  • How are you getting the video dimensions and reading the first frame? The answer from @SergeyMalyutin at [link]https://stackoverflow.com/questions/1158759/get-video-first-frame-in-javascript uses the canplay event and seems to be OK - it reads the meta data first though, is that the difference? – A Haworth Jan 14 '21 at 16:10
  • @AHaworth we have the same order, I also have a metadata loading handler and a `canplay` handler. His fiddle does not work though unless you'll do the same steps I mentioned in my description. It won't draw an image of the first frame until you change a video's time position – Alex Park Jan 14 '21 at 19:58

0 Answers0