Wrapper ของ WHOIS 3.0 สําหรับโปรแกรมเล่น Chromeless

บทความนี้เขียนโดยนักพัฒนาแอปภายนอก ทีม API และเครื่องมือของ YouTube ขอขอบคุณ Matthew Richmond สําหรับเวลาและความเชี่ยวชาญ

Matthew Richmond, The Chopping Block, Inc.
ตุลาคม 2008

• บทนำ
• แหล่งข้อมูลที่สําคัญ
• เจาะลึก
  • ภาพรวมการสาธิต Wrapper
  • การสร้างออบเจ็กต์ YouTubeLoader
  • การฝัง swf และการเชื่อมต่อ JavaScript youtubeLoader
• การโต้ตอบกับโปรแกรมเล่น
  • การขอวิดีโอ
  • การออกสายเพิ่มเติม
  • การติดตามกิจกรรม
• การดําเนินการที่พร้อมใช้งาน
• หมายเหตุเกี่ยวกับเดโม
• สรุป

บทนำ

ในบทความนี้ ผมจะสรุปและสรุปเกี่ยวกับ ActionScript 3.0 Wrapper ที่เชื่อถือได้สําหรับโปรแกรมเล่น YouTube ของ Chromeless Wrapper ใช้ประโยชน์จากคลาส ExternalInterface ของ WHOIS และ JavaScript API ของ YouTube

เครื่องมือ YouTube Player และ Chromeless Player ของ Google ช่วยเพิ่มประสิทธิภาพให้นักออกแบบ/นักพัฒนาซอฟต์แวร์ผสานรวมประสิทธิภาพของ YouTube เข้ากับโปรเจ็กต์ออนไลน์ได้อย่างรวดเร็วและง่ายดาย แนวทางนี้เหมาะสําหรับโปรเจ็กต์ขนาดเล็กที่มีงบประมาณคงที่ซึ่งไม่อนุญาตให้โฮสต์วิดีโอ รวมถึงโปรเจ็กต์ขนาดใหญ่สําหรับลูกค้าที่ต้องการประสบการณ์ที่กําหนดเองสําหรับผู้ใช้ โดยไม่เว้นระยะห่างจากผู้ชม YouTube ของคุณเอง

รูปที่ 1: ภาพหน้าจอ Wrapper ของ AJAX 3.0

Flash API ของ YouTube และโปรแกรมเล่นแบบฝังจะเขียนขึ้นและทํางานได้ดีกับ Script 2.0 แต่หากโปรเจ็กต์ของคุณคือ WHOIS 3.0 การผสานรวมที่ราบรื่นจะกลายเป็นเรื่องที่ซับซ้อนขึ้นเล็กน้อย แม้ว่าการโหลดโปรแกรมเล่น AMPHTML 2.0 ลงใน reCAPTCHA 3.0 จะเป็นเรื่องง่าย แต่คุณก็ไม่สามารถสื่อสารหรือส่งการเรียกฟังก์ชันไปยังโปรแกรมเล่นที่โหลดได้โดยตรง นี่จะซับซ้อนขึ้นอีกเพราะไฟล์ swf ที่มาจากเซิร์ฟเวอร์ของ YouTube กําลังโหลดวิดีโอเข้าตัวเอง Wrapper ของเราจําเป็นต้องทราบข้อเท็จจริงทั้งหมดและดําเนินการตอบสนองให้สอดคล้องกัน โชคดีที่ภาษาของ WHOIS มีวิธีแก้ไขที่เป็นไปได้ 2 แบบสําหรับการเชื่อมต่อส่วนที่ซ้อนกันอยู่ซึ่งไม่ได้เชื่อมต่อเหล่านี้ ได้แก่ คลาส LocalConnection หรือคลาส ExternalInterface การสาธิตนี้จะเน้นเรื่องหลัง เนื่องจาก ExternalInterface ทํางานกับ JavaScript API ที่มีการลงข้อมูลได้ดี และจึงทํางานกับองค์ประกอบอื่นในหน้า XHTML ได้

