ক্রোমলেস প্লেয়ারের জন্য অ্যাকশনস্ক্রিপ্ট 3.0 র‍্যাপার

এই নিবন্ধটি একটি বহিরাগত বিকাশকারী দ্বারা লেখা এবং জমা দেওয়া হয়েছিল। YouTube API এবং টুলস টিম ম্যাথিউ রিচমন্ডকে তার সময় এবং দক্ষতার জন্য ধন্যবাদ জানায়।

ম্যাথিউ রিচমন্ড, দ্য চপিং ব্লক, ইনক।
অক্টোবর 2008

• ভূমিকা
• গুরুত্বপূর্ণ সম্পদ
• খোদাই করে
  • মোড়ক ডেমো ওভারভিউ
  • একটি YouTubeLoader অবজেক্ট তৈরি করা
  • swf এম্বেড করা এবং YouTubeLoader JavaScript সংযুক্ত করা
• প্লেয়ারের সাথে ইন্টারঅ্যাক্ট করা
  • একটি ভিডিও অনুরোধ করা হচ্ছে
  • অতিরিক্ত কল ইস্যু করা
  • ইভেন্ট সদস্যতা
• উপলব্ধ অপারেশন
• ডেমোতে নোট
• উপসংহার

ভূমিকা

এই নিবন্ধে, আমি Chromeless YouTube প্লেয়ারের জন্য একটি নির্ভরযোগ্য ActionScript 3.0 র‍্যাপার উপস্থাপন করব এবং সংক্ষেপে রূপরেখা দেব। র‌্যাপার অ্যাকশনস্ক্রিপ্টের এক্সটার্নাল ইন্টারফেস ক্লাস এবং ইউটিউবের জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে।

Google-এর YouTube Player Tools এবং Chromeless Player ডিজাইনার/ডেভেলপারদের দ্রুত এবং সহজে তাদের অনলাইন প্রকল্পগুলিতে YouTube-এর শক্তিকে একীভূত করার ক্ষমতা দিয়েছে৷ এই পদ্ধতিটি নির্দিষ্ট বাজেটের ছোট প্রকল্পগুলির জন্য আদর্শ যা ভিডিও হোস্ট করার অনুমতি দেয় না, সেইসাথে ক্লায়েন্টদের জন্য বৃহৎ স্কেল প্রকল্পগুলির জন্য যারা তাদের YouYube দর্শকদের থেকে নিজেকে দূরে না রেখে একটি কাস্টম শেষ-ব্যবহারকারীর অভিজ্ঞতা চান।

চিত্র 1: অ্যাকশনস্ক্রিপ্ট 3.0 র্যাপার স্ক্রিনশট

ইউটিউবের ফ্ল্যাশ এপিআই এবং এমবেডেড প্লেয়ারগুলি লেখা আছে এবং অ্যাকশনস্ক্রিপ্ট 2.0 এর সাথে বেশ ভাল কাজ করে; আপনার প্রোজেক্ট যদি অ্যাকশনস্ক্রিপ্ট 3.0 হয় তবে, বিরামবিহীন ইন্টিগ্রেশন একটু বেশি জটিল হয়ে যায়। যদিও অ্যাকশনস্ক্রিপ্ট 2.0 প্লেয়ারগুলিকে অ্যাকশনস্ক্রিপ্ট 3.0 swf-এ লোড করা সহজ, আপনি লোড করা প্লেয়ারে সরাসরি যোগাযোগ করতে বা কোনও কার্যকরী কল পাস করতে পারবেন না। এটি আরও জটিল কারণ YourTube এর সার্ভার থেকে আসা swf ফাইলটি নিজের মধ্যে একটি ভিডিও লোড করছে৷ আমাদের র‍্যাপারকে সেই সত্য সম্পর্কে পুরোপুরি সচেতন হতে হবে এবং সেই অনুযায়ী প্রতিক্রিয়া জানাতে হবে। সৌভাগ্যবশত অ্যাকশনস্ক্রিপ্ট ভাষাতে এই নেস্টেড কিন্তু সংযোগ বিচ্ছিন্ন টুকরাগুলিকে পুনরায় সংযোগ করার জন্য দুটি যুক্তিযুক্ত সমাধান রয়েছে, স্থানীয় সংযোগ শ্রেণী বা বহিরাগত ইন্টারফেস ক্লাস। এই ডেমোটি পরবর্তীতে ফোকাস করতে চলেছে কারণ ExternalInterface ভালভাবে নথিভুক্ত JavaScript API এর সাথে নির্বিঘ্নে কাজ করে এবং তাই XHTML পৃষ্ঠার মধ্যে অন্য যেকোন কিছুর সাথে ভালভাবে কাজ করে।

