CODEWITHSUNDEEP
phpvideo-streamingvideo-processing
RedGiant
RedGiant

Reputation: 21

Preview video from thumbnail

Recently stumbled upon a stock video footage site http://www.pond5.com/stock-video-footage/1/*.html , and saw that they had a preview of a video when the user hovered over a thumbnail. I want to recreate this, because it seems like useful practice and it will allow me to workout my web developing muscles.

I would like to be able to preview a video when a user hovers over a thumbnail. For example like pond5.com. Audio is not necessary, but I would like it to look smooth like a video rather than a video preview that contains a frame every 5 seconds.

On pond5.com, I originally thought they used a gif, but it plays very smoothly. Some also contain audio. As far as I thought, audio can't be used in .GIFs

Is this a case where I would have to just upload a 2nd video for the preview?

Thank you for any help.

Upvotes: 0

Views: 445

Answers (1)

John Davis
John Davis

Reputation: 746

Pond5, the website you specifically mentioned, creates a video thumbnail with watermark and lowered quality and stores it. It is then played back using JavaScript to dynamically load a div element that contains the flash player. So no GIFs are involved. You do need to upload a 2nd video, but the steps to this project are as follows:

  1. Server-side video thumbnail/watermarking: Not sure if there are any PHP packages that are up to the task on this one. I would write a more powerful program in C++ or C#. If you go with C#, quick and easy solution would be Microsoft Expression Encoder.

  2. Flash/Silverlight/HTML5 video player: To play the video.

  3. Client-side JavaScript: To load the fancy popup and the aforementioned video player. Note that you might need to use PHP and a database engine to load the thumbnail URL for the video requested.

This is what Pond5, and what many other stock-footage sites use, and the basic outline of what you would need to do to achieve similar results.

Upvotes: 1

Related Questions