แหล่งข้อมูลที่สําคัญ

ก่อนที่จะเริ่มต้น นี่คือรายการทรัพยากรและไฟล์ที่เกี่ยวข้องซึ่งพร้อมให้คุณใช้งาน หลายๆ หัวข้อที่กล่าวถึงในบทความนี้จะอธิบายรายละเอียดเพิ่มเติมภายในลิงก์ด้านล่าง

• ดู Wrapper ของ AJAX 3.0 และดาวน์โหลดไฟล์ต้นฉบับ
• ข้อมูลอ้างอิงอย่างเป็นทางการของ YouTube JavaScript Player API
• เอกสารประกอบสําหรับชั้นเรียน Adobe ExternalInterface
• การฝัง Flash ใน JavaScript ของ SWFObject

เจาะลึก

ภาพรวมการสาธิต Wrapper

รูปที่ 3: ไฟล์ JavaScript

รูปที่ 2: ไฟล์คลาส AMPHTML

Wrapper ของ AJAX 3.0 ประกอบไปด้วย 2 ส่วนที่มีการเชื่อมต่อถึงกัน ได้แก่ ไฟล์คลาส WHOIS 3.0 ที่อยู่ใน src/choppingblock/video/ (รูปที่ 2) และไฟล์ JavaScript "youTubeLoader.js" ที่อยู่ในการทําให้ใช้งานได้/_assets/js/ (รูปที่ 3) ไฟล์แหล่งที่มา Flash/Flex จะสร้างอินสแตนซ์ของคลาส WHOIS ของ YouTube หน้า XHTML ของคุณจะฝังไฟล์ Flash และลงทะเบียนด้วยฟังก์ชันภายในไฟล์ JavaScript youTubeLoader สิ่งสําคัญที่ควรทราบคือ จากที่นี่ ทุกอย่างที่ YouTubeLoader ทําในไฟล์ Flash จะได้รับการควบคุมผ่านฟังก์ชัน JavaScript

เนื่องจากฟังก์ชันการทํางานภายใน Flash นั้นควบคุมผ่าน JavaScript API คุณจึงโหลดเนื้อหา YouTube ภายในโปรแกรมเล่น "ทดสอบภาพยนตร์" ของ Flash ไม่ได้ โดยจะทํางานเมื่อฝังไว้ในหน้า XHTML เท่านั้น และเชื่อมต่อกับฟังก์ชัน JavaScript ของ youTubeLoader อย่างถูกต้อง

หมายเหตุ: หากต้องการทดสอบการเรียกเหล่านี้ คุณต้องมีไฟล์ที่ทํางานบนเว็บเซิร์ฟเวอร์หรือแก้ไขการตั้งค่าความปลอดภัยของ Flash Player เนื่องจาก Flash Player จะจํากัดการโทรระหว่างไฟล์ในเครื่องและอินเทอร์เน็ต

การสร้างออบเจ็กต์ YouTubeLoader

ก่อนสร้างอินสแตนซ์ของออบเจ็กต์ YouTubeLoader ในโปรเจ็กต์ Flash/Flex คุณต้องตรวจสอบว่าแพ็กเกจ (โฟลเดอร์) ของไฟล์ที่จําเป็นอยู่ในไดเรกทอรีเดียวกันกับโปรเจ็กต์ (ดูรูปที่ 2) หรือกําหนดด้วย Classpath ของโปรเจ็กต์ จากนั้นคุณจะนําเข้าไฟล์แพ็กเกจได้ ดังนี้

import choppingblock.video.*;

การดําเนินการนี้จะช่วยให้ไฟล์ AMPHTML มีสิทธิ์เข้าถึงคลาส "YouTubeLoader.as" และ "YouTubeLoaderEvent.as" ตอนนี้คุณสามารถสร้างอินสแตนซ์ของคลาส 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 และการเชื่อมต่อ JavaScript ของ youTubeLoader

