Changes between Version 8 and Version 9 of add_video


Ignore:
Timestamp:
Feb 21, 2009, 3:18:48 PM (11 years ago)
Author:
Jamie McClelland
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • add_video

    v8 v9  
    1717Below are the conceptual steps to take when publishing video on the Internet.
    1818
    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 ==
    2530
    2631=== Linux ===
    2732
    28 Here's an example of using mencode on an m4v file:
     33Linux users, you can use [http://ffmpeg.mplayerhq.hu/download.html ffmpeg]; Linux, See [http://www.engagemedia.org/help/how-to-compress-video Engage Media tutorial] for details on the settings.
     34
     35Here's an example of using mencode on a raw m4v file to convert it to a smaller xvid encoded file that would be suitable for uploading to a web site that could automatically convert it into a playable format:
    2936{{{
    3037mencoder -oac mp3lame -lameopts abr:br=92 -ovc xvid -xvidencopts bitrate=150 video-file.m4v -o video-file.avi
     
    3340Given the complexity of mplayer/mencoder (it does a lot of things), I found ffmpeg to be much simpler to use.
    3441
    35 Here's an example of converting a file created by the [http://www.theflip.com/ flip video camcorder] into a playable flash file. The flip video camcorder uses a wide aspect ratio (1280 x 720) - with the -s 640x360 option I'm preserving the aspect ratio, but cutting it in half to make it smaller. In addition, the flip video camcorder by default has a high bit rate of 10,455 kb per second. I'm reducing the bit rate to 1,500 kbits (with -b 1500k) after experimenting with the best quality to size ratio.
     42Here's an example of converting a file created by the [http://www.theflip.com/ flip video camcorder] directly into a playable flash file. The flip video camcorder uses a wide aspect ratio (1280 x 720) - with the -s 640x360 option I'm preserving the aspect ratio, but cutting it in half to make it smaller. In addition, the flip video camcorder by default has a high bit rate of 10,455 kb per second. I'm reducing the bit rate to 1,500 kbits (with -b 1500k) after experimenting with the best quality to size ratio.
    3643
    3744{{{
     
    3946}}}
    4047
    41 I was not able to get ffmpeg to produce a patents-free theora ogg file, so instead I used [http://v2v.cc/~j/ffmpeg2theora/ ffmpeg2theora], which sadly has completely different arguments. The following produced a patent free video file:
     48I was not able to get ffmpeg to produce a patents-free theora ogg file, so instead I used [http://v2v.cc/~j/ffmpeg2theora/ ffmpeg2theora], which sadly has completely different arguments. The following produced an ogg video file directly from the original:
    4249
    4350{{{
     
    4754=== Macintosh ===
    4855
    49 Please contribute!
     56[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.
     57
     58Please contribute more!
    5059
    5160=== Windows ===
    5261
    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
     64Please contribute more!
     65
     66== Using flowplayer to play flash video ==
     67
     68After downloading and unzipping [http://flowplayer.org/ Flow Player], I put the following three files into a folder called flowplayer:
     69
     70{{{
     710 jamie@liberace:html$ ls flowplayer/
     72flowplayer-3.0.5.min.js  flowplayer-3.0.5.swf  flowplayer.controls-3.0.3.swf
     730 jamie@liberace:html$
     74}}}
     75
     76I put my flv file in a folder called flash:
     77
     78{{{
     790 jamie@liberace:html$ ls flash/
     80cityhall.1.flv
     810 jamie@liberace:html$
     82}}}
     83
     84And 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}}}