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

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

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

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

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

เจาะลึก

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

ภาพที่ 3: ไฟล์ JavaScript

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

Wrapper ของ ActionScript 3.0 ประกอบด้วยส่วนที่เกี่ยวข้องกัน 2 ส่วน ได้แก่ ไฟล์คลาส ActionScript 3.0 ซึ่งอยู่ใน src/choppingblock/video/ (รูปที่ 2) และไฟล์ JavaScript "youTubeLoader.js" ซึ่งอยู่ใน deploy/_assets/js/ (รูปที่ 3) ไฟล์ต้นทาง Flash/Flex จะสร้างอินสแตนซ์ของคลาส ActionScript ของ YouTubeLoader หน้า 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.*;

ซึ่งจะช่วยให้ไฟล์ 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 ที่มี เนื่องจากโปรแกรมเล่น Chromeless โฮสต์อยู่ในโดเมนอื่นจากหน้า XHTML

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

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

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

SWFID ≡ "youtubewrapper"

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

การโต้ตอบกับผู้เล่น

เนื่องจากแนวทางในการสร้าง Wrapper ของ ActionScript 3.0 สำหรับเพลเยอร์ Chrome แบบไม่ใช้ 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 อย่างราบรื่นจากภายในโปรเจ็กต์ Flash/Flex ภาษา ActionScript 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...

เมธอด 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 ในเวลาเดียวกัน เราต้องใส่โค้ดสองบรรทัดในไฟล์ 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)
}

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

บทสรุป

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

ประวัติผู้แต่ง

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