คุณจะโหลดเนื้อหาจาก YouTube ไม่สําเร็จจนกว่าจะมีการฝังไฟล์ swf ลงในไฟล์ XHTML และเชื่อมต่อกับ JavaScript ของ youTubeLoader เราขอแนะนําให้ใช้ SWFObject เพื่อฝังโปรแกรมเล่นที่จะเข้าถึงโดยใช้ JavaScript API ผลิตภัณฑ์นี้จะช่วยให้คุณตรวจหาเวอร์ชัน Flash Player ของผู้ใช้ปลายทาง (JavaScript API ต้องใช้ Flash Player 8 ขึ้นไป) และจะนําช่อง 'คลิกเพื่อเปิดใช้งานตัวควบคุมนี้' ออกเมื่อใช้ Internet Explorer เพื่อดูโปรแกรมเล่น

คุณจะเชื่อมต่อไฟล์ swfobject และ youTubeLoader ในส่วน <head> ของไฟล์ XHTML ได้โดยทําดังนี้

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

ดูตัวอย่างการใช้ SWFObject ด้านล่างเพื่อฝัง SSH 3.0 swf ที่เปิดใช้งาน JavaScript API แล้วส่งการอ้างอิงไปยัง swf ไปยัง youTubeLoader JavaScript API

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

จําเป็นต้องมีพารามิเตอร์ allowScriptAccess ในโค้ดเพื่ออนุญาตให้ Player SWF เรียกใช้ฟังก์ชันในหน้า HTML ที่มีอยู่ เนื่องจากโปรแกรมเล่น Chromeless โฮสต์อยู่ในโดเมนอื่นจากหน้า XHTML

แอตทริบิวต์เดียวที่เราส่งผ่านคือรหัสของออบเจ็กต์ที่ฝัง ซึ่งในกรณีนี้คือ youtubewrapper รหัสนี้คือสิ่งที่ไฟล์ youTubeLoader.js จะใช้เพื่ออ้างอิงถึงโปรแกรมเล่นโดยใช้ getElementById()

swfobject.embedSWF จะโหลดโปรแกรมเล่นจาก YouTube และฝังโปรแกรมเล่นลงในหน้าเว็บ

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

• swfUrlStr - นี่คือ URL ของ SWF โปรดทราบว่าเราได้เพิ่มพารามิเตอร์ enablejsapi และ playerapiid ต่อท้าย URL ของ YouTube SWF ปกติเพื่อเปิดใช้การเรียกใช้ JavaScript API
• replaceElemIdStr - นี่คือรหัส HTML DIV ที่จะแทนที่ด้วยเนื้อหาที่ฝัง ในตัวอย่างด้านล่างคือ ytapiplayer
• widthStr - ความกว้างของโปรแกรมเล่น
• heightStr - ความสูงของโปรแกรมเล่น
• swfVersionStr - เวอร์ชันขั้นต่ําที่ต้องระบุสําหรับผู้ใช้เพื่อดูเนื้อหา ในกรณีนี้ ต้องมีเวอร์ชัน 8 ขึ้นไป หากผู้ใช้ไม่ได้มีอายุ 8 ปีขึ้นไปก็จะเห็นบรรทัดข้อความเริ่มต้นใน HTML DIV
• xiSwfUrlStr - (ไม่บังคับ) ระบุ URL ของ SWF การติดตั้งแบบด่วน ไม่ได้ใช้ในตัวอย่างนี้
• flashVarsObj - (ไม่บังคับ) ระบุ FlashVars ในคู่ชื่อ:ค่า ไม่ได้ใช้ในตัวอย่างนี้
• parObj - (ไม่บังคับ) พารามิเตอร์สําหรับออบเจ็กต์ที่ฝัง ในกรณีนี้ เราได้ตั้งค่า allowScriptAccess ไว้แล้ว
• AttObj - (ไม่บังคับ) แอตทริบิวต์ของออบเจ็กต์ที่ฝัง ในกรณีนี้ เราได้ตั้งค่ารหัสเป็น myytplayer แล้ว