গুরুত্বপূর্ণ সম্পদ

আমরা শুরু করার আগে, এখানে আপনার কাছে উপলব্ধ সম্পর্কিত সংস্থান এবং ফাইলগুলির একটি তালিকা রয়েছে৷ এই নিবন্ধে আলোচনা করা অনেক বিষয় নীচের লিঙ্কগুলিতে আরও বিশদ রয়েছে।

• ActionScript 3.0 Wrapper দেখুন এবং সোর্স ফাইল ডাউনলোড করুন
• অফিসিয়াল YouTube JavaScript Player API রেফারেন্স
• অ্যাডোব এক্সটার্নাল ইন্টারফেস ক্লাস ডকুমেন্টেশন
• SWFObject জাভাস্ক্রিপ্ট ফ্ল্যাশ এম্বেড

খোদাই করে

মোড়ক ডেমো ওভারভিউ

চিত্র 3: জাভাস্ক্রিপ্ট ফাইল

চিত্র 2: অ্যাকশনস্ক্রিপ্ট ক্লাস ফাইল

অ্যাকশনস্ক্রিপ্ট 3.0 র্যাপারে মূলত দুটি আন্তঃসংযুক্ত অংশ রয়েছে, অ্যাকশনস্ক্রিপ্ট 3.0 ক্লাস ফাইল যা src/choppingblock/video/ (চিত্র 2) এ অবস্থিত এবং 'youTubeLoader.js' জাভাস্ক্রিপ্ট ফাইলটি deploy/_assets/js/ (F3) এ অবস্থিত . আপনার Flash/Flex সোর্স ফাইলটি YouTubeLoader ActionScript ক্লাসের একটি উদাহরণ তৈরি করবে; আপনার এক্সএইচটিএমএল পৃষ্ঠা ফ্ল্যাশ ফাইলটিকে এম্বেড করে এবং ইউটিউবলোডার জাভাস্ক্রিপ্ট ফাইলের মধ্যে থাকা ফাংশনগুলির সাথে এটি নিবন্ধন করে। এটা বোঝা গুরুত্বপূর্ণ যে এখান থেকে, YouTubeLoader যা কিছু ফ্ল্যাশ ফাইলের মধ্যে করে, জাভাস্ক্রিপ্ট ফাংশনের মাধ্যমে নিয়ন্ত্রিত হয়।

যেহেতু ফ্ল্যাশের মধ্যে সমস্ত কার্যকারিতা জাভাস্ক্রিপ্ট API এর মাধ্যমে নিয়ন্ত্রিত হয়, আপনি ফ্ল্যাশের 'টেস্ট মুভি' প্লেয়ারের মধ্যে কোনো YouTube সামগ্রী লোড করতে পারবেন না৷ এটি শুধুমাত্র তখনই কাজ করবে যখন একটি XHTML পৃষ্ঠায় এম্বেড করা হবে এবং সঠিকভাবে YouTubeLoader JavaScript ফাংশনের সাথে সংযুক্ত থাকবে।

দ্রষ্টব্য : এই কলগুলির যেকোনো একটি পরীক্ষা করার জন্য, আপনার ফাইলটি ওয়েব সার্ভারে চলমান থাকতে হবে বা আপনার ফ্ল্যাশ প্লেয়ারের নিরাপত্তা সেটিংস পরিবর্তন করতে হবে, কারণ ফ্ল্যাশ প্লেয়ার স্থানীয় ফাইল এবং ইন্টারনেটের মধ্যে কলগুলিকে সীমাবদ্ধ করে৷

একটি YouTubeLoader অবজেক্ট তৈরি করা

