Guide Center   Download videos and enjoy them offline!

How to Add a Play Button for Your Video on Web Page?
Would you like upload your video on web page with a play button you made?

This article introduces you how to make a play button for your video on web page.
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.

 

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

 

 

A small trailer from "Happy Birthday". Copyright GREYWORLDWIDE.
This video is used only as a sample.

 

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.

 

In this article, you will get to know: 
 
What are needed:
  • Sothink Video Encoder for Adobe Flash
  • HyperSnap6
  • Macromedia Flash 8
 
 
Step1: Convert your videos of different formats to FLV:
 
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”.
 
 
Choose skin and style for playback
 
 
The Conversion is in progress.
 
 
When the conversion is finished, you will get your flv, swf, and htm files.
 
 
For preparation, click swf and capture (with HyperSnap 6) the playback image at the starting point like this, and save as playbox.jpg. Here its dimension is 322*284.
 
 
Step2 How to make a play button for video
 
Open Macromedia Flash 8 and choose Flash document in Create New
 
Click Size button at the bottom of the program to change document dimension.
 
This will pop up. Please insert the dimension of playback.jpg
 
 
Click “File >Import >Import to Library…”, and select the image of playback you just captured.
 
 
Then playback.jpg will be in Library on the right. Drag it to Stage
 
 
 
Please change the values of X, Y to 0; it will coincide with the white background.
 
 
In Stage, right-click on the playbox, and select Convert to Symbol… 
 
 
 
Just select Graphic and click OK. Then it will be in library.  
 
 
 
Please select an element you want to change in color at the bottom of the program. Here we select Brightness.   
 
 
 
 
Now we insert a new layer.    
 
 
Here we are going to draw a round play button. We set color first. You can set whatever color you like 
 
 
Or change its transparency 
 
 
 
 
 
Then choose Oval Tool in Tools and draw an oval like this.
 
 
 
 
To make a triangle on this oval, please click PolyStar Tool, and change the number of sides.  
 
 
 
Reset Paint Bucket color and draw a triangle like this:
 
 
 
Now both select these two shapes with Shift and mouse, and right-click on them and Convert to Symbol…and choose Button.
 
Add Action Script like this: 
 
 
Here “happy birthday” is the name of your converted swf file, and myvideo is the name you insert before conversion.
 
 
Now let’s edit effect of this button. Double-click it and the timeline will be like this 
Here you need to specify 4 key frames.
Up defines the button appearance when you do nothing. And it’s what you drew just now by default.
Over defines the button you put mouse upon the button.
Down defines the button you click on it.
Hit defines the area where clicking is effective.
 
First, we define Over
 
 
We change button to:
OK, frame for over is done.
 
 
Then for Down:
 
 
 
 
 
For Hit
 
 
Select ONLY oval and set color:
 
 
 
 
 
This means only the clicking is effective when you click on the triangle.
 
Now a play button is created. You can try it yourself to create a play button you like
Now we can export it as a SWF file. File name: playbutton.
 
 
 
If you want to keep this as an editable file you can save it as a fla file.
 
 
 
 
 
Step3 How to put video on web page
 
First open converted file: happy birthday.htm in Dreamweaver, and you will see:
 

<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="322" height="284" align="middle">
       <param name="allowScriptAccess" value="sameDomain">
       <param name="movie" value="happy birthday.swf?myvideo=happy birthday.flv">
       <param name="quality" value="high">
       <param name="bgcolor" value="#ffffff">
       <param name="allowFullScreen" value="true">
       <embed src="happy birthday.swf?myvideo=happy birthday.flv"
quality="high" align="middle" bgcolor="#ffffff" width="322" height="284"
 allowFullScreen="true" allowScriptAccess="sameDomain"
 type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</body>

Just change “happy birthday” to “playbutton”.

 
Now you can upload flv, swf, and htm files to the folder where you put this web page on your server.
Now others can enjoy your video online!
Resource Share
If you would like to use this playbutton, you can also download it for free!
 
AND registered users can contact us to get full tutorial resources.
 
 
 
 
 

 

If you have any questions about this tutorial, please contact us. We will  reply as soon as possible.