Movies - Chopping Up and Adding to a Page

As you may have read at the end of last week, I've been experimenting with web movies. Many sponsors today offer free movies that can be downloaded and used. You may also be in a position with either a Paysite or AVS site where you are looking to add movies in somehow. There are three common things you'll want to do:

1) Chop movies up eg. pick 10 seconds out of a 60 seconds clip.

2) Save those files and alter their compression (as you do with JPEG images).

3) Let your surfers see them either on a webpage, or by linking to them (more on that later...)

There are a number of uses for knowing how to use movies on your pages. They include:

Posting to a movie post site.
Making a FPA which has a movie running in it.
(Check out the articles at Webmaster Round Table on this!)
As a softcore teaser on a tour / part of your site.
In a Paysite member's area / AVS site area.

One way to add movies to your pages is this is to use the WMV video format.

What is wmv?

W.M.V stands for Windows Media Video. It's a file format for videos - not unlike MPEGs, AVIs, and quite similar to ASF movies. The strength of this video format is that it is ideal for the web - loading quickly - and the file sizes can be small compared to AVI or MPEGs. Just as you might save an image as a JPEG or a GIF, you can save a movie as a .wmv file.

There's a more in-depth explanation of WMV files here:

WMV Explained

Free software

The first task is pretty easy. Download and install the Zwei-Stein Video Editor from this URL:

Thugs @ Bay

It's a surprisingly good (and free) video editor. I'm just learning about it myself so I can't offer much other than this simple tutorial at the moment. But download it and install it - it will come in handy.

Making a wmv

You're going to need a movie to play with. You'll need an .avi movie or an .mpg / .mpeg movie. You could download one from one of your sponsors free content areas, OR right click and choose save as on this file:

AVI File:
Movie - right click and Save As
Size: 630kb

1) Start up the Zwei-Stein software.

The software is divided up into 4 quarters which will make more sense once we've opened up a file here.

2) On the very top of the screen, choose File and then go down to Import. You don't choose Open at this stage - you have to pick Import.

3) Pick Import Video Clip and then find the file on your hard disk. This is a regular sort of open file window that you'll have used a lot of times before.

Once that file is opened - the 4 software panels will come to life. You'll now have a lot more going on in those 4 areas of the screen.

4) Look all the way down at the bottom of the screen - as far as you can go. You should see a horizontal scroll bar with a number 0.000 in the center. Move the mouse pointer over the block on the scroll bar, left click and hold, and drag the bar from the left of the screen to the middle.

This is the movie play head. As you move this block backwards and forwards, you're moving through the movie. When you release it, you'll see the frame in the upper right corner of the screen change to show the point in the movie you're at. It's no different to fast forwarding or rewinding a video tape.

The clip we're working on (if you're using the one I uploaded for this tutorial) isn't a great example of a file that needs chopping down. It's only around 10 seconds in length. A lot of the time you'll have a movie which is MUCH bigger - and that's when it is handy to know how to chop it up.

5) Drag the play head into the center. This will be the point that we 'split' the movie clip.

6) Now look to the bottom LEFT of the 4 panel display. There'll be two horizontal strips, showing the movie at the point that you've moved the play head to. Right click on the bottom one, and you should now have another pop-up menu to contend with.

7) Choose Clip and then Spit at Current Time.

The video has now been chopped up into two parts. You could repeat the process and divide one of those halves into two once more. But let's assume that you've got the 'chunk' that you've decided to keep and publish on the web.

8) Left click on the half that YOU DO NOT WANT TO KEEP. It should turn a muddy red color.

9) Right click and choose Clip again, and then Delete.

You should now have that part of the clip only. The other one will disappear and the overall movie will be half the time in length that it was in the beginning.

Saving the edited movie as a WMV

Now the clip has been edited and is at the desired time in length, it's time to save it. Again, this is not done in the way you'd expect (via the file menu). Instead...

1) Go to the Destination menu.

2) Choose Export.

3) Choose the final option - wmv

4) Give it a filename and press OK.

5) Now we're on the interesting part of this section: choosing the target modem speed.

This is where it will pay off to do some experimenting. The beauty of this software is that your original file is NOT affected when you use the export menu. So you could say save it with the 28kb setting, preview the movie, decide that it wasn't quite right, and then choose to go back and export it under a different setting.

The thing to remember here is that a slower modem speed (28k for example) will publish the movie for that modem - and although the video will be smaller in file size, it will be much lower quality than if you were to export and pick something like ISDN. Play with it. Export a clip and then take a look at it's file size, and how it looks. It's really no different from the process used to save and compress your common household JPEG.

Adding the movie to a page

So you've chopped up the movie and you've saved it in a format that looks good without taking up too much file space. Next it's time to embed this movie on a webpage. I'll talk about linking to the file in a second, but embedding is probably the most important method to learn about. Adding a WMV video to a page is a little more complex than adding a JPEG to your page, but it's really not that difficult.

There's a very good page here on how to embed this file onto your webpage:

How to Embed Windows Media Files

But a fast guide is to add this code do your page:

<OBJECT ID="MediaPlayer" WIDTH="320" HEIGHT="240" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="01.wmv">
<PARAM NAME="Loop" VALUE="True">
<PARAM NAME="autostart" VALUE="1">
<PARAM NAME="showcontrols" VALUE="0">
<EMBED TYPE="application/x-mplayer2"
SRC="01.wmv"
WIDTH="320"
HEIGHT="240"
AUTOSTART="1"
LOOP="true"
SHOWCONTROLS="0">
</EMBED>
</OBJECT>

Where you want the movie to appear.

You'll notice that the settings (width and height etc...) seem to be in there TWICE. This is to cater for both Netscape and Internet Explorer, who need a slightly different code each. I tested it in IE and Netscape 4.7 and the code worked fine in those. The link above explains how to alter the different settings. The most important one is to alter 01.wmv to your own file name.

To show controls, set showcontrols to 1. You'll also need to increase the HEIGHT attribute by 44 pixels so that there's room to show them.

One setting that wasn't in the link I mentioned was LOOP. Look how I have used it in the code example above. It's good to set this to true as it makes a short movie seem longer.

Here's an example page I made testing out 4 of the different movie export settings:

Examples

Perhaps the most interesting one is the final setting on this page:

Video for single channel ISDN (64Kbps)

... where the final movie size is around 40kb. That's about the size of your average porn Jpeg!

Linking directly to the wmv

This won't take long because there's really not much to it. You simply link to the .wmv file as you would any other link:

Movie 1

Here's an example of that in action:

Linking example

You should find that the link opens up the movie player on your PC and then the movie plays. This is best reserved for Paysites as none of your ads are shown around the movie in the movie player.

Hope this helps and let me see what you come up with.

TOM ^"^

ICQ 12616560
Email tom@tomsnewbiebooster.com

Enter TOM'S NEWBIE BOOSTER

">

---