আপনার ফ্ল্যাশ/ফ্লেক্স প্রজেক্টে ইউটিউবলোডার অবজেক্টের একটি উদাহরণ তৈরি করার আগে, আপনাকে অবশ্যই প্রথমে নিশ্চিত করতে হবে যে প্রয়োজনীয় ফাইলগুলির প্যাকেজ (ফোল্ডার) আপনার প্রোজেক্টের মতো একই ডিরেক্টরিতে রয়েছে (চিত্র 2 দেখুন), অথবা আপনার প্রজেক্ট ক্লাসপথের সাথে সংজ্ঞায়িত করা হয়েছে . তারপর আপনি প্যাকেজ ফাইল আমদানি করতে পারেন:

import choppingblock.video.*;

এটি 'YouTubeLoader.as' এবং 'YouTubeLoaderEvent.as' ক্লাসে আপনার ActionScript ফাইল অ্যাক্সেস করার অনুমতি দেয়। এখন আপনি YouTubeLoader ক্লাস এবং প্রয়োজনীয় ইভেন্ট শ্রোতাদের একটি উদাহরণ তৈরি করতে পরিষ্কার:

import choppingblock.video.*;

public class YouTubeDemo extends Sprite {

  private var _youTubeLoader:YouTubeLoader;	
  
  // ------------------------------------
  // CONSTRUCTOR
  // ------------------------------------
  
  public function YouTubeDemo () {
    
    // create YouTubeLoader object
    _youTubeLoader = new YouTubeLoader();
    
    // add event listener to call youTubePlayerLoadedHandler method on load
    _youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler);
    
    // create the actual loader 
    _youTubeLoader.create();
    
    // add object to the display stack
    addChild(_youTubeLoader);
  };
  
  // ------------------------------------
  // EVENT METHODS
  // ------------------------------------
  
  /**
  Called via player loaded event, lets you know you are all clear to send player commands.
  */
  private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
    //trace("YouTubeDemo: youTubePlayerLoadedHandler");
    
    // you are now clear to start making calls to the YouTubeLoader object
  };
};

এখন, যদি JavaScript ফাইলটি জায়গায় থাকে এবং সঠিকভাবে সংযুক্ত থাকে, তাহলে youTubePlayerLoadedHandler সফলভাবে কল করা উচিত এবং আমরা অনুরোধ করা শুরু করতে প্রস্তুত।

swf এম্বেড করা এবং YouTubeLoader JavaScript সংযুক্ত করা

আপনার swf ফাইলটি একটি XHTML ফাইলে এম্বেড করা এবং YouTubeLoader JavaScript এর সাথে সংযুক্ত না হওয়া পর্যন্ত আপনি YouTube থেকে সামগ্রী সফলভাবে লোড করতে সক্ষম হবেন না৷ জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে যে কোনো প্লেয়ারকে এম্বেড করতে আমরা SWFObject ব্যবহার করার পরামর্শ দিই। এটি আপনাকে শেষ ব্যবহারকারীর ফ্ল্যাশ প্লেয়ার সংস্করণ সনাক্ত করার অনুমতি দেবে (জাভাস্ক্রিপ্ট API-এর জন্য ফ্ল্যাশ প্লেয়ার 8 বা উচ্চতর প্রয়োজন) এবং প্লেয়ারটি দেখার জন্য ইন্টারনেট এক্সপ্লোরার ব্যবহার করার সময় 'এই নিয়ন্ত্রণ সক্রিয় করতে ক্লিক করুন' বাক্স থেকে মুক্তি পাবেন৷

আপনার XHTML ফাইলের <head> অংশের মধ্যে আপনি swfobject এবং youTubeLoader ফাইলগুলিকে সংযুক্ত করেন:

<script type="text/javascript" src="_assets/js/swfobject.js"></script>
<script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>

JavaScript API সক্ষম করে আপনার ActionScript 3.0 swf এম্বেড করতে SWFObject ব্যবহার করার উদাহরণের জন্য নীচে দেখুন, এবং তারপর YouTube-Loader JavaScript API-এ আপনার swf-এর একটি রেফারেন্স পাঠান।

