এই নিবন্ধটি একটি বহিরাগত বিকাশকারী দ্বারা লেখা এবং জমা দেওয়া হয়েছিল। YouTube API টিম বেন লঙ্গোরিয়াকে তার সময় এবং দক্ষতার জন্য ধন্যবাদ জানায়।
বেন লঙ্গোরিয়া, উইসকনসিন বিশ্ববিদ্যালয় - ম্যাডিসন, একাডেমিক প্রযুক্তি
ফেব্রুয়ারি 2009
- ভূমিকা
- The Lay of the Land
- Movie.as ব্যবহার করে
- MovieSprite.as ব্যবহার করে
- আমি কি কল করতে পারি, আমি কি পেতে পারি?
- উপসংহার
ভূমিকা
চিত্র 1: TubeLoc ক্রোমলেস প্লেয়ার ডেমো
কি দারুন. মাত্র এক মাসের মধ্যে, এই লেখা পর্যন্ত, YouTube Player API-এর বয়স হবে এক বছর। এটা কত বছর ইন্টারনেট? API-তে নির্মিত বেশ কয়েকটি দুর্দান্ত প্রকল্প রয়েছে। আপনাকে শুধুমাত্র YouTube বিকাশকারী API ব্লগটি অনুসরণ করতে হবে যে এটিতে অনেক লোক আছে যারা এটির সাথে দুর্দান্ত কাজ করেছে।
YouTube এপিআই প্লেয়ার অ্যাপ্লিকেশনগুলির বর্তমান সেটটি অ্যাকশনস্ক্রিপ্ট 2 এ লেখা হয়েছে, এবং এটি এখনও ব্যবহার করার জন্য একটি দুর্দান্ত ভাষা রয়ে গেছে, অনেক লোক এখন অ্যাকশনস্ক্রিপ্ট 3 এবং/অথবা ফ্লেক্স ব্যবহার করছে। সমস্যা হল যে ActionScript 3 অ্যাপ্লিকেশনের সাথে যোগাযোগ করার জন্য ActionScript 2 অ্যাপ্লিকেশন পেতে আপনাকে কয়েকটি হুপের মধ্য দিয়ে যেতে হবে। "কিন্তু অপেক্ষা করুন...আমার মনে হয় আমি এটা আগেও শুনেছি--এর জন্য ইতিমধ্যেই কিছু নেই?" আপনি জিজ্ঞাসা করতে পারেন।
একটি ভাল সংখ্যক লোক ইতিমধ্যেই এটি কীভাবে করতে হয় তা খুঁজে বের করেছে এবং দয়া করে YouTube API বিকাশকারী ফোরামে তাদের প্রজ্ঞা ফেলেছে৷ ডেভেলপারদের ব্যবহার করা সহজ করার জন্য AS3 ক্রোমলেস র্যাপার এবং ফ্লেক্স এমবেডেড প্লেয়ার প্রজেক্টও রয়েছে।
আমি শুধুমাত্র অ্যাকশনস্ক্রিপ্ট 3 বা MXML-এ প্লেয়ার API কার্যকারিতা পুনরায় ব্যবহার করার একটি সহজ, সহজ উপায় চেয়েছিলাম। সেই ফ্লেক্স-অ্যালার্জি প্রকল্পগুলির জন্য একটি ফ্লেক্স-মুক্ত ক্লাস এবং সেই ফ্লেক্স-প্রেমময় প্রকল্পগুলির জন্য একটি সহজে ব্যবহারযোগ্য ফ্লেক্স উপাদান৷ TubeLoc উভয় প্রয়োজনীয়তা সন্তুষ্ট
TubeLoc (YouTube এবং LocalConnection-এর একটি ম্যাশআপ) হল একটি ActionScript 3 লাইব্রেরি যা YouTube ActionScript 2 Player API-এর অ্যাডাপ্টার হিসেবে কাজ করে। আপনি সহজেই আপনার ActionScript 3 বা ফ্লেক্স অ্যাপ্লিকেশনগুলিতে ফুল-ক্রোম বা ক্রোমলেস ইউটিউব প্লেয়ারগুলির সাথে YouTube ভিডিও কার্যকারিতা যোগ করতে পারেন৷ TubeLoc একটি ActionScript 2 মধ্যস্থতাকারী SWF এর সাথে যোগাযোগ করার জন্য LocalConnection ক্লাস ব্যবহার করে। ActionScript 2 SWF অফিসিয়াল YouTube API প্লেয়ারের সাথে যোগাযোগ করে। তাহলে আমরা এই জিনিসটি কিভাবে ব্যবহার করব?
The Lay of the Land
প্রথমে, আপনাকে Google Code প্রকল্প থেকে লাইব্রেরির বর্তমান রিলিজ ডাউনলোড করতে হবে। রিলিজ জিপ সংরক্ষণাগারটি আনপ্যাক করার পরে, আপনি একটি as3 ডিরেক্টরি খুঁজে পাবেন। এর অধীনে src ডিরেক্টরি রয়েছে যা কিছু নমুনা ক্লাস অন্তর্ভুক্ত করে। একটি সূচনা বিন্দু হিসাবে তাদের ব্যবহার নির্দ্বিধায়. src ডিরেক্টরিতে com/enefekt/tubeloc অধীনে দুটি ফাইল রয়েছে। Movie.as হল যা আপনি আপনার ফ্লেক্স প্রকল্পে ব্যবহার করতে পারেন এবং MovieSprite.as হল যা আপনি আপনার ActionScript 3 প্রকল্পে ব্যবহার করতে পারেন৷ com/enefekt/tubeloc/event এ প্লেয়ার থেকে পাঠানো বিভিন্ন বিজ্ঞপ্তির জন্য বিভিন্ন ইভেন্ট ক্লাস রয়েছে।
এই টিউটোরিয়ালে উদাহরণগুলি চেষ্টা করার আগে, as3 ডিরেক্টরির src ডিরেক্টরিটি আপনার ক্লাসের পাথে রয়েছে তা নিশ্চিত করুন। এটি করার প্রক্রিয়াটি আপনি যা বিকাশ করতে ব্যবহার করেন তার উপর নির্ভর করে ভিন্ন, তাই আপনার উন্নয়ন পরিবেশের জন্য ডকুমেন্টেশন পরীক্ষা করুন।
একবার আপনি আপনার ডেমো বা অ্যাপ্লিকেশন কম্পাইল করলে, আপনার ActionScript 2 SWF এর প্রয়োজন হবে যা YouTube Player API এর সাথে যোগাযোগ করে। আপনি এখানে রিলিজ আর্কাইভে এই SWF খুঁজে পেতে পারেন: as3/lib/as2_tubeloc.swf । শুধু নিশ্চিত করুন যে এটি HTML ফাইলের পাশে রয়েছে যা আপনার SWF অ্যাপ্লিকেশন এম্বেড করছে, যেমন:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
দ্রষ্টব্য: আপনি লাইব্রেরির সাথে playerWrapperUrl বৈশিষ্ট্য ব্যবহার করে এই SWF-এর পথ পরিবর্তন করতে পারেন।
Movie.as ব্যবহার করে
আসুন টিউবলোকের ফ্লেক্স সংস্করণটি কীভাবে ব্যবহার করবেন তা দেখি। আমরা প্রথমে ফুল-ক্রোম প্লেয়ার (সমস্ত নিয়ন্ত্রণ সহ) দেখব, তারপর BYOC ক্রোমলেস প্লেয়ারে। এইভাবে আপনি MXML-এ ফুল-ক্রোম প্লেয়ার ব্যবহার করেন:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
আমি জানি, আমি জানি, বেদনাদায়ক তাই না? একদমই না! তাহলে আসুন পাগল হয়ে যাই এবং ক্রোমলেস করি:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
আমরা ব্যথার সাথে আরও একটি বৈশিষ্ট্য যোগ করছি, তা হল। তাই এখানে পুরো MXML ফাইলটি দেখতে কেমন হবে:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
দ্রষ্টব্য: mx:Application এলিমেন্টে, আমরা মুভি কম্পোনেন্টের প্যাকেজের সাথে tubeloc নামস্থান যোগ করি। এটি করার পরে, আমরা প্রদর্শিত হিসাবে উপাদান ব্যবহার করতে পারেন. পরে আমরা এই উপাদানটি সেট এবং কল করার জন্য উপলব্ধ কি তা দেখব।
MovieSprite.as ব্যবহার করে
এখন দেখা যাক TubeLoc এর ActionScript 3 সংস্করণটি কীভাবে ব্যবহার করবেন। এই সংস্করণে ফ্লেক্স ফ্রেমওয়ার্ক থেকে কোনো ক্লাসের প্রয়োজন নেই, এবং শুধুমাত্র ফ্ল্যাশ প্লেয়ার নেটিভ ক্লাস ব্যবহার করে। আমরা প্রথমে ফুল-ক্রোম প্লেয়ার, তারপর ক্রোমলেস প্লেয়ার কীভাবে করতে হয় তা দেখব। এখানে একটি সম্পূর্ণ উদাহরণ:
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
প্রথমত, আমরা প্রয়োজনীয় TubeLoc ক্লাস আমদানি করি। তারপর, কনস্ট্রাক্টরে আমরা MovieSprite ক্লাসের একটি উদাহরণ তৈরি করি এবং আমাদের ভিডিও আইডি মুভিস্প্রাইটের কনস্ট্রাক্টরে পাস করি। এর পরে, আমরা PlayerReadyEvent এর জন্য একটি ইভেন্ট শ্রোতা যোগ করি। onPlayerReady ইভেন্ট হ্যান্ডলারে, আমরা সিনেমার আকার সেট করি। দ্রষ্টব্য: যেহেতু আমরা পূর্ণ-ক্রোম প্লেয়ার ব্যবহার করছি, তাই আমরা MovieSprite ক্লাসে একটি স্ট্যাটিক প্রপার্টি CHROME_HEIGHT এর সুবিধা নিচ্ছি। এটি আমাদেরকে ক্রোমের উচ্চতা বিবেচনায় নিয়ে মুভির আকার দিতে সাহায্য করে৷
ঠিক আছে, তাহলে ক্রোমলেস প্লেয়ারের কী হবে?
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
তাই ভিন্ন কি? কনস্ট্রাক্টরে, আমরা ভিডিও আইডির জন্য null পাস করি এবং দ্বিতীয় true প্যারামিটারটি MovieSprite ক্লাসকে বলে যে আমরা ক্রোমলেস হয়ে যাচ্ছি। আপনি onPlayerReady ইভেন্ট হ্যান্ডলারে একটি পার্থক্যও লক্ষ্য করবেন। এখানে আমরা loadVideoById পদ্ধতি ব্যবহার করে আইডি দ্বারা আমাদের ভিডিও লোড করি।
আমি কি কল করতে পারি, আমি কি পেতে পারি?
তাই কি সব কল করার জন্য উপলব্ধ, এবং কি ইভেন্ট আমরা সঙ্গে কাজ করতে হবে? আপনার ডাউনলোড করা রিলিজ আর্কাইভে বিস্তারিত জানতে সম্পূর্ণ কোড ডকুমেন্টেশন আছে। একটি দ্রুত ওভারভিউ হিসাবে, Movie.as এবং MovieSprite. উভয়ের জন্য আপনার কাছে এই পদ্ধতিগুলি রয়েছে:
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
এই পদ্ধতিগুলি ছাড়াও, Movie.as উপাদানে, আপনার এই বৈশিষ্ট্যগুলিতে অ্যাক্সেস রয়েছে:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
এখানে আপনি সদস্যতা নিতে পারেন ইভেন্ট আছে. আপনি ডকুমেন্টেশন আরো বিস্তারিত জানতে পারেন.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
উপসংহার
আমি আশা করি এই নিবন্ধটি আপনাকে আপনার ফ্ল্যাশ অ্যাপ্লিকেশনগুলিতে YouTube কার্যকারিতা এবং বিষয়বস্তু সংহত করতে সাহায্য করেছে৷ আপনি TubeLoc এর সাথে বিকাশ করার সময় মনে রাখার একটি সীমাবদ্ধতা রয়েছে: আপনার একই সময়ে স্টেজে দুটি YouTube প্লেয়ার থাকতে পারে না।
আশা করছি যথাসময়ে এর প্রতিকার হবে। তাই অনুগ্রহ করে, যখন আপনি বাগ বা কিছু বৈশিষ্ট্যের অভাব খুঁজে পান, তখন Google কোড প্রকল্পে যান এবং সমস্যা ট্র্যাকারে রিপোর্ট করুন। পড়ার জন্য ধন্যবাদ!
লেখক বায়ো
বেন লঙ্গোরিয়া উইসকনসিন-ম্যাডিসন বিশ্ববিদ্যালয়ের একজন একাডেমিক অ্যাপ্লিকেশন ডেভেলপার। তিনি ফ্ল্যাশ 5 থেকে ফ্ল্যাশ এবং ফ্লেক্স 2 প্রকাশের পর থেকে ফ্লেক্সের সাথে বিকাশ করছেন। গত 2 বছর ধরে তিনি মজিলা-চালিত অ্যাপ্লিকেশনগুলিও তৈরি করছেন৷ বেন ব্রাউজার এবং ডেস্কটপ উভয়কে লক্ষ্য করে ক্রস-প্ল্যাটফর্ম অ্যাপ্লিকেশন সহ বেশ কয়েকটি শিক্ষাগত এবং একাডেমিক প্রকল্পে কাজ করেছেন। তিনি ইন্টারফেস এবং মিথস্ক্রিয়া ডিজাইনে সক্রিয় ভূমিকা নেন এবং ব্যবহারযোগ্য সফ্টওয়্যার তৈরির চ্যালেঞ্জ উপভোগ করেন। আপনি http://enefekt.com/sansbrowser/- এ তার ব্লগ খুঁজে পেতে পারেন এবং InsideRIA- তে তার অবদানগুলি পড়তে পারেন।
এই কাজটি ক্রিয়েটিভ কমন্স অ্যাট্রিবিউশন 3.0 ইউনাইটেড স্টেটস লাইসেন্সের অধীনে লাইসেন্সপ্রাপ্ত।