|
Adding Video To Your Webpage |
| Easily
Creating A Professional Image by Str82u |
|
|
|
Welcome back to another addition of "How Did They
Do That And Will It Fry My Brain Figuring It Out?" This tutorial debunks
the myth that you have to have special, other-worldly knowledge to put a
video clip into a webpage and make yourself look like a web pro. I'm
going to use one of my demo sites (It's for sale if you want it) that
can be found by going to
http://ihaveyounow.com/malecs_cam.htm
. You'll see an aquarium full of fish, slower computers or internet
connections will have to be patient. This video is added as a mock-up to
simulate a live webcam in a pet store (I'll teach you about web cams
later). The point is that there are no controls to this and it runs
automatically when the visitor lands on the page. I'm going to give you
the code and also some advice to help with the slower fish that may swim
in your pond. |
|
|
First Tip: Whatever
the size the video is, create a image that has the text "Stand By -
Video Loading" or something like that. People with slower connections
may not realize a video is about to appear or others may get impatient
thinking there is a problem with the site ('cause you know they couldn't
possibly be at fault for having a dial-up connection). What you do with
the image is to make it the background of the cell that the video is to
be in. Always try to make the cell the size of the video and define the
size of the surrounding cells, if possible, to avoid shift or movement.
If your site is set for 100% to adjust to different screen resolutions,
at least define the size of the cell the video is in otherwise the
background image will tile, creating a mess, but once the video is
loaded, it covers the image, and seamlessly at that. |
|
|
The following is what's
called an "Active-X" control, sometimes websites will try to get you to
install one and a yellow warning appears on the top of your browser. You
generally won't have that problem here because it's using Windows Media
Player and almost everyone with a windows system already has this on
their PC. |
|
Now for the code, this is
it: |
|
<object id="mediaPlayer" width="320"
height="250" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
standby='Loading Microsoft Windows Media Player components...'
type='application/x-oleobject'<param name="fileName" ref value="http://ihaveyounow.com/aquarium.avi"><param
name="transparentatStart" value="-1"><param name="autoStart"
value="-1"><param name="showControls" value="1"><param name="ShowStatusBar"
value="0"><EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="False" showtracker='-1'
showdisplay='1' showstatusbar='1' width="258" height="320"
src="http://ihaveyounow.com/aquarium.avi" autostart="True" loop="True">
</EMBED><param name="AudioStream" value="-1"><param name="AutoSize"
value="0"><param name="AnimationAtStart" value="-1"><param name="AllowScan"
value="-1"><param name="AllowChangeDisplaySize" value="-1"><param name="AutoRewind"
value="0"><param name="Balance" value="0"><param name="BaseURL" value><param
name="BufferingTime" value="5"><param name="CaptioningID" value><param
name="ClickToPlay" value="-1"><param name="CursorType" value="0"><param
name="CurrentPosition" value="-1"><param name="CurrentMarker"
value="0"><param name="DefaultFrame" value><param name="DisplayBackColor"
value="0"><param name="DisplayForeColor" value="16777215"><param name="DisplayMode"
value="0"><param name="DisplaySize" value="4"><param name="Enabled"
value="-1"><param name="EnableContextMenu" value="-1"><param name="EnablePositionControls"
value="-1"><param name="EnableFullScreenControls" value="0"><param
name="EnableTracker" value="-1"><param name="InvokeURLs" value="-1"><param
name="Language" value="-1"><param name="Mute" value="0"><param name="PlayCount"
value="0"><param name="PreviewMode" value="0"><param name="Rate"
value="1"><param name="SAMILang" value><param name="SAMIStyle" value><param
name="SAMIFileName" value><param name="SelectionStart" value="-1"><param
name="SelectionEnd" value="-1"><param name="SendOpenStateChangeEvents"
value="-1"><param name="SendWarningEvents" value="-1"><param name="SendErrorEvents"
value="-1"><param name="SendKeyboardEvents" value="0"><param name="SendMouseClickEvents"
value="0"><param name="SendMouseMoveEvents" value="0"><param name="SendPlayStateChangeEvents"
value="-1"><param name="ShowCaptioning" value="0"><param name="ShowAudioControls"
value="-1"><param name="ShowDisplay" value="0"><param name="ShowGotoBar"
value="0"><param name="ShowPositionControls" value="-1"><param name="ShowTracker"
value="-1"><param name="VideoBorderWidth" value="0"><param name="VideoBorderColor"
value="0"><param name="VideoBorder3D" value="0"><param name="Volume"
value="-600"><param name="WindowlessVideo" value="0"></object> |
|
|
The best thing to do is
insert this code directly into your html, if you copy and paste onto the
page directly onto the page instead, depending on your program, the code
may or may not work right. I was able to copy and paste this
exact code fine with FrontPage, but that doesn't mean it will at your
house. |
|
|
You can see that some of
the parameters are funny looking and others are pretty self-explanatory,
once you have this code, play with it and see what happens. The code
here is an Autoplay/Looping video that never stops, you can change the
parameters for "Autostart" and "Loop", this code does have the
controls on it, so there is a way to let your visitor stop or pause it.
If you want to remove the play/pause controls, simply find the line
|
|
|
<param name="showControls" value="1"> |
|
|
and change the number from
1 to 0. Usually in these types of things, 1 is yes or "True" and 0 is no
or "False". Like I said before, this may seem a bit overwhelming, but
it is all pretty simple and can be played with to understand it
better...THERE IS NOTHING YOU CAN BREAK THAT WE CAN'T FIX! The rest of
the parameters are adjusted in much the same way, for us we can look at
it this way: The first part of the code is basically just the player
itself, the second part of the code is the video and how it should look. |
|
|
Second Tip: When
putting in your video, I always like to put the complete web address to
where it is, just because I worry, and if I copy this page or code and
put it somewhere else on the web, the code can still find the video on
the I Have You Now server. |
|
|
Well, that's all for now, as always, if
you have questions about this or anything related to web design, please
come to the forum. You may not see me right away, but post your question
and someone will help you or hunt me down.
Keep it Str8!
This and all
material contained within is copyrighted and may not be reproduced
without the express consent of the author and/or this site.
|
|
|
Home