<script type="text/javascript">

  var flashvars = {};
  var params = {
    menu: "false",
    allowScriptAccess: "always",
    scale: "noscale"
  };
  var attributes = {
    id: "youtubewrapper"
  };

  swfobject.embedSWF("YouTubeIntegrationDemo.swf", "flashcontent", "960", "500", "9.0.0", "_assets/swf/expressInstall.swf", flashvars, params, attributes);
  
  //init the youTubeLoader JavaScript methods
  SWFID = "youtubewrapper"
    
</script>

প্লেয়ার SWF-কে HTML পৃষ্ঠায় ফাংশন কল করার অনুমতি দেওয়ার জন্য কোডে allowScriptAccess প্যারামিটার প্রয়োজন, যেহেতু Chromeless প্লেয়ার XHTML পৃষ্ঠা থেকে একটি ভিন্ন ডোমেনে হোস্ট করা হয়েছে।

এম্বেড অবজেক্টের আইডি আমরা পাস করছি একমাত্র অ্যাট্রিবিউট - এই ক্ষেত্রে, youtubewrapper। getElementById() ব্যবহার করে প্লেয়ারের রেফারেন্স পেতে youTubeLoader.js ফাইলটি এই আইডিটি ব্যবহার করবে।

swfobject.embedSWF প্লেয়ারটিকে YouTube থেকে লোড করবে এবং এটিকে আপনার পৃষ্ঠায় এম্বেড করবে।

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)

• swfUrlStr - এটি SWF এর URL। মনে রাখবেন যে জাভাস্ক্রিপ্ট API কলগুলি সক্ষম করতে আমরা সাধারণ YouTube SWF URL-এ enablejsapi এবং playerapiid প্যারামিটারগুলি যুক্ত করেছি৷
• replaceElemIdStr - এটি এমবেড সামগ্রীর সাথে প্রতিস্থাপন করার জন্য HTML DIV আইডি। উপরের উদাহরণে, এটি ytapiplayer ।
• widthStr - প্লেয়ারের প্রস্থ।
• heightStr - প্লেয়ারের উচ্চতা।
• swfVersionStr - ব্যবহারকারীর বিষয়বস্তু দেখার জন্য ন্যূনতম প্রয়োজনীয় সংস্করণ। এই ক্ষেত্রে, সংস্করণ 8 বা তার উপরে প্রয়োজন। ব্যবহারকারীর কাছে 8 বা তার বেশি না থাকলে, তারা HTML DIV-তে পাঠ্যের ডিফল্ট লাইন দেখতে পাবে।
• xiSwfUrlStr - (ঐচ্ছিক) আপনার এক্সপ্রেস ইনস্টল SWF এর URL নির্দিষ্ট করে। এই উদাহরণে ব্যবহৃত হয় না.
• flashVarsObj - (ঐচ্ছিক) আপনার FlashVars নির্দিষ্ট করে name:value জোড়ায়। এই উদাহরণে ব্যবহৃত হয় না.
• parObj - (ঐচ্ছিক) এমবেড অবজেক্টের প্যারামিটার। এই ক্ষেত্রে, আমরা allowScriptAccess সেট করেছি।
• AttObj - (ঐচ্ছিক) এম্বেড অবজেক্টের জন্য বৈশিষ্ট্য। এই ক্ষেত্রে, আমরা আইডিটি myytplayer এ সেট করেছি।

আরও ব্যাখ্যার জন্য SWFObject ডকুমেন্টেশন দেখুন।

SWFID ≡ JavaScript API ব্যবহার করার জন্য এম্বেড অবজেক্টের আইডির একটি রেফারেন্স সংরক্ষণ করবে। আপনি যে এম্বেড অবজেক্টটি swf দিয়েছেন সেই আইডিটি আপনাকে অবশ্যই ব্যবহার করতে হবে।

SWFID ≡ "youtubewrapper"

এই মুহুর্তে আপনি সফলভাবে আপনার প্রকল্প পরীক্ষা করতে সক্ষম হওয়া উচিত। YouTubeLoader অবজেক্টের Chromeless Player লোড করা উচিত এবং YouTubeLoaderEvent.LOADED ইভেন্ট হ্যান্ডলারকে সফলভাবে কল করা উচিত। এখন আমরা একটি ভিডিও অনুরোধ করতে এবং YouTubeLoader অবজেক্টের সাথে ইন্টারঅ্যাক্ট করতে প্রস্তুত।

