Upload videos from your service

Comparing version 4 and version 3 back

This Howto will explain how you can directly upload a video to HW and convert it from your website.

First, you need to enable the external upload capability from your account page (developer tab). Activating this option will give you an upload key to put in your upload form.

h2. Upload form

You have two ways to upload a video: normal upload or ajax upload with progression.


h3.h2. Normal upload

In a page (upload.html for example), put this HTML form:


  
  
  
  
  
  

  



That's it!


h3. Ajax upload

To**DISABLED**

For dothose who already integrated the ajax upload, it'syou morewill complicated. Youalways have to make a proxy request server side to have success because ajax request cannot reach external websites.

In PHP (ajaxproxy.php):





The upload form:



    

    
    
    
    
    
  






The UPLOAD_ID is a key generated by you. It is used to track the upload progress.

The CSS:


#progress-bar {
  width:300px;
  height:5px;
  font-size: 11px;
  margin-top: 5px;
  position:relative;
}
#progress-bar #status-bar {
  display:block;
  height:5px;
  width:0;
  background-color:#1A9BDC;
  position:absolute;
  top:0; left:0;
}
#progress-bar #status-text {
  display:block;
  padding: 0 15px;
  line-height:25px;
  position:absolute;
  top:0; left:0;
}
#results {
  font-size: 11px;
}
#results span {
  font-weight: bold;
  color: #1A9BDC;
}


The javascript:

You need to include the prototype library (http://www.prototypejs.org) librarysize=0 and add this piece of JS (from http://mongrel.rubyforge.org/docs/upload_progress.html):received=0.


/* don't forget to change your upload_key */
var UploadProgress = {
  uploading: null,
  monitor: function(upid) {
    if(!this.periodicExecuter) {
      this.periodicExecuter = new PeriodicalExecuter(function() {
        if(!UploadProgress.uploading) return;
        new Ajax.Request('/ajaxproxy.php?path=/upload/' + upid+'?key=YOUR_UPLOAD_KEY', {method:'get'});
      }, 3);
    }
    this.uploading = true;
    this.StatusBar.create();
  },
  /* change this function ifIf you want toprogress changebar, theyou progressioncan */
  update:use function(total,a current)flash {
    if(!this.uploading)uploader return;
    varlike status     ="SWFUpload":http://swfupload.mammon.se/ current / total;
    var statusHTML = status.toPercentage();
    $('results').innerHTML = "" + statusHTML + " - " + current.toHumanSize() + ' of ' + total.toHumanSize() + " uploaded.";
    this.StatusBar.update(status, statusHTML);
  },    
  finish: function(video_id) {
    this.uploading = false;
    this.StatusBar.finish();
    $('results').innerHTML = "finished";
    $('progress-bar').hide();
  },    
  error: function(msg) {
    this.uploading = false;
    this.StatusBar.finish();
    $('results').innerHTML = " Error with the file: "+msg+".";
    $('progress-bar').hide();
    setTimeout("window.location = '/transfer/new'", 3000);
  },    
  cancel: function(msg) {
    if(!this.uploading) return;
    this.uploading = false;
    if(this.StatusBar.statusText) this.StatusBar.statusText.innerHTML = msg || 'canceled';
  },    
  StatusBar: {
    statusBar: null,
    statusText: null,
    statusBarWidth: 500,    
    create: function() {
      this.statusBar  = this._createStatus('status-bar');
      this.statusBar.style.width = '0';
    },
    update: function(status, statusHTML) {
      this.statusBar.style.width = status*100 + '%';
    },
    finish: function() {
      this.statusBar.style.width = '100%';
    },      
    _createStatus: function(id) {
      el = $(id);
      if(!el) {
        el = document.createElement('span');
        el.setAttribute('id', id);
        $('progress-bar').appendChild(el);
      }
      return el;
    }
  },    
  FileField: {
    add: function() {
      new Insertion.Bottom('file-fields', '
 x
')
      $$('#file-fields p').last().visualEffect('blind_down', {duration:0.3});
    },      
    remove: function(anchor) {
      anchor.parentNode.visualEffect('drop_out', {duration:0.25});
    }
  }
}
Number.prototype.bytes     = function() { return this; };
Number.prototype.kilobytes = function() { return this *  1024; };
Number.prototype.megabytes = function() { return this * (1024).kilobytes(); };
Number.prototype.gigabytes = function() { return this * (1024).megabytes(); };
Number.prototype.terabytes = function() { return this * (1024).gigabytes(); };
Number.prototype.petabytes = function() { return this * (1024).terabytes(); };
Number.prototype.exabytes =  function() { return this * (1024).petabytes(); };
['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte', 'exabyte'].each(function(meth) {
  Number.prototype[meth] = Number.prototype[meth+'s'];
});
Number.prototype.toPrecision = function() {
  var precision = arguments[0] || 2;
  var s         = Math.round(this * Math.pow(10, precision)).toString();
  var pos       = s.length - precision;
  var last      = s.substr(pos, precision);
  return s.substr(0, pos) + (last.match("^0{" + precision + "}$") ? '' : '.' + last);
}
// (1/10).toPercentage()
// # => '10%'
Number.prototype.toPercentage = function() {
  return (this * 100).toPrecision() + '%';
}
Number.prototype.toHumanSize = function() {
  if(this < (1).kilobyte())  return this + " Bytes";
  if(this < (1).megabyte())  return (this / (1).kilobyte()).toPrecision()  + ' KB';
  if(this < (1).gigabytes()) return (this / (1).megabyte()).toPrecision()  + ' MB';
  if(this < (1).terabytes()) return (this / (1).gigabytes()).toPrecision() + ' GB';
  if(this < (1).petabytes()) return (this / (1).terabytes()).toPrecision() + ' TB';
  if(this < (1).exabytes())  return (this / (1).petabytes()).toPrecision() + ' PB';
                              return (this / (1).exabytes()).toPrecision()  + ' EB';
}
.


h3. Form parameters

In the sample codes, we can see some hidden fields:

  * key: your upload key (necessary to authenticate your account)
  * redirect_if_success: redirect your user after a successful upload (optional)
  * redirect_if_error: redirect your user after a failed upload. Will have the error code in parameter (optional)
  * your_site_user_id: this is a custom field, custom fields are unlimited. This is important if you want to track your users' videos or whatever.
  * post_id: another custom field



h2. Get notified

To get notified when an upload is finished, you must enable the ping after transfer in your account (developer tab). This address will receive all the info about the new uploaded video, and all the custom fields you've put in your upload form.

Here is an example:

{"upload_id"=>"UPLOAD_ID", "your_site_user_id"=>"20", "post_id"=> "1540", "video_id"=>"74885"}


If you've set the automatic encode and the ping_url_after_encode, the job will be automatically created and you'll receive all the custom fields in the ping address.

Example:

{
  "upload_id"=>"UPLOAD_ID",
  "your_site_user_id"=>"20",
  "post_id"=> "1540",
  "encoded_video_id"=>"74885",
  "filename"=>"HeyWatch_-_myvideo.flv",
  "link"=>"http://heywatch.com/encoded_video/74885.bin"
}



So, without any efforts, you'll be able to have your encoded video associated with your own objects (user_id, post_id).


If you don't set the automatic encode, you need to create the job manually after getting the ping after transfer (custom fields included).