API โปรแกรมเล่นวิดีโอแบบฝัง

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

ทำตามส่วนด้านล่างเพื่อเริ่มต้นใช้งาน

การตั้งค่า
การควบคุมโปรแกรมเล่น
ติดตามเหตุการณ์
การอ้างอิงการควบคุมโปรแกรมเล่น

การตั้งค่า

1. กำหนดค่าปลั๊กอิน

อ่านเอกสารเกี่ยวกับโปรแกรมเล่นวิดีโอแบบฝัง เพื่อเรียนรู้เกี่ยวกับวิธีการตั้งค่าปลั๊กอิน

2. รับอินสแตนซ์ API โปรแกรมเล่นวิดีโอแบบฝัง

เพื่อรับอินสแตนซ์ API โปรแกรมเล่นวิดีโอแบบฝัง ให้ฟัง xfbml.ready หากข้อความ type เป็น video เหตุการณ์ ready เกิดขึ้นจากโปรแกรมเล่นวิดีโอแบบฝัง

var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video') {
    my_video_player = msg.instance;
  }
});

3. ตัวอย่างโค้ดแบบเต็ม

ในตัวอย่างโค้ดด้านล่าง เราคาดการณ์ว่าคุณกำลังใช้ ID ของแอพในขณะที่เริ่ม Facebook SDK สำหรับ JavaScript หากคุณยังไม่มี ID ของแอพ ให้อ่านเอกสารสำหรับการสร้าง ID ของแอพ

ในตัวอย่างโค้ดด้านล่าง ให้แทนที่ {your-app-id} ด้วย ID ของแอพของคุณและแทนที่ data-href ด้วย URL วิดีโอของคุณ ตรวจสอบให้แน่ใจว่าคุณได้ตรวจสอบเหตุการณ์ xfbml.ready หลังจากเรียกฟังก์ชั่น FB.init()

<html>
<head>
  <title>Your Website Title</title>
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '{your-app-id}',
        xfbml      : true,
        version    : 'v3.2'
      });
    
      // Get Embedded Video Player API Instance
      var my_video_player;
      FB.Event.subscribe('xfbml.ready', function(msg) {
        if (msg.type === 'video') {
          my_video_player = msg.instance;
        }
      });
    };
  </script>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

  <!-- Your embedded video player code -->
  <div  
    class="fb-video" 
    data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
    data-width="500" 
    data-allowfullscreen="true"></div>

</body>
</html>

การจัดการหลายโปรแกรมเล่น

หากคุณใช้หลายโปรแกรมในเพจเดียวกัน คุณสามารถระบุโปรแกรมเล่นวิดีโอโดยการเพิ่มแอตทริบิวต์ id ให้กับแท็กโปรแกรมเล่นวิดีโอ และตรวจสอบ id ในอ็อบเจ็กต์ msg:

<div id="my-video-player-id" ... />
<script>
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video' && msg.id === 'my-video-player-id') {
     // True for <div id="my-video-player-id" ...
     my_video_player = msg.instance;
  }
});
</script>

การควบคุมโปรแกรมเล่น

คุณสามารถเรียกกลุ่มฟังก์ชั่นในการควบคุมโปรแกรมเล่นวิดีโอของคุณ หรือรับสถานะปัจจุบัน เช่น ตำแหน่งการเล่นปัจจุบัน

ตัวอย่างการใช้

// Start video playback
my_video_player.play();

// Check whether video is muted
if (my_video_player.isMuted()) {
  // Video is muted
}

// Jump to second 5 of the video
my_video_player.seek(5);

การอ้างอิงการควบคุมโปรแกรมเล่น

การติดตามเหตุการณ์

ฟังก์ชั่น subscribe() จะเพิ่มฟังก์ชั่นผู้ฟังสำหรับเหตุการณ์ที่ระบุ เช่น startedPlaying

var myEventHandler = my_video_player.subscribe('startedPlaying', function(e) {
  // Video started playing ...
});

ลบการติดตามเหตุการณ์

ฟังก์ชั่น subscribe() จะส่งกลับโทเค็นพร้อมกับวิธีการ release ที่เมื่อถูกเรียกจะลบผู้ฟังออกจากเหตุการณ์อีกครั้ง

myEventHandler.release('startedPlaying');

การอ้างอิงเหตุการณ์

การอ้างอิงการควบคุมโปรแกรมเล่น

ฟังก์ชั่น	คำอธิบาย	อาร์กิวเมนต์ (ประเภท)
`play()`	เล่นวิดีโอ
`pause()`	พักวิดีโอ
`seek(seconds)`	ค้นหาตำแหน่งที่ระบุ	`seconds` (`number`)
`mute()`	ปิดเสียงวิดีโอ
`unmute()`	เปิดเสียงวิดีโอ
`isMuted()`	`true` หากวิดีโอถูกปิดเสียง `false` หากไม่ได้ปิดเสียง
`setVolume(volume)`	ตั้งค่าระดับเสียงเป็นตัวเลขที่ระบุ (`float` ปรับขนาดจาก `0` เป็น `1`)	`volume` (`float`)
`getVolume()`	ส่งกลับระดับเสียงปัจจุบันของวิดีโอ (`float` ปรับขนาดจาก `0` เป็น `1`)
`getCurrentPosition()`	ส่งกลับตำแหน่งเวลาของวิดีโอปัจจุบันเป็นหน่วยวินาที
`getDuration()`	ส่งกลับระยะเวลาของวิดีโอเป็นหน่วยวินาที
`subscribe(event, eventCallback)`	เพิ่มฟังก์ชั่นผู้ฟังสำหรับเหตุการณ์ที่ระบุ สำหรับรายละเอียดเกี่ยวกับเหตุการณ์ ให้ดูที่ส่วนการติดตามเหตุการณ์ ส่งกลับโทเค็นพร้อมกับวิธีการ `release` ที่เมื่อถูกเรียกจะลบผู้ฟังออกจากเหตุการณ์อีกครั้ง	`event` (`string`), `eventCallback` (`function`)

การอ้างอิงเหตุการณ์

เหตุการณ์	คำอธิบาย
`startedPlaying`	เกิดขึ้นเมื่อวิดีโอเริ่มเล่น
`paused`	เกิดขึ้นเมื่อพักวิดีโอ
`finishedPlaying`	เกิดขึ้นเมื่อวิดีโอเล่นจบ
`startedBuffering`	เกิดขึ้นเมื่อวิดีโอเริ่มบัฟเฟอร์
`finishedBuffering`	เกิดขึ้นเมื่อวิดีโอกลับคืนจากการบัฟเฟอร์
`error`	เกิดขึ้นเมื่อเกิดข้อผิดพลาดกับวิดีโอ