প্লেয়ারের সাথে ইন্টারঅ্যাক্ট করা

যেহেতু ক্রোমলেস প্লেয়ারের জন্য একটি অ্যাকশনস্ক্রিপ্ট 3.0 র‍্যাপার তৈরি করার এই পদ্ধতিটি অ্যাকশনস্ক্রিপ্টের বাহ্যিক ইন্টারফেস ক্লাসের সুবিধা দেয়, তাই আমরা এখন আমাদের লোড করা প্লেয়ারকে নিয়ন্ত্রণ করতে YouTube JavaScript Player API- এর মধ্যে যে কোনও অপারেশন ব্যবহার করতে পারি। আপনি যদি deploy/_assets/js/ (চিত্র 3) এ অবস্থিত 'youTubeLoader.js' জাভাস্ক্রিপ্ট ফাইলের মধ্যে দেখেন তবে আপনি দেখতে পাবেন যে এটিতে উপলব্ধ বেশিরভাগ ফাংশন রয়েছে। প্রতিটি অপারেশন ফাংশন প্রথমে checkObj ফাংশনের বিরুদ্ধে পরীক্ষা করে যাচাই করে যে SWFID ভেরিয়েবলটি কার্যকর করার আগে সঠিকভাবে সেট করা হয়েছে।

//------------------------------------
// UTILITY METHODS
//------------------------------------

function checkObj () {
  // alert("youTubeLoader.js : checkObj");
  if (SWFID) {
    createObj();
    return true;
  } else{
    alert("YouTubeLoader: In order to call methods within a swf, you must first set the variable \"SWFID\"!");
    return false;
  };
}
  
//------------------------------------
// YOUTUBE METHODS
//------------------------------------

function loadVideoById(id, startSeconds) {
  // alert("youTubeLoader.js : loadVideoById");
  if (checkObj()) {
    obj.loadVideoById(id,startSeconds);
  };
};

function cueNewVideo(id, startSeconds) {
  // alert("youTubeLoader.js : loadVideoById");
  if (checkObj()) {
    obj.cueVideoById(id, startSeconds);
  }
}

function clearVideo() {
  // alert("youTubeLoader.js : clearVideo");
  if (checkObj()) {
    obj.clearVideo();
  }
}

// plus 17 more...

ক্রোমলেস প্লেয়ারের জন্য আমাদের অ্যাকশনস্ক্রিপ্ট 3.0 র‍্যাপারের শেষ লক্ষ্য হল একটি ActionScript 3.0 ফ্ল্যাশ/ফ্লেক্স প্রকল্পের মধ্যে থেকে YouTube API-এর সাথে নিরবচ্ছিন্ন মিথস্ক্রিয়া অফার করা, আমরা 'YouTubeLoader.as' ক্লাসে ঠিক একই পাবলিক পদ্ধতিগুলি যুক্ত করেছি ফাইল src/choppingblock/video/ (চিত্র 2) এ অবস্থিত। এর মানে হল আপনি ফ্ল্যাশ/ফ্লেক্সের মধ্যে সরাসরি YouTubeLoader অবজেক্টে ঠিক একই ক্রিয়াকলাপগুলিকে কল করতে পারেন৷ আপনি যদি ক্লাস ফাইলের মধ্যে তাকান তবে আপনি পাবেন:

// ------------------------------------
// YOUTUBE METHODS
// ------------------------------------

public function loadVideoById (id:String, startSeconds:Number = 0):void{
  //trace("YouTubeLoader: loadVideoById");
  ExternalInterface.call("loadVideoById", id, startSeconds);
};

public function cueNewVideo (id:String, startSeconds:Number = 0):void{
  //trace("YouTubeLoader: cueNewVideo");
  ExternalInterface.call("cueNewVideo", id, startSeconds);
};

public function clearVideo ():void{
  //trace("YouTubeLoader: clearVideo");
  ExternalInterface.call("clearVideo");
};

// plus 17 more...

অ্যাকশনস্ক্রিপ্ট পদ্ধতিগুলি জাভাস্ক্রিপ্ট API-এর মধ্যে উপযুক্ত ফাংশনকে কল করার জন্য ExternalInterface ক্লাস ব্যবহার করে।