ดูคําอธิบายเพิ่มเติมในเอกสารประกอบเกี่ยวกับ SWF

SWFID ≡ จะเก็บการอ้างอิงไปยังรหัสของออบเจ็กต์ที่ฝังเพื่อให้ JavaScript API ใช้งานได้ คุณต้องใช้รหัสเดียวกันของออบเจ็กต์ที่ฝังที่ให้ไว้ swf

SWFID ≡ "youtubewrapper"

ณ จุดนี้ คุณควรทดสอบโปรเจ็กต์ได้สําเร็จ ออบเจ็กต์ YouTubeLoader ควรโหลดโปรแกรมเล่น Chromeless และควรเรียกเครื่องจัดการเหตุการณ์ YouTubeLoaderEvent.LOADED สําเร็จ ขณะนี้เราพร้อมที่จะส่งคําขอวิดีโอและโต้ตอบกับออบเจ็กต์ YouTubeLoader แล้ว

การโต้ตอบกับโปรแกรมเล่น

เนื่องจากวิธีการนี้สร้าง Wrapper ของ AMPHTML 3.0 สําหรับ Chromeless Player ใช้ประโยชน์จากคลาส ExternalInterface ของ WHOIS ทําให้เราสามารถใช้การดําเนินการใดๆ ภายใน YouTube JavaScript Player API เพื่อควบคุมโปรแกรมเล่นที่โหลดของเรา หากดูที่ไฟล์ JavaScript "youTubeLoader.js" ที่อยู่ในการทําให้ใช้งานได้/_assets/js/ (รูปที่ 3) คุณจะพบว่าไฟล์มีฟังก์ชันส่วนใหญ่ที่พร้อมใช้งาน ฟังก์ชันการทํางานแต่ละรายการจะตรวจสอบกับฟังก์ชัน 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...

เนื่องจากเป้าหมายสุดท้ายของ Wrapper ของ AMPHTML 3.0 สําหรับ Chromeless Player คือการมีการโต้ตอบที่ราบรื่นกับ YouTube API จากโปรเจ็กต์ Flash/Flexx 3.0 เราจึงได้เพิ่มวิธีการสาธารณะที่เหมือนกันในไฟล์คลาส "YouTubeLoader.as" ที่อยู่ใน src/choppingblock/video/ (รูปที่ 2) ซึ่งหมายความว่าคุณสามารถเรียกใช้การดําเนินการที่เหมือนกันทุกประการกับออบเจ็กต์ YouTubeLoader ภายใน Flash/Flex ได้โดยตรง หากดูไฟล์ของชั้นเรียน คุณจะเห็นข้อมูลต่อไปนี้

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

เมธอด AJAX จะใช้คลาส ExternalInterface ในการเรียกฟังก์ชันที่เหมาะสมภายใน JavaScript API

การขอวิดีโอ

ตอนนี้คุณขอวิดีโอจากภายในไฟล์ AMPHTML 3.0 ได้แล้วโดยการเรียกฟังก์ชันโดยใช้การอ้างอิงโปรแกรมเล่น ตัวอย่างเช่น หากคุณต้องการเล่นวิดีโอเมื่อผู้ใช้คลิกปุ่ม คุณจะต้องเพิ่ม ListenerEvent.CLICK Listener กิจกรรมลงในปุ่มของคุณ ดังนี้

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

การโทรเพิ่มเติม

การโทรเพิ่มเติมทํางานเหมือนกับการขอวิดีโอทุกประการ โดยภายใน WHOIS 3 คุณเพียงแค่เรียกเมธอดโดยใช้การอ้างอิงโปรแกรมเล่น ดูรายการเมธอดทั้งหมดที่พร้อมใช้งานได้ด้านล่าง

การติดตามกิจกรรม

