At this time, the best way to add video to a website is to use the Flash FLV video format. There are several reasons why Flash FLV is the right choice right now:
1. Flash Player is found in more browsers than any other player. Flash works on MacOS X, Windows, and Linux. Flash works in Internet Explorer, Firefox, Safari, and Opera.
2. Flash gives you excellent control over the presentation of your video; if you own Adobe's Flash product, you can design your own player user interface. There are also free and open source players you can use without buying Flash.
3. While Flash is unfortunately not a completely open format, much of the specification is available, and there are free tools to create FLV videos. 4. As of this writing, none of the widely supported alternatives are truly open in the legal sense - all of the popular video formats involve patented algorithms. Since all of the major formats have such problems, it makes sense to pick the most widely supported one, and that's Flash. Ogg Theora is a promising, truly free alternative, but it is currently too difficult for end users to install what they need to see it. And a video your users can't see is no video at all.
Now, the rest of this article will assume you want to do this yourself - because you don't want to promote another company on your website, because your video doesn't fit the guidelines and limits of the free services, or because you just don't want to look like an amateur.
So how do we create Flash video and put it on our website without spending hundreds of dollars? The following tutorial shows how to do it for free. This tutorial assumes you have Windows XP and are using Windows Movie Maker. We'll use the Riva FLV Encoder, a free, user-friendly converter based on the open-source FFMPEG encoder, to convert the video. And we'll use the open-source FlowPlayer Flash applet to actually embed the FLV video in our web pages.
Similar techniques can be used with other operating systems and software. Linux users will most likely use FFMPEG directly. See the encoding HOWTO on the FlowPlayer site for more information. MacOS X users, if they are brave at the Terminal prompt, can also go the ffmpeg route after exporting to "DV quality" from iMovie. Or they can spend the money for Adobe/Macromedia's Flash Studio 8 software.
2. Download the free FlowPlayer software. This is a simple Flash applet you'll embed in your page to actually display your FLV video on your website. See the included documentation for complete instructions.
4. Save a temporary working copy of your video in DV-AVI format. Windows Movie Maker prefers to save as WMV, but if you look carefully, it can also save DV-AVI. This is crucial because the Riva FLV Encoder software can't read the latest versions of WMV directly. To save your movie in DV-AVI format, click "Save to My Computer" under "Finish Movie," pick a name for your movie, pick "Other settings" on the "Movie Setting" page, select "DV-AVI (NTSC)" or "DV-AVI (PAL)" from the pull-down list, and click "Next" to complete the process.
7. In the "Output" area, pick the directory (folder) where you want to store your finished movie, and enter the name of your movie file, which should end in .flv. For instance, mymovie.flv is a reasonable choice.
8. Check the "Video" area: are you happy with the suggested movie size and bitrate? Higher bitrates take longer to download and can ring up bandwidth charges with your ISP... but the quality of the video is much better. Make choices that work for you.
9. Check the "Audio" area: is the bitrate appropriate for your content? If the original audio is high quality music, you might select a higher bitrate such as 128 (kilobits). However, most of the time, you'll be concerned about using too much bandwidth, so 56 is a more realistic setting. "Channels" will be set to stereo or mono, based on what your original movie contains. If it is set to mono, there's no point changing it - you can't really create stereo that was never there! If it is set to stereo, you have the option of reducing it to mono to save bandwidth.
10. Click "Encode" to convert your movie. Be patient. This can take a long time and Riva FLV Encoder does not display anything interesting during the conversion, the window just goes grey. This is not an error, just get a cup of coffee and wait! You should se "Encoding successful!" in the "Result" area when you are done.
11. You have an FLV video! But how do you put it on your web page correctly? Just follow the steps in the FlowPlayer HOWTO and you'll have your video up on your page in no time.
In a nutshell, the FlowPlayer SWF file - a Flash "applet" - is what you're embedding in your page. FlowPlayer then fetches and plays your FLV file. Don't try to embed the FLV file directly, that won't work!
Here's a simple example of how to successfully embed the video file mymovie.flv in a web page. Note that FlowPlayer can do quite a bit more than you see here, so read the FlowPlayer HOWTO.
For this to work as written, you MUST upload FlowPlayer.swf and mymovie.flv to the same folder the web page is in. The FlowPlayer.swf file is inside flowplayer-1.6.1.zip and you can extract it easily by double-clicking on the zip file and then dragging FlowPlayer.swf from the zip file's content listing to your desktop or another location. If you don't take time to understand this, your video will not work, so read it again.
Note: the width attribute of the object element is set to 320 to accommodate a video 320 pixels wide. No surprises there. However, 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.
Script:
12. Delete your temporary DV-AVI file! Your hard drive will fill up quickly if you keep these around.
If you want the video to start playing as it downloads instead of waiting for the user to click, you can add the autoplay option to the flashvars parameter, like this:
Script:
1. Flash Player is found in more browsers than any other player. Flash works on MacOS X, Windows, and Linux. Flash works in Internet Explorer, Firefox, Safari, and Opera.
2. Flash gives you excellent control over the presentation of your video; if you own Adobe's Flash product, you can design your own player user interface. There are also free and open source players you can use without buying Flash.
3. While Flash is unfortunately not a completely open format, much of the specification is available, and there are free tools to create FLV videos. 4. As of this writing, none of the widely supported alternatives are truly open in the legal sense - all of the popular video formats involve patented algorithms. Since all of the major formats have such problems, it makes sense to pick the most widely supported one, and that's Flash. Ogg Theora is a promising, truly free alternative, but it is currently too difficult for end users to install what they need to see it. And a video your users can't see is no video at all.
"I thought Flash wasn't real video!" Traditional Flash vector animations aren't. But Flash also offers Sorenson Spark and On2 VP6 full-motion video support, competitive in quality with Windows Media, RealMedia, etc. That's what I'm talking about in this article.
So how hard is it to put Flash video on your own website? Well, it takes some effort - and it also consumes bandwidth on your site. If you're looking for a quick fix for your personal "free" site, and you can't afford to pay for the bandwidth charges video can rack up, you should consider one of the free video hosting services. These services take care of all the tricky video conversions for you and host your video for you... but they do it in a way that promotes their company. If that doesn't bother you, check out YouTube, Google Video and StreamLoad. These are great services and I recommend them to beginners. Now, the rest of this article will assume you want to do this yourself - because you don't want to promote another company on your website, because your video doesn't fit the guidelines and limits of the free services, or because you just don't want to look like an amateur.
So how do we create Flash video and put it on our website without spending hundreds of dollars? The following tutorial shows how to do it for free. This tutorial assumes you have Windows XP and are using Windows Movie Maker. We'll use the Riva FLV Encoder, a free, user-friendly converter based on the open-source FFMPEG encoder, to convert the video. And we'll use the open-source FlowPlayer Flash applet to actually embed the FLV video in our web pages.
Similar techniques can be used with other operating systems and software. Linux users will most likely use FFMPEG directly. See the encoding HOWTO on the FlowPlayer site for more information. MacOS X users, if they are brave at the Terminal prompt, can also go the ffmpeg route after exporting to "DV quality" from iMovie. Or they can spend the money for Adobe/Macromedia's Flash Studio 8 software.
This free solution doesn't take advantage of every video compression feature of Flash Video... but many users out there haven't upgraded their Flash players anyway. Also, be aware that FLV (Flash) video uses the MP3 audio format internally - and MP3 is patented. Currently the patentholders are fairly tolerant of free software that encodes MP3s, but that could change. Fraunhofer has said in the past that they will not go after end users for using open source encoder software, but don't be too shocked if your favorite free FLV encoder program suddenly disappears or becomes available only as source code for programmers. This is one of the reasons why the truly free Ogg Theora will someday be a better choice - once it is easily available for all major browsers and operating systems.
How to convert from Windows Movie Maker to Flash FLV Video
1. Download the Riva Free FLV Encoder software from Riva's website and install it. Make sure you get the free encoder, there is other software on that page.2. Download the free FlowPlayer software. This is a simple Flash applet you'll embed in your page to actually display your FLV video on your website. See the included documentation for complete instructions.
Be sure to download flowplayer-1.6.1.zip, NOT flowplayer-1.6.1-src.zip. (The version number you see will probably be different and that's OK.)
The "src" download is the Flash programmer source code for FlowPlayer - not what most people want.
3. Create your video. You can use just about any video editing software, including Microsoft's free Windows Movie Maker. The "src" download is the Flash programmer source code for FlowPlayer - not what most people want.
4. Save a temporary working copy of your video in DV-AVI format. Windows Movie Maker prefers to save as WMV, but if you look carefully, it can also save DV-AVI. This is crucial because the Riva FLV Encoder software can't read the latest versions of WMV directly. To save your movie in DV-AVI format, click "Save to My Computer" under "Finish Movie," pick a name for your movie, pick "Other settings" on the "Movie Setting" page, select "DV-AVI (NTSC)" or "DV-AVI (PAL)" from the pull-down list, and click "Next" to complete the process.
Warning: DV-AVI is not a highly compressed format - the temporary file will be big. Make sure you have lots of free disk space.
5. Start the Riva FLV Encoder software: Start -> All Programs -> Riva -> Riva FLV Encoder
Riva FLV Encoder failed to start properly for me on two very different computers. However, it did work on a completely "stock" Windows XP SP2 box with the latest critical updates from Microsoft but no other optional software. If it "locks up" for you, try another computer. Riva tech support has been responsive and helpful but, so far, I still can't run it on my usual computers. Your mileage may vary.
6. In the "Input" area, click "Browse." Locate and select the temporary DV-AVI file you created in step 4. 7. In the "Output" area, pick the directory (folder) where you want to store your finished movie, and enter the name of your movie file, which should end in .flv. For instance, mymovie.flv is a reasonable choice.
8. Check the "Video" area: are you happy with the suggested movie size and bitrate? Higher bitrates take longer to download and can ring up bandwidth charges with your ISP... but the quality of the video is much better. Make choices that work for you.
9. Check the "Audio" area: is the bitrate appropriate for your content? If the original audio is high quality music, you might select a higher bitrate such as 128 (kilobits). However, most of the time, you'll be concerned about using too much bandwidth, so 56 is a more realistic setting. "Channels" will be set to stereo or mono, based on what your original movie contains. If it is set to mono, there's no point changing it - you can't really create stereo that was never there! If it is set to stereo, you have the option of reducing it to mono to save bandwidth.
10. Click "Encode" to convert your movie. Be patient. This can take a long time and Riva FLV Encoder does not display anything interesting during the conversion, the window just goes grey. This is not an error, just get a cup of coffee and wait! You should se "Encoding successful!" in the "Result" area when you are done.
11. You have an FLV video! But how do you put it on your web page correctly? Just follow the steps in the FlowPlayer HOWTO and you'll have your video up on your page in no time.
In a nutshell, the FlowPlayer SWF file - a Flash "applet" - is what you're embedding in your page. FlowPlayer then fetches and plays your FLV file. Don't try to embed the FLV file directly, that won't work!
Here's a simple example of how to successfully embed the video file mymovie.flv in a web page. Note that FlowPlayer can do quite a bit more than you see here, so read the FlowPlayer HOWTO.
For this to work as written, you MUST upload FlowPlayer.swf and mymovie.flv to the same folder the web page is in. The FlowPlayer.swf file is inside flowplayer-1.6.1.zip and you can extract it easily by double-clicking on the zip file and then dragging FlowPlayer.swf from the zip file's content listing to your desktop or another location. If you don't take time to understand this, your video will not work, so read it again.
Note: the width attribute of the object element is set to 320 to accommodate a video 320 pixels wide. No surprises there. However, 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.
Script:
<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>
<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>
12. Delete your temporary DV-AVI file! Your hard drive will fill up quickly if you keep these around.
If you want the video to start playing as it downloads instead of waiting for the user to click, you can add the autoplay option to the flashvars parameter, like this:
Script:
<param name="flashvars" value="videoFile=mymovie.flv&autoPlay=true"/>
See the FlowPlayer documentation for additional options.
"Under the hood," the 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 big. Very big. Enormous. I cannot overemphasize this. If you are paying for your web space and your video becomes popular, you will exceed your bandwidth allocation and be billed extra. If you are not paying for your web space, then your file will probably get removed from the site of your free hosting provider, or performance will be unacceptable for your users. You can help to prevent these problems by keeping your videos short, keeping your video resolution (the width and height of the actual video) small, and playing videos only when users actually ask you to do so by clicking on a link. And, of course, you should use well-compressed formats like FLV, RealVideo, QuickTime, and Windows Media. Never upload a "raw" DV-AVI file straight from your mini-DV camcorder. If you have control over your web server and a reasonable degree of system administration ability consider distributing your videos in a peer-to-peer fashion via BitTorrent. But 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. As you may have inferred from this, BitTorrent is not a seamless way of embedding a video in a page. It's best for very long, very large, high quality video files that are worth the effort.Alternatives To True Video
Video is best used when nothing else will do. If your goal is to add dynamic elements to your web page design, consider an ordinary Flash applet instead of Flash FLV or other true video. And, of course, there is always the option of creating a simple animated GIF file. Animated GIFs are supported by nearly all graphics creation programs and will play in virtually any browser, with the first frame appearing in rare environments that do not support animation.
No comments:
Post a Comment
Comment will be published after moderation only. Do not advertise here.