You are here: Home | Guide Center | How to Make a Play List for Streaming Video?

Guide Center Download videos and enjoy them offline!

How to Make a Play List for Streaming Video?

This article introduces you how to make a play list at the end of a streaming video on web page.
First, convert various video into FLV. (FLV is the most popular format of online video). Then make a play list you like. At last, we put them onto web page.

Note: To watch it, you'd better update your Adobe Flash player to Version 9

Who may need this article:

Video lovers always have numbers of videos in various formats, why don’t share them on 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:

How to convert various videos into FLV

How to convert video to FLV
How to make a video list
How to put video on your web page

What are needed:

Sothink Video Encoder for Adobe Flash
HyperSnap 6
Dreamweaver 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”, “Generate thumbnail”, and “Auto play”. Also select “Get the FLV path from a URL variable and play progressively” and specify a name, “myvideo”, for example.

This is for creating thumbnails of listed videos at the end.Click “Options” button on the right side of “Generate thumbnail”, and you’ll see this pop up. Set “Dimension” for images. Select “Remember my settings”. And you can choose to set first frame or a certain frame as a thumbnail. Then click “OK” and “Next”.

Choose skin and style for playback

The Conversion is in progress.

When the conversion is finished, you will get your flv, swf, htm and jpg files.

For preparation, click .htm file and capture (with HyperSnap 6) the playback image at like this, and check its dimension is 482*344.

Step2 How to make a play list for video

Open Macromedia Flash 8 and choose Flash document in Create New, and save as playlist.fla.

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

This will pop up. Please insert the dimension: 482*344.

Use Rectangle Tool to draw first item of a play list:

Set color

Set corner radius

Draw a rectangle:

Choose this tool to rotate the direction of color change.

Click it, and add texts.

Set texts as Dynamic Text

And input “name” and ”duration” in Var respectively

Now select the rectangle and two text boxes, and right-click on them. Choose “Convert to Symbol”, and choose Movie clip. Then it appears in Library as Symbol 1.

Double-click it, and use Oval Tool to draw a small circle like this and convert to movie clip

And name it “thumb”

Right-click on it and choose Convert to Symbol, and choose movie clip. Then it is in Library as symbol 2. Then drag Symbol 1 it to the stage twice.

Respectively select these three items and give names: listitem0, listitem1, listitem2

And write Actions respectively as below.

The “0” in the script should be “listitem” number.

Now select these three items, and convert to Movie clip as Symbol 3. And name it “playlist”.

Double-click it, and draw a triangle at the bottom for turning pages. Right-click the triangle and convert it to Button as Symbol 4. Drag it from Library onto Stage.

Select the triangle on the right and select Window > Transform.

Rotate it and you will get:

Then add action script for these two buttons:

For the left one, just change”-1” to “1” for the right one:

Now add a text, and set it property like this

Select Playllist and click in Timeline to add action script:

var xml:XML = new XML();

var mlist:Array;

var curpage=undefined;

var itemsperpage=3;

function loadPlayList(url:String)

{xml.onLoad = onPlayListLoaded;

xml.load(url);}

function onPlayListLoaded(success:Boolean)

{if(!success) return;

if(xml.hasChildNodes())

{mlist = new Array();

for(var xitem:XMLNode = xml.firstChild; xitem != null; xitem = xitem.nextSibling)

{if(xitem.nodeName == "item")

{var mitem = new Object();

mitem.url=xitem.attributes.url;

mitem.thumb=xitem.attributes.thumb;

mitem.title=xitem.attributes.title;

mitem.duration=xitem.attributes.duration;

mlist.push(mitem);}}

ShowPage(0);}}

function LoadFLV(id:Number)

{var url=mlist[curpage*itemsperpage+id].url;

_root.LoadFLV(url);}

function ShowPage(step:Number)

{if(curpage==undefined)

curpage=step;

else

{var dstpage=curpage+step;

if(dstpage<0) dstpage=0;

if(dstpage*itemsperpage+itemsperpage-1>mlist.length) dstpage=Math.floor((mlist.length-1)/itemsperpage);

if(curpage==dstpage) return;

curpage=dstpage;}

pagestr=String(curpage+1)+"/"+ Math.floor((mlist.length+itemsperpage-1)/itemsperpage);

for(i=0;i<itemsperpage;i++)

{var ListItem=eval("listitem"+i);

var id=curpage*itemsperpage+i;

if(id<mlist.length)

{listitem.name=mlist[id].title;

listitem.duration=mlist[id].duration;

listitem.thumb.loadMovie(mlist[id].thumb);}

listitem._visible=id<mlist.length;}}

loadPlayList("playlist.xml");

for(i=0;i<itemsperpage;i++)

{var ListItem=eval("listitem"+i);

ListItem._visible=false;}

Then Click Scene1, use Rectangle Tool to draw a shape and convert it to Movie clip as Symbol 5. And name it “Loader”.

Input 0 in X and Y

Click in Timeline and add action script:

function LoadFLV(url:String)

{

Loader.loadMovie("forbiddenkingdom.swf?myvideo=" + url);

Loader._visible=true;

onEnterFrame = function()

{

if(_root.Loader.g_isEnd)

{

onEnterFrame=undefined;

_root.Loader.unloadMovie();

_root.Loader._visible = false;

playlist._visible=true;

}

Loader._visible=false;

if(myvideo!=undefined)

{

LoadFLV(myvideo);

playlist._visible=false;}

Step3 Put video on web page

First open converted file: forbiddenkingdom.htm in Dreamweaver, and you will see:

</object>

</body>

Change swf name to “playlist .swf”, and delete codes in green.

And we also need to create an xml file like this:

“url” is the name of flv name, “thumb” is the name of video thumbnail, “title” is content of the flv file, and “duration” is the length of the flv file.

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.

Tag: video streaming FLV streaming convert video to FLV Flash video