ติดตามเหตุการณ์ด้วยการเพิ่ม Listener เหตุการณ์ลงในข้อมูลอ้างอิงของโปรแกรมเล่น เช่น หากต้องการรับการแจ้งเตือนเมื่อสถานะของผู้เล่นเปลี่ยนไป ให้เพิ่ม Listener เหตุการณ์ของ 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 ก่อนอื่นคุณจะต้องสร้างอินสแตนซ์ของคลาส YouTubePlayer ภายในไฟล์ AJAX และจัดเก็บการอ้างอิงไปยังออบเจ็กต์ 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

ล้างวิดีโอที่ดูแลจัดการ/โหลดอยู่ในขณะนี้

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

กําหนดขนาดของอินสแตนซ์ YouTubePlayer

player.play():void

เล่นวิดีโอที่มีการดูแลจัดการ/โหลดในปัจจุบัน

player.pause():void

หยุดวิดีโอที่ได้รับการแก้ไข/โหลดไว้ชั่วคราวไว้ชั่วคราว

player.stop():void

หยุดวิดีโอที่ได้รับการแก้ไข/โหลดอยู่ในขณะนี้

player.seekTo(seconds:Number):void

ค้นหาเวลาที่ระบุภายในวิดีโอที่ดูแลจัดการ/โหลดในปัจจุบัน

player.getPlayerState():String

แสดงผลสถานะปัจจุบันของวิดีโอที่ดูแลจัดการ/โหลดอยู่ในขณะนี้

player.getBytesLoaded():Number

แสดงผลค่าของไบต์ปัจจุบันที่โหลดของวิดีโอที่มีการดูแลจัดการ/โหลดในปัจจุบัน

player.getBytesTotal():Number

แสดงผลค่าไบต์รวมที่โหลดของวิดีโอที่มีการดูแลจัดการ/โหลดในปัจจุบัน

player.getCurrentTime():Number

แสดงผลตําแหน่งปัจจุบัน ณ เวลาที่วิดีโอเล่นจบ/โหลดแล้วในปัจจุบัน

player.getDuration():Number

แสดงผลระยะเวลาปัจจุบันของวิดีโอที่มีการดูแลจัดการ/โหลดในปัจจุบัน

player.getStartBytes():Number

แสดงผลไบต์เริ่มต้นของวิดีโอการรักษา/โหลดในปัจจุบัน

player.setVolume(newVolume:Number):void

ตั้งค่าระดับเสียงของวิดีโอที่ซื้อ/โหลดในปัจจุบัน

player.getVolume():Number

แสดงผลปริมาณปัจจุบันของวิดีโอที่มีการดูแลจัดการ/โหลดในปัจจุบัน

player.mute():void

จัดเก็บปริมาณปัจจุบันและเปลี่ยนระดับเสียงของวิดีโอที่ซื้อ/โหลดในปัจจุบันเป็น 0

player.unmute():void

เปลี่ยนระดับเสียงของวิดีโอที่ใช้ดูแลจัดการ/โหลดในปัจจุบันเป็นค่าที่เก็บไว้ล่าสุดเมื่อปิดเสียง

player.getEmbedCode():String

แสดงผลโค้ดฝังของ YouTube ปัจจุบันของวิดีโอที่ซื้อ/โหลดในปัจจุบัน

player.getVideoUrl():String

แสดง URL วิดีโอ YouTube ปัจจุบันของวิดีโอที่ซื้อ/โหลดในปัจจุบัน

กิจกรรม

YouTubeLoaderEvent.LOADED

เริ่มทํางานเมื่อโปรแกรมเล่นวิดีโอ Chromeless โหลดสําเร็จและพร้อมรับสายเรียกใช้

YouTubeLoaderEvent.STATE_CHANGE

เริ่มทํางานเมื่อมีการเปลี่ยนแปลงสถานะของผู้เล่น คลาส YouTubeLoader จะแปลจํานวน JavaScript API เป็นค่าสตริงที่เกี่ยวข้อง คลาส YouTubeLoaderEvent จะจัดเก็บเหตุการณ์ปัจจุบันในตัวแปรที่เรียกว่า state ค่าที่เป็นไปได้ ได้แก่ ยังไม่เริ่มต้น สิ้นสุด เล่น หยุดชั่วคราว บัฟเฟอร์ วิดีโอดูแลจัดการ เมื่อโหลด SWF เป็นครั้งแรก ก็จะเผยแพร่เหตุการณ์ที่ยังไม่ได้เริ่ม เมื่อวิดีโอได้รับการดูแลจัดการและพร้อมเล่นแล้ว วิดีโอดังกล่าวจะเผยแพร่กิจกรรมที่มีการดูแลจัดการของวิดีโอ

