| Video is best used on a website
when nothing else will do. For dynamic elements, consider
a simple animated GIF file or an ordinary Flash applet instead
of Flash FLV or other true video. Animated GIFs are supported
by nearly all graphics creation programs and will play in
virtually any browser.
But if you really want video on your site, there are several
ways to achieve this.
Video can be downloaded by a visitor or it can be streamed
so that it plays while it is downloading.
Streaming Web Video
The most common streaming formats are RealMedia, QuickTime,
and Windows Media.
- QuickTime (.qt .mov) - QuickTime is one
of the most popular video formats on the web, developed
by Apple. To play a QuickTime movie you need to download
the movie player.
- Real Video (.rm, .ram) - Download the
RealPlayer
- AVI (Audio Video Interleave, .avi) -
developed by Microsoft. To play an AVI you need to download
the
Windows Media player
- MPEG (Moving Picture Experts Group, .mpeg, .mp4)
- MPEG compresses the video, making it much smaller. It
differs from Real and AVI because it is an open standard,
making its source free to use by anyone. Most media players
and plug-ins will play MPEG video.
Linking To Video
The easiest way to add video to your site is to create a
link to it using standard html:
<a href="my_video_file.mov">
Text You Want </a>
The browser will download the file.
Embedding Video
Embedding video directly into your webpage gives you more
options. You can choose to load the video before, during or
after the page loads. You can also control how long the video
plays by determining how many loops it should have.
To embed video in a webpage use an HTML tag, similar to
images. Instead of the <img> tag, you use the <embed>
and <object> tag.
Remember that the <embed> tag needs users to have the
movie pinstalled. If they don't have the right plug-in, they
won't see the video. Instructions
to embed video files to webpage.
Using Flash FLV Video Format
The benefits of using Flash are:
- Interoperability - Flash works on MacOS
X, Windows, and Linux. Flash works in Internet Explorer,
Firefox, Safari, and Opera. Flash Player is found in more
browsers than any other player.
- User Control Interface - Flash provides
excellent control over the presentation of your video. Use
Adobe Flash to design your own player user interface, or
any of the free open source players.
- Availability - Flash is not a completely
open format, but there are many free or shareware tools
to create FLV videos.
- Flash Support - supports Sorenson Spark
and On2 VP6 full-motion video. These are equal in quality
to Windows Media, RealMedia, etc.
Options For Putting Flash On Your Site
Serving Flash video from your own web server takes some technical
skill and consumes a lot of your monthly bandwidth.
For a personal site, consider the free video hosting services
provided by YouTube, Google Video and StreamLoad. They take
care of all the video conversions for you, albeit with a little
self promotion thrown in.
For your own commercial site, the following example uses:
- Windows XP
- Windows Movie Maker
- Riva FLV Encoder - a free, user-friendly converter based
on open-source FFMPEG encoder, to convert the video.
- FlowPlayer Flash applet – to embed the FLV video
in our web pages.
Using other operating systems and software.
Linux - use FFMPEG directly. See the encoding
HOWTO on the FlowPlayer site for more information.
MacOS X – if competent at the Terminal
prompt, also go use FFMPEG after exporting to "DV quality"
from iMovie. Or use Adobe/Macromedia's Flash Studio 8 software.
Note: This solution does not use video
compression feature of Flash Video FLV (Flash) video uses
patented MP3 audio format. Currently, patent holders are tolerant
of free software that encodes MP3s, but that could change
any time. Ogg Theora is probably a better choice for the future,
but at present is a little tricky to use.
How to convert from Windows Movie Maker to Flash FLV Video
- Download Riva Free FLV Encoder Riva's web site > Install.
- Download Free FlowPlayer software. See the included documentation
for complete instructions. Be sure to download flowplayer-1.6.1.zip,
NOT flowplayer-1.6.1-src.zip.
- Create your video > Edit with video editing software,
I use Microsoft's free Windows Movie Maker.
- Save a working copy of your video in DV-AVI format. [Windows
Movie Maker defaults to save as WMV]. Click Finish Movie
> Save to My Computer > Name Movie > Movie Setting
> Other settings > Select DV-AVI (NTSC) or "DV-AVI
(PAL) > Next. Warning: DV-AVI is not
a highly compressed format - the temporary file will be
a big file.
- Open the Riva FLV Encoder software. Start > All Programs
> Riva > Riva FLV Encoder.
- Input > Browse > Locate your DV-AVI file.
- Output > Select destination directory (folder) >
Enter File Name ending in .flv. [ mymovie.flv ]. Use filenames
without spaces and I recommend only using lowercase as some
servers are sensitive to this.
- Video > Check movie size and bitrate. Higher bitrates
take longer to download and use more bandwidth, but the
quality of the video is higher.
- Audio > Check bitrate correct for your content. For
high quality music, select a higher bitrate (128 kilobits).
56 kilobits is an average setting.
- Set Channels to stereo or mono, based on your original
movie.
- Click Encode to convert your movie. The window will go
grey and take a while, so be patient, nothing is wrong.
Upon completion you will get a message "Encoding successful!"
in the Result area.
- Load to your web page by following the steps in the FlowPlayer
HOWTO
Note: the width attribute of the object element is set to
320 to accommodate a video 320 pixels wide. The height attribute
of the object element is set to 263, to accommodate a video
240 pixels wide. This is because the controls at the bottom
of the window take an extra 23 pixels. Be sure to set your
width and height to match your video, with an extra 23 pixels
of height.
<object type="application/x-shockwave-flash"
data="FlowPlayer.swf"
width="320" height="263" id="FlowPlayer">
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="FlowPlayer.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noScale"/>
<param name="wmode" value="transparent"/>
<param name="flashvars"
value="videoFile=mymovie.flv"/>
</object>
Adding AutoPlay
To start playing the video as it downloads instead of waiting
for the user to click, add the autoplay option to the flashvars
parameter:
<param name="flashvars"
value="videoFile=mymovie.flv&autoPlay=true"/>
Uploading To Your Webserver
- Upload FlowPlayer.swf ; mymovie.flv and your webpage
to the same folder on your website. Any problems, read the
FlowPlayer HOWTO.
- Delete your temporary DV-AVI file off your hard drive
to free up the space.
Riva Free FLV Encoder uses the same open source, command-line
FFMPEG software that Linux users might use to do the same
conversion manually.
File Size Issues
Video files are very large files. Many free hosting providers
find popular videos unacceptable and will prevent users from
maintaining them on their sites.
You can keep the size of your file and your bandwidth to
a minimum by:
- Keeping your videos short
- Keeping your video resolution (the width and height of
the actual video) small
- Not using autoplay – make users click on a link
to play.
- Using well-compressed formats like FLV, RealVideo, QuickTime,
and Windows Media. Never upload a "raw" DV-AVI
file straight from your mini-DV camcorder.
- You can also consider distributing your videos using
a peer-to-peer network such as BitTorrent.
If you do, make sure your users have a standalone FLV player
so that they can play an FLV that's not part of a web page.
The Riva Free FLV Encoder includes such a player. BitTorrent
is not a tidy, seamless way of embedding a video in a webpage,
but it’s a good option for very long, very large,
high quality video files.
|
