The video publishing workflow consists of the following parts:

• A Django model to store our video and associated information
• An upload form where the user can upload a video
• Converting the video into a format usable on the Web
• Extracting additional details
• Playing the video in the Web browser
• Making the player a bit friendlier
• Advanced features

Following this simple workflow, trogger.de allows users to write and submit a blog post. Once that’s submitted, the user can add one (!) video file to it. When later viewing the blog entry, the attached video is shown in the browser.

The Django model

The Django model for storing the video is rather straightforward. In addition to storing the Video (or, rather, a reference to the video file) in a FileField, I’ve added a reference to the blog submission with which the video is related (I use this to look up the video when browsing the blog). Here’s my model, VideoSubmission:

class VideoSubmission(models.Model):
    videoupload = models.FileField (upload_to='videoupload')
    relatedsubmission = models.ForeignKey(Submission, null=True)
    comment = models.CharField( maxlength=250, blank=True )
    flvfilename = models.CharField( maxlength=250, blank=True, null=True )

In addition to the video FileField itself, I’ve added a “flvfilename” field to store the name of the converted movie file (see below).

Uploading the video

Video uploading is done using a normal File upload form. In the view for the upload form, we need to add the FormFields for the file upload fields created by Django:

def v_addvideo(request, submissionid):
    manipulator=VideoSubmission.AddManipulator()
    form=FormWrapper(manipulator,{},{})
    params = {'userAccount':request.user,'form':form,}
    c = Context( request, params)
    t = loader.get_template('video/addvideo.html')
    sub = Submission.objects.get(pk=submissionid)
    params['submission'] = sub
    return HttpResponse( t.render( c ) )

Our addvideo.html is pretty much the simplest upload form imaginable:

<form action="/video/upload/" method="post" enctype="multipart/form-data">
<table>
  <input type="hidden" name="relatedsubmission_id" value="{{submission.id}}" />
    <tr valign="top">
      <td>Video hochladen:<br/>(Nur AVI und FLV werden akzeptiert)</td>
      <td>{{ form.videoupload}} {{ form.videoupload_file }}<br/>
      Kommentar: <input type="text" name="comment"   style="width:100%" maxlength="250">
      </td>
    </tr>
    <tr valign="top">
      <td> </td>
      <td><input type="submit" Value="Hochladen"/> </td>
    </tr>
</table>
</form>

I’ve added the related submission ID as a hidden field, so that this gets submitted back to the upload process and I can create a link between the video and the blog entry.

Converting the video for use in the site

The users are asked to upload AVI videos to the site, but we cannot play AVI videos directly in the browser (at least not in a browser-independent manner). A good way to publish videos for viewing in a browser is using FLV (Flash(tm) Video) format. This is what YouTube, Google Video and a whole host of other sites use. If it’s good enough for them, it’s good enough for me!

Converting to FLV

So, how to convert the AVI video the user uploaded to a usable FLV format? Luckily, the OSS package ffmpeg [2] provides this conversion functionality (plus a wide range of other video conversion features one of which we’ll come to later on). The good thing about ffmpeg is that it is controlled entirely from the command-line and can be run in headless environments — this is vital for using it on an application server. Most other FLV conversion tools were either for Windows or came with some form of Gnome or KDE gui which wouldn’t have worked on my hosted Linux box.

The basic command for converting a video into FLV format is (see [1] in resources):

ffmpeg -i [sourcefile.avi] -acodec mp3 -ar 22050 -ab 32 -f flv -s 320×240 [destfile.flv]


Adding FLV metadata

This command creates a simple FLV format file, containing the video and audio streams. In addition, FLV files need meta-information such as duration, frames, etc. FLV movie players use this information to calculate progress bar sliders and allow the user to fast-forward or reverse through the video. For reasons which I didn’t bother to research, ffmpeg does not add this information. But there is a package which can: flvtool2 (see [3]). Using this tool, we can add FLV meta-information with the following command:

flvtool2 -U [flvfile]


(Warning, Djangoists — flvtool2 is written in Ruby. Please check your religious language preferences at the door and pick them up as you leave. Thank you).

Adding a video thumbnail

