jQuery plugin for Ajax video upload on YouTube

I recently wrote a small plugin in jQuery and PHP. The functionality is simple: via Ajax, the description is set and the video is uploaded to YouTube, the plugin returns the download status, and if it was successful, the video id. The plugin can be used on any site, and is easily inserted into any CMS.

It all started with the fact that when developing a CMS for a local TV site, I was faced with the need to upload videos to YouTube. Since they will often add videos to the site, each time they log in to YouTube, upload a video there, receive a link to it, climb into the CMS and insert it there - it is very stressful. Moreover, it is desirable to do this through Ajax, so that you can easily plug in any project.


I did not find a ready solution for how to do this, but I came across two interesting materials:
')
http://habrahabr.ru/blogs/webdev/69006/
- Here is described in detail how to do the download through PHP. However, I also needed Ajax.

http://zlob.in/2010/youtube-api-javascript-upload/
- Here is the necessary function of downloading video via Ajax, but there is no server part. That is, we should already have received the token and download URL. The author himself writes that he uses the script in conjunction with FLEX.

By combining these two solutions, digging through the documentation, I added the ability to specify a video description, and, in principle, got what I needed. But, after all, there was a desire to slightly expand the functionality and arrange all this in the form of a ready-made plug-in, which ideally anyone can use.

Download the archive with the plugin and the demo here
and just in case the mirror .

How to use

First of all, you need to edit the setup.php file, in which you need to specify the project name, developer key, login and password to log in to YouTube.

You can get the developer key here .
On this page we indicate the name of your project and the URL of the site.
where the video will be downloaded from, after which we will be given a key, like this:
AI39si6Am9JZwKhJlrJGZUg0UU7URgTl9IGfSp2PZw2wAiWC33SfIGb2k3lhVRf-XLKnmhTiFnqDFv_9YgRgdK5qVWQQC_DlqQ

This completes the server side configuration.

Now we connect the plugin itself to our page. JQuery is required for its operation, preferably the latest version:

<script type= "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>


Connect the plugin:

<script type= 'text/javascript' src= 'yt_ajaxfileupload.js' ></script>


By clicking on the download button, run the plugin:

$( '#buttonUpload' ).click( function () {

$.uploadVideo( "/yt_upload/connect.php" , "fileToUpload" ,
{ title: $( "#v_title" ).val(),
description: $( "#v_description" ).val(),
category: $( "#v_category" ).val(),
keywords: $( "#v_keywords" ).val()},
function (){
$( "#loader" ).html( "Uploading..." );
},
function (data){
$( "#loader" ).html( "" );
alert(data.status);
alert(data.id);
});

});

* This source code was highlighted with Source Code Highlighter .

The $ .uploadVideo function takes 5 arguments:

1) The path to connect.php (lies in the folder with the plugin)
2) File Select Element Id
3) Video description: title, description, category, keywords
4) The function that will be executed at boot time (for example, you can show that the boot process is running)
5) Callback function of the end of the download, returns the status and id of the video

Create a form:

< form name ="form" id ="form-send" action ="" method ="POST" enctype ="multipart/form-data" >
< label for ="v_title" > : </ label >
< input type ="text" name ="v_title" id ="v_title" value ="" /> < br />< br />

< label for ="v_description" > : </ label >
< input type ="text" name ="v_description" id ="v_description" value ="" /> < br />< br />

< label for ="v_category" > : </ label >
< select id ="v_category" name ="v_category" >
< option selected ="" value ="Autos" > </ option >
< option value ="Movies_Comedy" > </ option >
< option value ="Education" > </ option >
< option value ="Entertainment" > </ option >
< option value ="Movies_Anime_animation" > </ option >
< option value ="Games" > </ option >
< option value ="Howto" > </ option >
< option value ="Music" > </ option >
< option value ="" > </ option >
< option value ="Nonprofit" > </ option >
< option value ="People" > </ option >
< option value ="Animals" > </ option >
< option value ="Tech" > </ option >
< option value ="Sports" > </ option >
< option value ="Travel" > </ option >
</ select >
< br />< br />

< label for ="v_keywords" > : </ label >
< input type ="text" name ="v_title" id ="v_keywords" value ="" />
</ div >
< br />< br />
< input type ="hidden" name ="yttoken" id ="yttoken" value ="" >
< input type ="hidden" name ="yturl" id ="yturl" value ="" >
< input id ="fileToUpload" type ="file" size ="15" name ="fileToUpload" class ="input" >
< button id ="buttonUpload" > </ button >
< br />< br />
</ form >

* This source code was highlighted with Source Code Highlighter .

For successful upload, all form fields are required.

I want to warn in advance about the video category: YouTube API accepts only those categories
which are described in this xml: http://gdata.youtube.com/schemas/2007/categories.cat

That's all, I welcome comments and suggestions in the comments, since this is my first experience in writing a plugin, before this I didn’t go beyond simple manipulations with the DOM.

PS: If something is not clear from the article, then there are many explanatory comments in the source code.

UPD: Old links to the archive no longer work, posted a slightly updated version, with the cURL loader version: download