Guide Center   Download videos and enjoy them offline!

How to Add a Thumbnail for Your Video on Web Page?
Would you like upload your video on web page with a thumbnail, which could be pretend to be as a play button?

 

Totally FREE Video Converter for All Multimedia
Support AVI, MP4, 3GP, MPEG, WMV, FLV, and even HD MOV, MKV, M2TS, MTS, etc

 

This article introduces you how to make a thumbnail as play button for your video on web page.

Click the thumbnail and play the video:

First, convert various video into FLV. (FLV is the most popular format of online video). Then make a play button you like. At last, we put them onto web page.

Who may need this article:

Video lovers always have numbers of videos in various formats, why don’t you share them on your web page with other people. If you don’t know how, this tutorial will be for you.

What are needed:

•    Sothink Video Encoder for Adobe Flash
•    Adobe Flash CS3

In this article, you will get to know:

•    How to convert various videos into FLV
•    How to make a thumbnail as a play button for video
•    How to put video on your web page
 
Step1: Convert your videos of different formats to FLV
 
Lanuch Sothink Video Encoder for Adobe Flash. Select the video you want to convert. Open Video Encoder for Adobe Flash, and select a video file. Many formats of videos are supported. You can also crop and trim the video. Then click “Next”.
 
Specify audio and video settings for output FLV, and click “next”.
 
Select “Generate FLV”, “Generate SWF”, “Generate HTML”, and “Auto play”. Also select “Get the FLV path from a URL variable and play progressively” and specify a name. Click “Next”.
 

You may also create thumbnail by yourself.
 
Choose skin and style for playback.
 

Click "Next" to start conversion. After a few minutes, you will get your FLV, SWF, HTML and JPG (Thumbnail) files.

Step 2. Make the thumbnail as a play button for your video
 
Open Adobe Flash CS3 and create a new Flash document of ActionScript 2.0.

Click Size button at the bottom of the program to change document dimension.

Click “File >Import >Import to Stage…”, and select the thumbnail you just created.
 
Please change the values of X, Y to 0; it will coincide with the white background.

 

In Stage, right-click the image, and select “Convert to Symbol…” from the menu appeared.

Just select “Movie clip” and click OK. Then it will be in library.  

 

Press F9 to invoke Action dialog for the selected symbol. Add Action Script like this:


Export it and name it as “loader.swf”.
 
Step3. How to put video on web page

Open the converted file: kungfu-panda.htm in Dreamweaver, and you will see the whole source code.   Just replace “kungfu-panda.swf” to “loader.swf”:

 
The last thing is uploading FLV, SWF, and Thumbnail JPG files to the folder where you put your video web page (here is kungfu-panda.htm) on your server.

Now others can play your video online by just clicking the thumbnail!