0

I have a video element in a html file, but I want to play the video in reverse. Is there any way to do this?

<video src="images/1.mp4" id="video1" poster="images/1.jpg" muted preload playsinline -webkit-playsinline x5-playsinline></video>

By the way , I can do this by drawing each frame into canvas then play the canvas, but it is not a good way, is there any better way?

jaimish11
  • 536
  • 4
  • 15
cityvoice
  • 2,409
  • 4
  • 14
  • 25
  • 1
    By playback do you mean autoplay? If yes, you can just add an autoplay attribute to the video tag. If you want to play or pause the video at will you can use Javascript to do that. Is that what you need? – jaimish11 Jul 31 '20 at 10:42
  • Not autoplay, I need play video from last frame to first frame. – cityvoice Aug 03 '20 at 02:39
  • There's a duplicate question here - https://stackoverflow.com/questions/18053261/play-a-video-in-reverse-using-html5-video-element However, there is no straighforward or direct answer. – jaimish11 Aug 03 '20 at 05:36

1 Answers1

1

If you can do this on the server side in advance then ffmpeg has a reverse video filter which will allow you create a reversed copy of a video. See here for an example:

There are also custom tools which can do this, again generally server side.

If you must do it on the player then it is not going to be easy as most video encoding schemes will encode so that the encoding for a given frame is dependent on one or more frames before it, and also sometimes dependent on one or more frames after it also.

In other words to create the frame correctly you may need to refer to one or more previous and one or more subsequent frames.

To play it backwards it would still need to do this decoding so you would need a player that could isolate a set of frames or 'Group of Pictures' that was autonomous, i.e. not dependent on any other previous or subsequent frames, and then decode it in the right order to play the video backwards.

The player would also need to stream the file from the end rather than the start, if it is streaming it rather than downloading it, if it was to stream it efficiently.

A crude way to do it that may work for some formats would be to:

  • load the video and examine the frame rate and duration
  • seek to the end time
  • in a loop:
  • seek to the time approximately one frame back (by calculating from frame rate)
  • display the frame at this time
  • repeat until you reach the first frame

I suspect, however, this will be slow and give you a 'jerky' video playback.

Mick
  • 24,231
  • 1
  • 54
  • 120