একটি ভিডিও অনুরোধ করা হচ্ছে

আপনি এখন প্লেয়ার রেফারেন্স ব্যবহার করে ফাংশন কল করে আপনার ActionScript 3.0 ফাইলের মধ্যে থেকে একটি ভিডিও অনুরোধ করতে পারেন। উদাহরণস্বরূপ, যদি আপনি ভিডিওটি চালাতে চান যখন একজন ব্যবহারকারী একটি বোতামে ক্লিক করেন, আপনি আপনার বোতামে একটি MouseEvent.CLICK ইভেন্ট লিসেনার যোগ করবেন। এটার মত:

// assuming your button was called 'myButton'
myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);

এবং অনুরোধটি পরিচালনা করার জন্য একটি ইভেন্ট হ্যান্ডলার পদ্ধতি তৈরি করুন। এটার মত:

private function youtubeLoadVideoHandler (event:MouseEvent):void{
  
  // assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
  _youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};

আপনার Flash/Flex ফাইলের বাইরে আপনি ঐচ্ছিকভাবে সংশ্লিষ্ট JavaScript ফাংশনে সরাসরি কল করে একটি ভিডিওর অনুরোধ করতে পারেন। এটার মত:

 <a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a> 

অতিরিক্ত কল ইস্যু করা

অতিরিক্ত কলগুলি ঠিক একটি ভিডিও অনুরোধ করার মতো কাজ করে; ActionScript 3 এর মধ্যে থেকে আপনি প্লেয়ার রেফারেন্স ব্যবহার করে সহজভাবে পদ্ধতি কল করতে পারেন। উপলব্ধ পদ্ধতির একটি সম্পূর্ণ তালিকা নীচে প্রদান করা হয়.

ইভেন্ট সদস্যতা

প্লেয়ার রেফারেন্সে একটি ইভেন্ট লিসেনার যোগ করে ইভেন্টগুলিতে সদস্যতা নিন। উদাহরণস্বরূপ, প্লেয়ারের অবস্থা পরিবর্তন হলে বিজ্ঞপ্তি পেতে, YouTubeLoaderEvent.STATE_CHANGE এর জন্য একটি ইভেন্ট লিসেনার যোগ করুন। এটার মত:

// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);

এবং অনুরোধটি পরিচালনা করার জন্য একটি ইভেন্ট হ্যান্ডলার পদ্ধতি তৈরি করুন। এটার মত:

private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
  //trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
  
  _stateField.text = event.state;
};

উপলব্ধ অপারেশন

YouTubePlayer API পদ্ধতিতে কল করার জন্য, আপনাকে প্রথমে আপনার ActionScript ফাইলের মধ্যে YouTubePlayer ক্লাসের একটি উদাহরণ তৈরি করতে হবে এবং আপনি যে YouTubePlayer অবজেক্টটিকে নিয়ন্ত্রণ করতে চান তার একটি রেফারেন্স সংরক্ষণ করতে হবে। এটি কল করে করা যেতে পারে:

var _youTubeLoader:YouTubeLoader;
_youTubeLoader = new YouTubeLoader();

পাবলিক পদ্ধতি

player.loadVideoById(id:String, startSeconds:Number = 0):void

নির্দিষ্ট আইডির উপর ভিত্তি করে ভিডিও লোড এবং প্লে করে।

player.cueNewVideo(id:String, startSeconds:Number = 0):void

লোড হয় কিন্তু স্বয়ংক্রিয়ভাবে নির্দিষ্ট আইডির উপর ভিত্তি করে ভিডিও চালায় না।

player.clearVideo():void

বর্তমানে cued/লোড করা ভিডিও সাফ করে।

player.setSize(w:Number, h:Number):void

YouTubePlayer উদাহরণের আকার সেট করে।

player.play():void

বর্তমানে cued/লোড করা ভিডিও চালায়।

player.pause():void

বর্তমানে cued/লোড করা ভিডিওকে বিরতি দেয়।

player.stop():void

বর্তমানে cued/লোড করা ভিডিও বন্ধ করে।

player.seekTo(seconds:Number):void