Blog entries in trogger.de can include pictures uploaded by the users. One of these pictures is displayed as a small preview when showing the blog posting (e.g. in the blog overview, or in the list of the latest blog submissions). Wouldn’t it be nice if we could also add a thumbnail for a video submission, so that the blog’s reader can get a first idea of what to expect? I think it would. And, again, ffmpeg comes to the rescue.

ffmpeg can extract single frames from a video stream, storing them in still image format. The command for doing this is:


ffmpeg -y -i [videofile] -vframes 1 -ss 00:00:02 -an -vcodec png -f rawvideo -s 320×240 [thumbnailimage.png]


Putting it all together

With these individual steps, it’s EASY to put together a video conversion function which kicks in once a user has uploaded a video file. Since we have the information which video the user uploaded with the form, we convert this video into FLV format, add metadata and create a thumbnail image:

def convertvideo (video):
    if video is None:
        return "Kein Video im Upload gefunden"
    filename = video.videoupload
    print "Konvertiere Quelldatei: %s" + filename
    if filename is None:
        return "Video mit unbekanntem Dateinamen"
    sourcefile = "%s%s" % (settings.MEDIA_ROOT,filename)
    flvfilename = "%s.flv" % video.id
    thumbnailfilename = "%svideos/flv/%s.png" % (settings.MEDIA_ROOT, video.id)
    targetfile = "%svideos/flv/%s" % (settings.MEDIA_ROOT, flvfilename)
    ffmpeg = "ffmpeg -i %s -acodec mp3 -ar 22050 -ab 32 -f flv -s 320x240 %s" % (sourcefile,  targetfile)
    grabimage = "ffmpeg -y -i %s -vframes 1 -ss 00:00:02 -an -vcodec png -f rawvideo -s 320x240 %s " % (sourcefile, thumbnailfilename)
    flvtool = "flvtool2 -U %s" % targetfile
    print ("Source : %s" % sourcefile)
    print ("Target : %s" % targetfile)
    print ("FFMPEG: %s" % ffmpeg)
    print ("FLVTOOL: %s" % flvtool)
    try:
        ffmpegresult = commands.getoutput(ffmpeg)
        print "-------------------- FFMPEG ------------------"
        print ffmpegresult
        # Check if file exists and is > 0 Bytes
        try:
            s = os.stat(targetfile)
            print s
            fsize = s.st_size
            if (fsize == 0):
                print "File is 0 Bytes gross"
                os.remove(targetfile)
                return ffmpegresult
            print "Dateigroesse ist %i" % fsize
        except:
            print sys.exc_info()
            print "File %s scheint nicht zu existieren" % targetfile
            return ffmpegresult
        flvresult = commands.getoutput(flvtool)
        print "-------------------- FLVTOOL ------------------"
        print flvresult
        grab = commands.getoutput(grabimage)
        print "-------------------- GRAB IMAGE ------------------"
        print grab
    except:
        print sys.exc_info()
        return sys.exc_info[1]
    video.flvfilename = flvfilename
    video.save()
    return None

Things to note

I’m keeping the media diectory for the uploads and the media directory for the converted results separate. This way, I can later on easily clear the upload area if I decide I don’t need the source videos any more (after all, they eat up valuable hosting space), without having to bother about accidentally deleting the converted data. Yes, I’m sometimes stupid in breathtakingly dumb ways. Also I can exclude the source video files from the daily backup.

If something goes wrong with the conversion, I return the output message from the conversion tool and actually display this in the Web page, so the user can see if there was a problem. I’m not too sure this is a good idea, yet. ffmpeg puts pathnames into its output, so the error message is exposing potentially exploitable information about the directory setup of my server. You might want to consider replacing path names before dumping the output message.

The converted video file is created in a subdirectory of the media root and has the VideoSubmission model instance’s ID as a filename (35.flv). This will always be unique, so there’s no need to think about another unique naming scheme. The PNG image thumbnail also has the ID as a filename, but with a PNG extension (duh!).

Playing the video in the Web browser

Now that the video was uploaded and (hopefully) successfully converted, we need to provide a way of viewing it. For this, I use an FLV player component called FlowPlayer, avilable as a SourceForge project [4]. The FlowPlayer SWF is embedded into the page and parameters are provided based on information from the video. In the blog entry view, I look for a related video submission which I pass in the context as “video”. The view template populates the SWF parameters using information from the “video” instance:

