ActionScript 3.0 Wrapper สำหรับโปรแกรมเล่นที่ไม่มี Chrome

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

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

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

บทนำ

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

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

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

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

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

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

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

เจาะลึก

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

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

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

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

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

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

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

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

import choppingblock.video.*;

ซึ่งจะช่วยให้ไฟล์ ActionScript เข้าถึงคลาส "YouTubeLoader.as" และ "YouTubeLoaderEvent.as" ได้ ตอนนี้คุณก็เข้าใจในการสร้างอินสแตนซ์ของคลาส YouTubeLoader และ Listener เหตุการณ์ที่จำเป็นแล้ว ดังนี้

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 เพื่อดูโปรแกรมเล่น

ภายในส่วน <head> ของไฟล์ XHTML คุณเชื่อมต่อไฟล์ swfobject และ youTubeLoader:

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

ดูตัวอย่างการใช้ SWFObject เพื่อฝัง ActionScript 3.0 swf ที่มี JavaScript API เปิดอยู่ จากนั้นส่งการอ้างอิง swf ของคุณไปยัง JavaScript API ของ youTubeLoader

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

ดูคำอธิบายเพิ่มเติมได้ในเอกสารประกอบ SWFObject

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

SWFID ≡ "youtubewrapper"

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

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

เนื่องจากแนวทางการสร้าง Wrapper ของ ActionScript 3.0 สําหรับโปรแกรมเล่นแบบไม่ใช้ Chrome นี้ใช้ประโยชน์จากคลาส ExternalInterface ของ ActionScript เราจึงใช้การดำเนินการใดก็ได้ภายใน YouTube JavaScript Player API เพื่อควบคุมโปรแกรมเล่นที่โหลด หากดูภายในไฟล์ JavaScript "youTubeLoader.js" ซึ่งอยู่ใน deploy/_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 ของ ActionScript 3.0 สำหรับโปรแกรมเล่น Chrome คือการนำเสนอการโต้ตอบที่ราบรื่นกับ YouTube API จากภายในโปรเจ็กต์ ActionScript 3.0 Flash/Flex เราจึงได้เพิ่มเมธอดสาธารณะเดียวกันนี้ลงใน "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...

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

การขอวิดีโอ

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

การสมัครรับข้อมูลเหตุการณ์

สมัครรับเหตุการณ์ด้วยการเพิ่ม 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 ภายในไฟล์ ActionScript และจัดเก็บการอ้างอิงไปยังออบเจ็กต์ 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

เรียกใช้เมื่อผู้เล่นแบบไม่มี Chrome โหลดเสร็จเรียบร้อยแล้วและพร้อมรับการเรียกใช้การดำเนินการ

YouTubeLoaderEvent.STATE_CHANGE

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

YouTubeLoaderEvent.IO_ERROR

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

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

สำหรับการสาธิต เราต้องการรวมฟิลด์ของฟอร์ม XHTML, ปุ่ม และ UI การแสดงผลใต้ Wrapper ActionScript 3 ที่ฝัง เพื่อให้มีไฟล์ swf และอัปเดต XHTML ในเวลาเดียวกัน เราต้องรวมโค้ดสองบรรทัดไว้ในแท็ก 'youTubeLoader.js' ไฟล์ JavaScript ที่อยู่ใน "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)
}

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

บทสรุป

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

ประวัติส่วนตัวของผู้แต่ง

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