| 19 | | * Export in your video editing software's native format |
| 20 | | * Convert your file to a format that will make a file small enough to upload to your web site (for example, the xvid format). Linux users, you can use [http://ffmpeg.mplayerhq.hu/download.html ffmpeg]; Linux, Mac, or Windows users can download [http://www.mplayerhq.hu/design7/dload.html mplayer] and use the mencoder tool it provides. See [http://www.engagemedia.org/help/how-to-compress-video Engage Media tutorial] for details on the settings. |
| 21 | | * At this point, ideally your web site would be configured to accept xvid files and convert them on the fly to a flash format. However, you can also manually do that using Mplayer, which can convert your xvid file to an ogg file or an flv (flash) file or to another format suitable for displaying in a web browser. |
| 22 | | * Your web site should include a flash player ([http://flowplayer.org/ Flow Player] is a free software option). |
| 23 | | |
| 24 | | == Real working examples == |
| | 19 | * Export your video from your video editing software into a standard format: Everyone uses a different program to create or edit their videos, however, all video editing programs have the ability to export your finished product to a file. The format of the file is not important, provided it is a standard format. |
| | 20 | * Prepare your video. Typically, your exported video will be huge - too big to upload to the Internet. Your next step is to convert it into a file suitable for upload. There are two approaches: |
| | 21 | * Automatic - Ideally, your web site will be setup to accept video files and automatically convert them into a format that will play for users. If that's the case, your preparation step is to simply convert your native format file (which will likely be very large) into a smaller file that can reasonably be uploaded to your web site (for example, the xvid format). See below for details on how to convert a file from one format to another. Once you have made the conversion, you simply have to upload the file using your web site's existing upload methods. |
| | 22 | * Manual - If you want to know the details of how video conversion works (or you are the web administrator trying to figure out how to make it automatic), you may want to go through the manual steps to familiarize yourself with the process. Below is an overview of the different approaches you can take. There are several ways to play video on a web site: |
| | 23 | * Simply provide an anchor link to the raw video file. Depending on the format of the file, most browsers will try to stream it, however it will probably not be the best user experience. Many browsers will simply prompt the user to download the file. |
| | 24 | * Use the [http://www.w3schools.com/media/media_object.asp object] or [http://www.w3schools.com/tags/html5_embed.asp embed] tags. These tags allow you to place video of a variety of formats into your web page, however, provided only limited options for users to control the video. |
| | 25 | * Use a flash player written in javascript (like the free [http://flowplayer.org/ Flow Player]). This approach is the most common, but will only play videos saved in the flash (flv) format. |
| | 26 | * Use the video tag. Firefox/Iceweasel version 3.1 [http://www.0xdeadbeef.com/weblog/?p=492 will come with built-in support for the free ogg/theora video format]. That means you will only need to convert your file into an ogg/theora format and it will stream automatically with Firefox/iceweasel using the video tag like you now use the img tag. No need for a flash player and no need for a proprietary flash format. |
| | 27 | I would currently recommend: using a flash player ''and'' providing a link to the ogg file for users to download. |
| | 28 | |
| | 29 | == Real working examples of file conversion == |
| 53 | | Please contribute! |
| | 62 | [http://www.mplayerhq.hu/design7/dload.html mplayer] (which provides mencoder) is available for Linux, Mac, and Windows and can convert files from one format to another. |
| | 63 | |
| | 64 | Please contribute more! |
| | 65 | |
| | 66 | == Using flowplayer to play flash video == |
| | 67 | |
| | 68 | After downloading and unzipping [http://flowplayer.org/ Flow Player], I put the following three files into a folder called flowplayer: |
| | 69 | |
| | 70 | {{{ |
| | 71 | 0 jamie@liberace:html$ ls flowplayer/ |
| | 72 | flowplayer-3.0.5.min.js flowplayer-3.0.5.swf flowplayer.controls-3.0.3.swf |
| | 73 | 0 jamie@liberace:html$ |
| | 74 | }}} |
| | 75 | |
| | 76 | I put my flv file in a folder called flash: |
| | 77 | |
| | 78 | {{{ |
| | 79 | 0 jamie@liberace:html$ ls flash/ |
| | 80 | cityhall.1.flv |
| | 81 | 0 jamie@liberace:html$ |
| | 82 | }}} |
| | 83 | |
| | 84 | And then I created this html file: |
| | 85 | |
| | 86 | {{{ |
| | 87 | <html> |
| | 88 | <head> |
| | 89 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| | 90 | <script type="text/javascript" src="flowplayer/flowplayer-3.0.5.min.js"></script> |
| | 91 | <title>City Hall</title> |
| | 92 | </head> |
| | 93 | <body> |
| | 94 | <h1>City Hall</h1> |
| | 95 | <a href="flash/cityhall.1.flv" id="player"> </a> |
| | 96 | <script> |
| | 97 | flowplayer("player", "flowplayer/flowplayer-3.0.5.swf"); |
| | 98 | </script> |
| | 99 | </body> |
| | 100 | </html> |
| | 101 | }}} |
