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.

 

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

 

Info  PR: n/a  I: 2,830  L: 0  LD: error  I: n/a Rank: 24189  Age: n/a  I: 0  whois source Robo: yes Sitemap: yes  Rank: 17885  Price: 93768 Density
 

Copyright: Paramount, 21st Century Fox, Dreamworks, J+J, Warner Bros

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

 

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.

 Back to Top >>

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:
 

<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="482" height="344" align="middle">
       <param name="allowScriptAccess" value="sameDomain">
       <param name="movie" value="playlist.swf?myvideo=forbiddenkingdom.flv">
       <param name="quality" value="high">
       <param name="bgcolor" value="#ffffff">
       <param name="allowFullScreen" value="true">
       <embed src="playlist.swf?myvideo=forbiddenkingdom.flv" quality="high" align="middle" bgcolor="#ffffff" width="482" height="344" allowFullScreen="true" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</body>

 

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

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

<item url="forbiddenkingdom.flv" thumb="forbiddenkingdom.jpg" title="The Forbidden Kingdom" duration="00:01:00"/>
 
<item url="10000bc.flv" thumb="10000bc.jpg" title="10000 BC" duration="00:00:32"/>
 
<item url="panda.flv" thumb="panda.jpg" title="Panda" duration="00:01:56"/>
 
<item url="darkknight.flv" thumb="darkknight.jpg" title="The Dark Knight.flv" duration="00:00:37"/>
 
<item url="spiderwick.flv" thumb="spiderwick.jpg" title="The Spiderwick .flv" duration="00:00:37"/>
 
<item url="horton.flv" thumb="horton.jpg" title="Horton Hears a Who" duration="00:00:30"/>

“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!

 Back to top >>

 

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.