Some people asked if it was possible to stream DivX
or WMA audio from a website and the answer is yes! In fact, that
was why the format was created in the first place. But to do so
effectively we must stick with the original ASF format Micro$oft
have developed. There is no reason to use Real Media anymore who
make us pay for their software anyway. And it doesn't look any better
than Mpeg-4 either. I know this is pandering to the Microsoft mentality
of 'we give it free with Windows so we can squash the competition',
so switch to Linux then - you wanna stream it or not?!
The new streaming formats Microsoft are using are
called WMV (Windows Media Video) and WMA (Windows Media Audio).
There is practically no differnce between the old ASF and an WMV
other than the name (i.e. something.wmv
instead of something.asf) but
I think that is an important point to say because the name change
is confusing if you don't know.
Windows Media Encoder is a free utility that can be
downloaded from Microsoft. It only really likes to convert AVI and
Wave files, but if you have problems just follow any of my guides
to convert your video or audio clips into a format Media Encoder
can handle.
ADDING STREAMING AUDIO
Click the play buttons below and you will see what
you will learn to do:
The
Matrix Soundtrack - Rage against the Machine
The
Matrix - Clip
ENCODING THE AUDIO
This is the easiest part. Load Media Encoder and select the broadcast,
capture or convert option. Press OK.
Choose convert audio or video. Press Next.
Choose file will stream from web server. Press Next.
Choose the AVI or Wave file you wish to convert to mpeg audio or
video. Press Next.
Choose the bitrate. The best bitrate to choose is based on the
audiance that is going to view the streaming media. If you want
99% of the internet to see it correctly choose 56 kbps modem. If
you want only people with Cable modems, DSL or T1 etc., connections
to see it, you can go much higher quality and choose ISDN, LAN connection
or something like that. Press Next.
If you want information about the video to be displayed by media
player when prople view or download the clip you can enter it here.
Press Next.
The encoder gets to work, and before you can say: "Hey! That
encodes faster than Mp3" its done!
That was easy enough, huh! Now you have a WMA audio or WMV video
which is the same format as ASF's media format.
PUTTING IT INTO YOUR WEBPAGE
If you already have good web design skills it will be easy to add
these streams. To embed the video stream you must use Active X Scripting.
You can also use Javascript etc., to make nice buttons etc., but
this is the easiest way to do it and I'm not going to teach HTML
or scripting, to be honest I only understand them very very basically
myself!
The Bare Essentials
If your worried its gonna be hard to do, trust me, I'm gonna simplify
it for you. The truth is you can more or less just upload your video
or audio clip and 'cut & paste' the commands I will show you
into your webpage and you will be done! In fact just linking to
these *.WMV or *.WMA files, like you would any file, will make them
play when someone clicks on the link. But what we really want to
is to stick them inside the website so visitors can click on them
like a virtual VCR. This is what I will explan now.
All WMV or WMA files have and identification name to tell your
internet browser what they are. But instead of calling it 'Mr. Streamiee'
Microsoft decided to use the name:
clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95
As I'm sure you know all HTML should be put inside triangular brackets
(i.e: < >). So to tell your webpage you have a streaming media
clip to embed inside your page you say the following:
The blue part says to tell the web browser
to insert the video where ever you paste the text. The
green 'id="player" part merely tells it to use a video
control pannel. The red parts let you
to define how large the video will appear. This means even
if you made a clip that was 50 pixels by 50 pixels, if you said
the video screen should be 352 x 240 then that is what will be displayed.
This is a useful feature becasue you can often make a video look
more impressive by making a small resolution clip and then resizing
it a third larger on the screen. Try that!
Next come many 'parameters names' that can be added to control
the video display. These are just added in a long list underneeth
the video. For example, take a look at this rather more complex
one below!!
You'd need a whole bunch of articles to explain every feature so
I am not gonna go through them all. Instead I will explan what some
of the useful ones do and then you can play about with the rest
to see how they work. For more information just visit Microsofts
website.
The most important thing to know about these commands is that when
it asks for a value it usually will be 0 or 1. In other words its
asking Yes (1) or No (0). So if you use the parameter: "ShowCaptioning"
value="0" its asking the question "Show captioning?"
"Answer= no!" which tells it not to show any captioning.
Anyway lets continue:
<param name="AutoStart" value="0">
This command is vital because it decides if the video starts
playing automatically or not. If you have lots of clips on the
same page then you will need this option, otherwise everything
will play at the same time. Just set the value to zero and the
video will only play when the visitor clicks on it.
<param name="AutoRewind" value="0">
This tells the video to start from the begining
once its done. Its not a loop to replay the video it only resets
it.
<param name="ShowStatusBar"
value="0">
This makes the little black bar we see at the bottom
of media player, showing the play length, and so on.
<param name="ShowTracker" value="1">
This is the media player slider bar. With most
audio files you can move to parts of the song but this doesn't
work too well with video files. 0 means turn the slider
bar (tracker bar) off, and 1 turns the trackerbar on.
<param name="AutoSize" value="0">
If this value is set to 1 then the video will automatically
resize to the original size of the WMV file and not what you
define.
<param name="AnimationAtStart"
value="0">
If this is set to 1 it will show the media
player logo before the video plays. It doesn't look very proffesional
to me so I always turn the baby off by setting value 0.
<param name="TransparentAtStart"
value="0">
Normally media player will give a black background
before the video starts. If you set this to value 1 then
it will start with the same colour as the webpage.
<param name="ClickToPlay" value="1">
This gives the option for the user to click on
the video screen to start it playing. This is useful if you
don't want any play buttons stuck at the bottom of the video.
The visitor can just click on the video and it will play.
<param name="ShowAudioControls"
value="1">
Shows the volume control or not.
<param name="ShowDisplay" value="0">
Shows the author details i.e. made by blokie etc.
That all you need to know. If you come across a website with a
Windows Streaming Media file but does something you don't know how
to do just look at the HTML. To examine it in Internet Explorer
just go to: View > Source. Then
look for the embeded media file and see what parameters are set.
COMPATABILITY
Only Internet Explorer really supports Active scripting correctly
so the above won't always work on Mac or on Netscape browsers. But
the good news is there are some final tweeks we can add to our Streaming
Media that will allow at least some cross browser compatability.
This is the HTML that Microsoft recomend:
<!-- BEGIN GENERIC ALL BROWSER FRIENDLY
HTML FOR NETSHOW V3 -->
<OBJECT ID="MediaPlayer"
width=320 height=240 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
As you can see it is exactly the same as we did before except it
downloads stuff from Microsoft if it hasn't already got what it
needs installed. Now this is the final step then, just copy the
above for every file you want to stream and make the changes you
have already learned about as needed for your perfect streaming
video. Good Luck!
Okay, now you have the basics lets show you how to do some more
smart stuff, huh! I honestly couldn't find any websites that explained
how to do this kind of thing with ASF, so as usual this guide will
be one of the first you'll ever read. You'd think there would be
lots of guides too, because what I'm gonna show you is such as easy
thing to do! In my search I could find only the very bare bones
of some ASX stuff on the Microsoft website, and to be honest I doubt
anyone but the most persistent, would actually find it; searching
through the Microsoft Website is like searching through a maze!
Anyway, download Windows Media 7 Resourse Kit and install. You'll
probably find it a pain to download if your on a 56k modem because
its one of those direct install from the internet thingies. But
the only important utility we need in this pack is Windows Media
ASF indexer, you may find the other stuff useful too though. The
following guide applies both to ASF, WMV and WMA files.
CREATING CHAPTERS
Since its hard to move to an exact point in an ASF file by using
the slider bar the ASF indexer can be used to set as many chapters
as you like, just like DVD chapters.
Opening the File
Start the ASF Indexer and go to File >
Open... to browse for your file. If your video is called
something.WMV instead of something.ASF
just type in the browse box *.wmv and
press Enter. Then you should be able to see the WMA file and open
it.
As you can see from the above image we have opened our streaming
video. The Video has the usual play, stop, pause and volume buttons
as any player. Feel free to move about in the video and play it.
On the right you can enter any author details you like and these
will automatically be shown once you have saved your final ASF.
Next we have the Mark In and Mark
Out buttons. These are only used if you decided you needed
to cut your video into a smaller movie. These chopping controls
work pretty much in the same way as VirtualDub or TMPGEnc's; press
Mark In to say where the start of the
movie will be and then use the Mark Out
to say where the movie will end. Then just save the movie and you
will find it has been chopped down to the size you wanted.
Adding Chapters
The Edit Markers button has one job
only and that is to add chapters. Use the video player and slider
bar to move to the exact place you want your first chapter to start
and then press the Edit Markers button,
up will pop the following box:
Press the New button and put in the
name of the chapter you want (I used the name Chapter 1 but you
can put whatever you like). Notice also the Time box below, this
is the position you are in the movie at the moment, so you do not
need to change the time now unless you know the exact time you want
this chapter to start.
Thats it! Press OK and you have done your first chapter! Now just
move to the next part of the movie and add chapter 2, then chapter
3 and so on. A list of chapters will be recorded as seen in the
picture below (i.e. chapters 1-4). If you decided you wanted to
change any of the chapter times or names just click on the chapter
and choose Edit. If you don't want
a chapter just select it and press the Remove
button - you get the idea!
When you are happy with your chapters save the file as an ASF and
be amazed!
ADDING URL CHANGES
Lets assume you wanted to make a website that presented something
like a new product for your business. Maybe you would like to have
your business spokesman explain about it with a super-cool ASF movie?
So wouldn't it be great if as he changed from one subject to the
next a new webpage could load up with all the details and pictures
needed to illustrate the process?! The good new is that's exactly
what the Edit Script Commands button
does!
This works exactly the same way as adding chapters. Find the position
in the movie where the spokesman is telling them about a certain
thing and press the Edit Script Commands
button. Select New and the following
box appears:
Keep the Type option set to URL and
type the webpage you would like to load up at this part of the movie
in the Parameter box - Bingo! As soon
as your video reaches this point it will automatically load the
new webpage without stopping the spokesman from talking - result!
WRITING ASX FILES
What is an ASX file? Simply put, an ASX file is a normal text file
that tells Windows Media Player how you would like to play your
streaming video and audio files. You can tell Media Player to play
whole lists of movies by putting them in your ASX text document.
You can specify the author and copyright details of each movie (even
if they have been made differently on the original ASF movie). You
can even specify how to show banners and logos with it. If you are
a GUI freak then you can write ASX files using Windows MetaFile
Creator (which is part of the Windows
Media 7 Resource Kit), but its quite limited in options
and I find it easier to write the ASX documents myself with notepad
- so lets get writing!
Open windows NotePad or any text editor. Now the most basic basic
ASX file is written like the following (colours are mine of course
so you can see whats going on better):
<ASX Version = "3.0">
<entry>
<Ref href = "http://myserver/mypath/myfile.asf"/>
</entry>
</asx>
All ASX text documents start with <ASX Version = "3.0">
and end with </asx> that way Media Player knows
where to start and stop reading it, then we tell it what we want
in-between. Before every command we put <entry>
and after every command we put </entry>
to tell it that is the end of that command. So inbetween them I
put my first command:
<Ref href = "http://myserver/mypath/myfile.asf"/>
This command is the location of the asf file that I want to tell
Media Player to play. Once I've written the above in notepad I save
it as: "filename.asx" remember
to include the quotation marks ( " " ) when saving it
otherwise it will save it as filename.asx.txt
or filename.asx.doc and Media Player
will not know what it is. That's it! You've created your first ASX
file. To play it just link to it on your website instead
of your streaming media file. In the case of embeded video you'd
just replace the link in the <PARAM
name="whatever" value=""
section of your HTML.
Now you can write an asx file writting a more complex ones are
quite straight forward, we just add more commands to the list. So
now I will explain the most commonly used ones you will need to
get started. If you want to learn even more complex stuff check
out Microsoft's website or search the web for more information on
the subject of XML syntax.
Playlists
Making a playlist that tells Media Player to play lots of movie
clips in sequance is easy, you just list them in order like this:
<ASX Version = "3.0">
<entry>
<Ref href = "http://myserver/mypath/file1.asf"/>
</entry>
<entry>
<Ref href = "http://myserver/mypath/file2.asf"/>
</entry>
<entry>
<Ref href = "http://myserver/mypath/file3.asf"/>
</entry>
</asx>
Author Info
To say what author and copyright information goes with all
movies in your list we just put it at the top like this:
An additional command called abstract can be used to add notes
about each movie when they are played. For example you may wish
to say something like: "This streaming video was made to teach
how our new products work". So we put:
<ASX Version = "3.0">
<entry>
<title> Put your
title name here </title>
<author> put your
author details </author>
<abstract>
This streaming video was made to teach how our new products
work </abstract>
<Ref href = "http://myserver/mypath/file.asf"/>
</entry>
</asx>
Now whenever the mouse hovers over the part of your asf file that
has the author details displayed it will also pop up this extra
message! Cool huh!
Adding Banners
A seperate banner can be added just under each video in the list
as they play. To do this we merely put the location of each banner
alongside each movie in our list, like this:
|