বর্তমানে cued/লোড করা ভিডিওর মধ্যে নির্দিষ্ট সময় খোঁজে।

player.getPlayerState():String

বর্তমানে cued/লোড করা ভিডিওর বর্তমান অবস্থা প্রদান করে।

player.getBytesLoaded():Number

বর্তমানে cued/লোড করা ভিডিওর লোড করা বর্তমান বাইটের মান প্রদান করে।

player.getBytesTotal():Number

বর্তমানে cued/লোড করা ভিডিওর লোড করা মোট বাইটের মান প্রদান করে।

player.getCurrentTime():Number

বর্তমানে cued/লোড করা ভিডিওর সময়ে বর্তমান অবস্থান ফেরত দেয়।

player.getDuration():Number

বর্তমানে cued/লোড করা ভিডিওর বর্তমান সময়কাল প্রদান করে।

player.getStartBytes():Number

বর্তমানে cued/লোড করা ভিডিওর স্টার্ট বাইট ফেরত দেয়।

player.setVolume(newVolume:Number):void

বর্তমানে cued/লোড করা ভিডিওর ভলিউম সেট করে।

player.getVolume():Number

বর্তমানে cued/লোড করা ভিডিওর বর্তমান ভলিউম প্রদান করে।

player.mute():void

বর্তমান ভলিউম সঞ্চয় করে এবং বর্তমানে cued/লোড করা ভিডিওর ভলিউম 0 এ পরিবর্তন করে।

player.unmute():void

নিঃশব্দ করা হলে বর্তমানে কিউড/লোড করা ভিডিওর ভলিউম শেষ সঞ্চিত মানটিতে ফিরিয়ে দেয়।

player.getEmbedCode():String

বর্তমানে cued/লোড করা ভিডিওর বর্তমান YouTube এম্বেড কোড প্রদান করে।

player.getVideoUrl():String

বর্তমানে cued/লোড করা ভিডিওর বর্তমান YouTube ভিডিও url প্রদান করে।

ঘটনা

YouTubeLoaderEvent.LOADED

ক্রোমলেস প্লেয়ার সফলভাবে লোড করা শেষ হয়ে গেলে এবং অপারেশন কলগুলি গ্রহণ করার জন্য প্রস্তুত হয়ে গেলে বরখাস্ত হয়৷

YouTubeLoaderEvent.STATE_CHANGE

যখনই খেলোয়াড়ের অবস্থা পরিবর্তন হয় তখনই বহিস্কার করা হয়। YouTubeLoader ক্লাস জাভাস্ক্রিপ্ট API নম্বরগুলিকে তাদের সম্পর্কিত স্ট্রিং মানগুলিতে অনুবাদ করে, YouTubeLoaderEvent ক্লাস বর্তমান ইভেন্টটিকে state নামক একটি ভেরিয়েবলে সঞ্চয় করে। সম্ভাব্য মানগুলি হল শুরু না করা, শেষ করা, চালানো, বিরতি দেওয়া, বাফারিং, ভিডিও cued৷ যখন SWF প্রথম লোড হয়, তখন এটি একটি শুরু না হওয়া ইভেন্ট সম্প্রচার করবে। যখন ভিডিওটি cued হয় এবং প্লে করার জন্য প্রস্তুত হয়, তখন এটি একটি ভিডিও cued ইভেন্ট সম্প্রচার করবে৷

YouTubeLoaderEvent.IO_ERROR

প্লেয়ারে কোনো ত্রুটি ঘটলে বহিস্কার করা হয়। দুটি ত্রুটি কোড সম্ভব: 100 সম্প্রচার করা হয় যখন অনুরোধ করা ভিডিও পাওয়া যায় না। এটি ঘটে যখন একটি ভিডিও সরানো হয় (কোন কারণে), বা এটি ব্যক্তিগত হিসাবে চিহ্নিত করা হয়৷ 101 সম্প্রচার করা হয় যখন অনুরোধ করা ভিডিও এমবেড করা প্লেয়ারগুলিতে প্লেব্যাকের অনুমতি দেয় না।

ডেমোতে নোট

