AjaxがYouTubeに動画をアップロードするためのjQueryプラグイン

最近、jQueryとPHPで小さなプラグインを作成しました。 機能は簡単です。Ajaxを使用して説明を設定し、ビデオをYouTubeにアップロードすると、プラグインはダウンロードステータスを返し、成功した場合はビデオIDを返します。 プラグインはどのサイトでも使用でき、CMSに簡単に挿入できます。



それはすべて、地元のテレビチャンネルのサイトのCMSを開発するときに、YouTubeにビデオをアップロードする必要に直面したという事実から始まりました。 ビデオはサイトに追加されることが多いため、毎回YouTubeにログインし、そこにビデオをアップロードし、そこへのリンクを取得し、CMSにアクセスしてそこに挿入するのは非常にストレスの多い作業です。 さらに、Ajaxを介してこれを行うことをお勧めします。これにより、任意のプロジェクトにプラグインを簡単に含めることができます。





これを行うための既成のソリューションは見つかりませんでしたが、2つの興味深い資料に出会いました。



http://habrahabr.ru/blogs/webdev/69006/

-ここでは、PHPを使用してダウンロードを行う方法について詳しく説明します。 ただし、Ajaxも必要でした。



http://zlob.in/2010/youtube-api-javascript-upload/

-Ajax経由でビデオをダウンロードするために必要な機能もありますが、サーバー部分はありません。 つまり、トークンとダウンロードURLがすでに受信されているはずです。 著者自身が、FLEXと組み合わせてスクリプトを使用していると書いています。



これらの2つのソリューションを組み合わせてドキュメントを掘り下げて、ビデオの説明を指定する機能を追加し、原則として必要なものを取得しました。 しかし、結局のところ、機能をわずかに拡張し、これらすべてを既成のプラグインの形に整理したいという要望がありました。理想的には誰でも使用できます。



プラグインとデモを含むアーカイブはこちらからダウンロードできます。

念のために



使い方



まず、 setup.phpファイルを編集する必要があります。 このファイルでは、プロジェクト名、開発者キー、ユーザー名、パスワードを指定してYouTubeにアクセスする必要があります。



ここで開発者キーを取得できます

このページでは、プロジェクトの名前とサイトのURLを示します。

ビデオのダウンロード元。その後、次のようにキーを提供します。

AI39si6Am9JZwKhJlrJGZUg0UU7URgTl9IGfSp2PZw2wAiWC33SfIGb2k3lhVRf-XLKnmhTiFnqDFv_9YgRgdK5qVWQQC_DlqQ



これで、サーバー側のセットアップが完了しました。



次に、プラグインをページに接続します。 動作するにはjQueryが必要です。できれば最新バージョンが必要です。

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









プラグインを接続します。

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









ダウンロードボタンをクリックして、プラグインを起動します。

$( '#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 .








$ .uploadVideo関数は5つの引数を取ります。



1) connect.phpへのパス(プラグインのあるフォルダーにあります)

2)ファイル選択項目のID

3)ビデオの説明:タイトル、説明、カテゴリ、キーワード

4)ブート時に実行される機能(たとえば、ブートプロセスが実行されていることを示すことができます)

5)コールバックダウンロード完了関数、ビデオのステータスとIDを返します



フォームを作成します。

< 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 .








アップロードを成功させるには、すべてのフォームフィールドが必要です。



動画のカテゴリについて事前に警告したい:YouTube APIはそれらのカテゴリのみを受け入れます

このxmlで説明されています: http : //gdata.youtube.com/schemas/2007/categories.cat



コメントはこれですべてです。コメントと提案を歓迎します。これはプラグインを作成する最初の経験であるためです。それまでは、DOMを使用した簡単な操作にとどまりませんでした。



PS:記事から何かが明確でない場合は、ソースコードに多くの説明的なコメントがあります。



UPD:古いアーカイブリンクが機能しなくなり、ブートローダーのcURLバージョンでわずかに更新されたバージョンが投稿されました: ダウンロード



All Articles