0

I would like to know how to save HTML5 video canvas as an image using jQuery, JavaScript or PHP

Video canvas code.

<video width="320" height="240" controls>
  <source src="343291949.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

I want to save the preview image of above video to images folder.

Can someone tell me a way to do this? Appreciate your time.

Jordyn
  • 1,133
  • 2
  • 13
  • 28
  • https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage – Kaiido Mar 14 '17 at 05:46
  • 1
    Possible duplicate of [How to take a snapshot of HTML5-JavaScript-based video player?](http://stackoverflow.com/questions/13760805/how-to-take-a-snapshot-of-html5-javascript-based-video-player) – Kaiido Mar 14 '17 at 06:02

1 Answers1

0

I think you're looking for : FFMPEG

Also, let have a look at this thread which is dealing with video thumbnails creation in PhP.

Adrien QUINT
  • 589
  • 4
  • 18
  • As far as i know you dont need FFMPEG for HTML5 MP4 videos. – Jordyn Mar 14 '17 at 06:34
  • What does a simple mp4 has different from a HTML5 mp4 video ? – Adrien QUINT Mar 14 '17 at 06:41
  • Its the same. What i meant is HTML5 will display a poster without FFMPEG when you use the mp4 in a video tag. Simply need to capture the video canvas and save it as an image. I have seen lot of people do it but cant find on how dose it work. – Jordyn Mar 14 '17 at 06:50