Video Uploading Process and Amazon S3

Question

My question is in regards to how I should go about doing this. My site allows users to upload videos (1min - 5min in length). At the moment, the user chooses the video file, I then begin uploading it to an iframe. The user then fills out some information about the video. After completing the form, I was hoping to allow the user to do something else while I then upload that video server side.

Right now, that system works, but after they complete the form and hit 'submit' the browser begins the upload and no actions can be taken by the user until it's done being uploaded. This is my first website working with files like this so any suggestions are very welcome.

Answer 1

Uploading is tricky because the standard HttpRequest isn't able to show a percentage of the upload in most browser without some server-side polling via ajax, and if it's a big file, the user can be waiting for ages without even seeing if the upload has been successful.

There are few solutions to this. (1) a lot of people use a Flash ojbect to do this, and there are many examples:

http://www.plupload.com/example_queuewidget.php

http://blueimp.github.com/jQuery-File-Upload/

.. there are loads just google til u find one you like

(2) if you dont want to use a little swf for this then you have to post the file using ajax and keep checking the the server (with ajax) to respond with the current filesize, which is way more involved.

If you want your user to be able to keep using the site and other pages instead of waiting on the same page, why not use a popup to show the actual upload console? or even a frame(nastier).

Cheers A

Answer 2

Video processing in the context of web applications is notoriously difficult to get right (at least without spending a lot of precious time best used elsewhere) - given my experience you'll likely encounter more issues and/or advanced needs down the road accordingly, e.g. thumbnail generation, format conversion, etc.

Therefore I'm going to take "any suggestions are very welcome" literally here and highly recommend to check out Transloadit - their offering includes your desired functionality, plus lots more (optional of course):

• Flexible, fast and scalable file uploading and encoding with our API:
  
  • Encode video & audio into any format
  • Resize, watermark and convert images
  • Store files in S3, Cloudfiles or SFTP
  • Put an upload progress bar on your site
  • Outsource file handling and concentrate on your app!

There are demos for most features (which highlights many image/video processing use cases on the side), e.g. showing how to Store the originally uploaded files in your S3 bucket or how to combine features Encode a video, extract 8 thumbnails and store everything in your S3 bucket.

Please make sure to read Notifications vs Redirect Url, which explains your options regarding the use case at hand, specifically you'll likely want to use Notifications to avoid blocking the user:

If you use the jQuery plugin and set its wait parameter to false, you will have to use Notifications, otherwise there is no way to get the file results from Transloadit.

While being a commercial offering, they have really nailed the use case and remove most of the burden regarding video processing within web applications; their offering is build upon Amazon Web Services (AWS) and the pricing is very reasonable and affordable accordingly.

Good luck!