{% if video %}
<div style="textalign:center; width:100%;">
<center>
<object  type="application/x-shockwave-flash"
width="320" height="263" id="FlowPlayer" data="/showvideo/FlowPlayer.swf">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="/showvideo/FlowPlayer.swf" />
	<param name="quality" value="high" />
	<param name="scale" value="noScale" />
	<param name="wmode" value="transparent" />
	<param name="flashvars" value="baseURL=/showvideo&videoFile=flv/{{video.flvfilename}}&autoPlay=false&bufferLength=5&loop=false&progressBarColor1=0xAAAAAA&progressBarColor2=0x555555&autoBuffering=false&splashImageFile=clicktoplay.jpg&hideControls=false" />
<p>Dein Browser scheint kein Flash-Plugin installiert zu haben</p>
</object>
<p>
<center>
<strong>{{video.comment}}</strong>
</center>
</p>
</center>
</div>
{% endif %}

Note the inconspicuous “splashImageFile=clicktoplay.jpg” hidden in the jumble of FLV parameters. FlowPlayer provides a very simple way of specifying a “splash screen” image which is displayed in place of the video until the user clicks on the Flash player to view the video. I’ve created a trogger-themed splash screen and use this for all embedded video submissions:

The end result

Thew end result is shown in the screenshot. A user-written blog entry, with an attached video which is played in the browser. Not bad for one day’s work, if I say so myself.

Conversion quality and size issues

Quality of the converted FLV videos is pretty good, even at lower resolutions. Of course, YMMV or you may have other expectations. Using the conversion commands shown above, a 2.6MB camera movie was converted into an FLV file of 590kB. Depending on your intended use of the video (full-screen presentation?), and depending on how much bandwidth you want to burn, you may want to fiddle with some quality and compression parameters in ffmpeg.

Housekeeping

It is definitely a good idea to make sure that the FLV files are not actually served by Django, but directly by Apache (or even by another http server altogether). To serve the video files directly from Apache, we can exclude the video location “showvideo” from processing by Django by adding a section to the httpd.conf:

Alias /showvideo/ "/path/to/my/media/root/video/"
<Location "/showvideo/">
    SetHandler none
</Location>

Also, we should consider limiting the size of uploads, since we don’t want to drown in uploaded video (and we don’t want to get out-of-memory errors from Django, which holds the entires file upload in memory at least temporarily). As has been pointed out by Malcolm Tredinnick in the django-users group, this can be achieved using the LimitRequestBody directive.

Open Issues

One issue that I haven’t been able to solve is adequate support for more video formats. Windows Media stuff provides so many proprietary formats, codecs, etc., that it’s hard even for a project such as ffmpeg to keep up. As a result, I’ve limited video upload to AVI files, and make it quite clear to the uploader that potentially the video he’s uploading cannot be used, due to format problems. AVI videos captured by my digital camera (such as the diving video in the screenshot) can be converted quite well. As soon as somebody recodes the video, converts it to WMV, there’s trouble (even more so if the video contains any Digital Restrictions Management). There are loads of forum entries in the Net discussing potential solutions. Since they all involved hacking additional (sometimes binary) codes into ffmpeg, I wasn’t adventurous enough to try them.

If anyone can point me at a reliable way of converting (unprotected) WMV files and other video formats into FLV format, I would be very grateful.

I discovered that MPlayer can also be used for such conversions and can also be run in a headless environment; since conversion with ffmpeg worked, I didn’t do any more experiments — maybe someone else can enlighten me as to wether MPlayer would actually be better or cope with more formats?

Also, I’m doing the video conversion in-line with the browser upload. This is OK for shorter videos, where I can make the user wait for a result. For larger video submissions it might be useful to decouple the video processing and do it in a separate thread, updating the blog entry when finished.

Resources

[1] ffmpeg

http://ffmpeg.mplayerhq.hu/

[3] flvtool2

http://rubyforge.org/projects/flvtool2/

[4] FlowPlayer

http://flowplayer.sourceforge.net/

