jQuery प्लगइन, अजाक्स YouTube पर वीडियो अपलोड करने के लिए

मैंने हाल ही में jQuery और PHP में एक छोटा सा प्लगइन लिखा है। कार्यक्षमता सरल है: अजाक्स के माध्यम से, एक विवरण सेट किया गया है और वीडियो YouTube पर अपलोड किया गया है, प्लगइन डाउनलोड स्थिति को लौटा देगा, और यदि यह सफल रहा, तो वीडियो आईडी। प्लगइन किसी भी साइट पर इस्तेमाल किया जा सकता है, और आसानी से किसी भी सीएमएस में डाला जाता है।



यह सब इस तथ्य के साथ शुरू हुआ कि स्थानीय टेलीविजन चैनल की साइट के लिए सीएमएस विकसित करते समय, मुझे YouTube पर वीडियो अपलोड करने की आवश्यकता का सामना करना पड़ा। चूंकि वीडियो को अक्सर साइट पर जोड़ा जाएगा, हर बार YouTube में लॉग इन करना, वहां वीडियो अपलोड करना, उसके लिए लिंक प्राप्त करना, CMS तक पहुंचना और वहां सम्मिलित करना बहुत तनावपूर्ण है। इसके अलावा, यह अजाक्स के माध्यम से करने की सलाह दी जाती है, ताकि आप आसानी से किसी भी परियोजना में प्लगइन को शामिल कर सकें।





मुझे ऐसा करने के लिए तैयार समाधान नहीं मिला, लेकिन मुझे दो दिलचस्प सामग्रियां मिलीं:



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

- यहाँ विस्तार से वर्णन किया गया है कि PHP का उपयोग करके डाउनलोड कैसे करें। हालांकि, मुझे अजाक्स की भी जरूरत थी।



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

- अजाक्स के माध्यम से वीडियो डाउनलोड करने के लिए आवश्यक कार्य भी है, लेकिन कोई सर्वर हिस्सा नहीं है। यही है, टोकन और डाउनलोड यूआरएल हमें पहले से ही प्राप्त होना चाहिए। लेखक खुद लिखता है कि वह फ्लेक्स के साथ मिलकर स्क्रिप्ट का उपयोग करता है।



इन दोनों समाधानों को जोड़कर, प्रलेखन में देरी करते हुए, मैंने वीडियो का वर्णन निर्दिष्ट करने की क्षमता जोड़ी और, सिद्धांत रूप में, जो कुछ भी आवश्यक था, वह मिला। लेकिन, आखिरकार, कार्यक्षमता को थोड़ा विस्तार करने और तैयार-निर्मित प्लग-इन के रूप में यह सब व्यवस्थित करने की इच्छा थी, जिसे आदर्श रूप से कोई भी उपयोग कर सकता है।



आप यहां प्लगइन और डेमो के साथ संग्रह डाउनलोड कर सकते हैं ,

और बस एक दर्पण के मामले में।

कैसे उपयोग करें

सबसे पहले, आपको 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) फ़ाइल चयन आइटम की आईडी

3) वीडियो विवरण: शीर्षक, विवरण, श्रेणी, कीवर्ड

4) फ़ंक्शन जिसे बूट समय पर निष्पादित किया जाएगा (उदाहरण के लिए, आप दिखा सकते हैं कि बूट प्रक्रिया चल रही है)

5) कॉलबैक डाउनलोड पूरा करने का कार्य, वीडियो की स्थिति और आईडी लौटाता है



एक फॉर्म बनाएँ:

< 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



यह सब, टिप्पणियों में मैं टिप्पणियों और सुझावों का स्वागत करता हूं, क्योंकि यह एक प्लगइन लिखने का मेरा पहला अनुभव है, इससे पहले मैं डोम के साथ सरल जोड़तोड़ से परे नहीं गया था।



पुनश्च: यदि लेख से कुछ स्पष्ट नहीं है, तो स्रोत कोड में कई व्याख्यात्मक टिप्पणियां हैं।



UPD: पुराने आर्काइव लिंक अब काम नहीं करते, बूटलोडर के cURL संस्करण के साथ थोड़ा अद्यतन संस्करण पोस्ट किया गया: डाउनलोड