প্রদর্শনের উদ্দেশ্যে আমরা এম্বেড করা ActionScript 3 র‍্যাপারের নীচে XHTML ফর্ম ক্ষেত্র, বোতাম এবং প্রদর্শন UI অন্তর্ভুক্ত করতে চেয়েছিলাম। একই সময়ে swf ফাইল এবং XHTML আপডেট করার জন্য, আমাদের 'deploy/_assets/js/' (চিত্র 3) এ অবস্থিত 'youTubeLoader.js' জাভাস্ক্রিপ্ট ফাইলের মধ্যে কোডের দুটি লাইন অন্তর্ভুক্ত করতে হয়েছিল। আপনি যখন এই ফাইলটিকে আপনার প্রকল্পে সংহত করবেন তখন আপনি নিম্নলিখিত দুটি লাইন [69, 79] সরাতে চাইবেন:

//------------------------------------
// SPECIAL YOUTUBE EVENT METHODS
//------------------------------------

function onYouTubePlayerReady(playerId) {

  if (checkObj()) {	
    obj.addEventListener("onStateChange", "onytplayerStateChange");
  };

  // PLEASE NOTE: For the purpose of this demo:
  // This calls a secondary method located in the index.html file allowing the html display to update.
  // You will most likely not need this, it's gross, remove this when you implement this code.
  secondaryOnYouTubePlayerReady(playerId);
}

function onytplayerStateChange(newState) {
    //alert("Player's new state: " + newState);
  obj.playerStateUpdateHandler(newState);

  // PLEASE NOTE: For the purpose of this demo:
  // This calls a secondary method located in the index.html file allowing the html display to update.
  // You will most likely not need this, it's gross, remove this when you implement this code.
  secondaryOnytplayerStateChange(newState)
}

ডেমো ফাইল এবং অন্তর্ভুক্ত অ্যাকশনস্ক্রিপ্ট লাইব্রেরিগুলি বিনামূল্যের সফ্টওয়্যার: আপনি GNU লেজার জেনারেল পাবলিক লাইসেন্সের শর্তাবলীর অধীনে এটিকে পুনরায় বিতরণ এবং/অথবা সংশোধন করতে পারেন। এই ফাইলগুলি এই আশায় বিতরণ করা হয় যে এটি কার্যকর হবে তবে কোনও ওয়ারেন্টি ছাড়াই।

উপসংহার

এই নিবন্ধটি, ডেমো এবং উত্স ফাইলগুলি আপনাকে আমাদের নিজস্ব প্রকল্পগুলির জন্য তৈরি করা র্যাপার লাইব্রেরি ব্যবহার করে অ্যাকশনস্ক্রিপ্ট 3 পরিবেশে ইউটিউব API এবং এম্বেড করা প্লেয়ারগুলিকে একীভূত করার জন্য একটি তুলনামূলকভাবে সহজ এবং নির্ভরযোগ্য সমাধানের একটি কঠিন ওভারভিউ প্রদান করবে৷ যেহেতু আমি অনেক কোড মন্তব্য করেছি, তাই লাইব্রেরিগুলি অন্বেষণ এবং পুনরায় ব্যবহার করা আদর্শভাবে মোটামুটি সোজা হবে। এটি সীমাবদ্ধতা ছাড়া নয়, এবং সর্বদা উন্নতি, পুনরায় ফ্যাক্টরিং এবং বর্ধনের জন্য জায়গা থাকে। আপনার যদি এই বিষয়ে কোন চিন্তা থাকে, তাহলে নির্দ্বিধায় আমার সাথে যোগাযোগ করুন।

লেখক বায়ো

ম্যাথিউ রিচমন্ড 14 বছরের ইন্টারেক্টিভ ডিজাইন, ডেভেলপমেন্ট এবং আর্কিটেকচারের অভিজ্ঞতা নিয়ে গর্ব করেছেন। স্টুডিওতে না থাকলে, তাকে স্কুল অফ ভিজ্যুয়াল আর্টসে ডিজিটাল ইলাস্ট্রেশন/ফটোগ্রাফি কৌশল এবং উন্নত অ্যাকশনস্ক্রিপ্ট শেখাতে দেখা যায়। ম্যাথিউ choppingblock.com- এর একজন প্রতিষ্ঠাতা অংশীদার এবং ডিজাইনার।