Tags: Django; Python; FLV; video; trogger

P.S. You can check out a blog entry with video submission in my trogger blog at http://www.trogger.de/blog/8/60/mit-mantas-tauchen-vor-machchafushi/fullentry/.

From: http://blog.go4teams.com/?p=56

相关文章

• Apache flv streaming done right (0)
• Wordpress FLV Player插件使用注意事项【官方插件无法正常使用】 (0)
• AutoHotkey is a free, open-source utility for Windows (0)
• 如何免费搭建自己的vps服务器？ (0)
• 测试flv player插件–她来听我的演唱会 (1)

apxs -c -i ./mod_flvx.c 

LoadModule flvx_module modules/mod_flvx.so
AddHandler flv-stream .flv 

Testing:
# Using curl:

curl -I "http://mysite.com/video.flv?start=100000" 

..where 100000 is some byte position in your file. This should show you Content-Type: video/x-flv. Now increase the start= parameter and the Content-Length should be smaller accordingly.
# Using wget:

wget -O test.flv "http://mysite.com/video.flv?start=1048576" 

The generated test.flv should be of size originalSize – 1MB

From: http://flowplayer.org/forum/5/14679

相关文章

• Video Blogging using Django and Flash(tm) Video (FLV) (0)
• Wordpress FLV Player插件使用注意事项【官方插件无法正常使用】 (0)
• 测试flv player插件–她来听我的演唱会 (1)
• 3G上网，FireFox帮你省流量-不显示图片和Flash (0)
• Nginx 0.8.25就要发布啦 (1)

官方文档为：

   1. Expand this plugin's archive content to wp-content/plugins/
   2. Go to Administration > Plugins and activate this plugin.
   3. In your posts, use this syntax: [ flvplayer file|url[[width [height]]] eg: [ flvplayer <a rel="nofollow" href="http://acme.com/video.flv">http://acme.com/video.flv</a> [ flvplayer <a rel="nofollow" href="http://acme.com/video.flv">http://acme.com/video.flv</a> 640 480]

但是下载官方的zip包解压后，默认地址却是：plugins/flv-player目录，所以与官方文档不一致，需要将插件中的路径进行修改。
一共2处需要修改，flvplayer.php中的20行改成

<script type="text/javascript" src="{$prefix}/plugins/flv-player/swfobject.js"></script>

52行改成：

'{$prefix}/plugins/flv-player/flvplayer.swf',

如果你懒得去修改，也可以下载一个修改好的，下载地址：http://www.wenzk.com/soft/flv-player.2.0.tar.gz

还有一个需要注意的就是，上传后flv文件名不要有中文字符，否则这个插件是不work的，这个也折腾了我一阵子，测试的时候上传的带有中文名一个flv文件，结果很杯具，最终看代码搞定的。

function flvplayer_plugin($content)
{
 return preg_replace_callback('/\[flvplayer ([A-Za-z0-9\-_\/\?\&\#\%\.\=@:;]+)(?:[ ]*)([A-Za-z0-9\-_\/\?\&\#\%\.\=@:;]*)(?:[ ]*)([A-Za-z0-9\-_\/\?\&\#\%\.\=@:;]*)\]/', 'flvplayer_plugin_callback', $content);
}

相关文章

• 测试flv player插件–她来听我的演唱会 (1)
• Video Blogging using Django and Flash(tm) Video (FLV) (0)
• Apache flv streaming done right (0)
• Auto Highslide插件 (0)
• 更新了Wordpress for Blacberry客户端 (0)

于 是想到将firefox设置成不显示图片应该能节省不少流量。

1、不播放flash，需要插件支持：Flashblock

2、 不显示图片：工具(Tools)->选项(Options)->内容(Content)->自动加载图片(Load images automatically)，去掉这个选项就OK啦。

对于IE来说，可以在  工具 -> Internet选项 -> 高级 -> 多媒体，把图片去掉就OK啦。

相关文章

• GPRS流量用超了 (1)
• Video Blogging using Django and Flash(tm) Video (FLV) (0)
• The Road to Success (0)
• 从Alexa看google.com.hk的崛起 (0)
• Apache flv streaming done right (0)