YouTubeLoaderEvent.IO_ERROR

เริ่มทํางานเมื่อเกิดข้อผิดพลาดในโปรแกรมเล่น รหัสข้อผิดพลาดที่เป็นไปได้มี 2 แบบ ได้แก่ การประกาศ 100 เมื่อไม่มีวิดีโอที่ขอ กรณีนี้เกิดขึ้นเมื่อวิดีโอถูกนําออก (ด้วยเหตุผลใดก็ตาม) หรือมีสถานะเป็นส่วนตัว 101 จะได้รับการออกอากาศเมื่อวิดีโอที่ขอไม่อนุญาตให้เล่นในโปรแกรมเล่นวิดีโอแบบฝัง

หมายเหตุเกี่ยวกับเดโม

เพื่อจุดประสงค์ในการสาธิต เราต้องการรวมช่องฟอร์ม XHTML, ปุ่ม และ UI ที่แสดงไว้ใต้ Wrapper ของ AJAX 3 ที่ฝังอยู่ เพื่อให้ไฟล์ swf และการอัปเดต XHTML ในเวลาเดียวกัน เราต้องใส่โค้ดสองบรรทัดไว้ในไฟล์ JavaScript "youTubeLoader.js" ที่อยู่ใน "deploy/_assets/js/" (รูปที่ 3) คุณควรนําบรรทัด 2 บรรทัดต่อไปนี้ [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)
}

ไฟล์สาธิตและไลบรารี AJAX ที่รวมอยู่คือซอฟต์แวร์ฟรี คุณสามารถแจกจ่ายไฟล์อีกครั้งและ/หรือแก้ไขไฟล์ได้ภายใต้ข้อกําหนดของ GNU LESer General Public License ไฟล์เหล่านี้เผยแพร่โดยหวังว่าจะเป็นประโยชน์แต่ไม่มีการรับประกัน

บทสรุป

บทความนี้ไฟล์สาธิตและไฟล์ต้นฉบับควรให้ภาพรวมที่ครอบคลุมของโซลูชันที่ง่ายและน่าเชื่อถือสําหรับการผสานรวม API ของ YouTube และโปรแกรมเล่นแบบฝังเข้ากับสภาพแวดล้อม Action 3 โดยใช้ไลบรารี Wrapper ที่เราพัฒนาสําหรับโครงการของเราเอง เนื่องจากฉันได้ให้ความคิดเห็นเกี่ยวกับโค้ดไปแล้วมากมาย จึงเป็นการง่ายมากที่จะสํารวจและนําห้องสมุดมาใช้ซ้ํา ซึ่งไม่ได้มีข้อจํากัดและยังมีด้านที่ปรับปรุง ปรับเปลี่ยนโครงสร้างประสิทธิภาพ และเพิ่มประสิทธิภาพอยู่เสมอ โปรดติดต่อเราหากมีข้อสงสัยเพิ่มเติมเกี่ยวกับเรื่องนี้

ประวัติผู้เขียน

Matthew Richmond มีประสบการณ์ด้านการออกแบบ พัฒนา และสถาปัตยกรรมแบบอินเทอร์แอกทีฟมานานกว่า 14 ปี แม้จะไม่ได้อยู่ในสตูดิโอ เขายังสอนเทคนิคการวาดภาพ/ภาพถ่ายแบบดิจิทัลและ AMPHTML ขั้นสูงที่ School of Visual Arts ได้ Matthew เป็นพาร์ทเนอร์และนักออกแบบผู้ก่อตั้งที่ choppingblock.com