ด้วยการใช้ 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; } });
ในตัวอย่างโค้ดด้านล่าง เราคาดการณ์ว่าคุณกำลังใช้ 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');การอ้างอิงเหตุการณ์
คุณสามารถเรียกกลุ่มฟังก์ชั่นในการควบคุมโปรแกรมเล่นวิดีโอของคุณ หรือรับสถานะปัจจุบัน เช่น ตำแหน่งการเล่นปัจจุบัน
ฟังก์ชั่น | คำอธิบาย | อาร์กิวเมนต์ (ประเภท) |
---|---|---|
| เล่นวิดีโอ | |
| พักวิดีโอ | |
| ค้นหาตำแหน่งที่ระบุ |
|
| ปิดเสียงวิดีโอ | |
| เปิดเสียงวิดีโอ | |
|
| |
| ตั้งค่าระดับเสียงเป็นตัวเลขที่ระบุ ( |
|
| ส่งกลับระดับเสียงปัจจุบันของวิดีโอ ( | |
| ส่งกลับตำแหน่งเวลาของวิดีโอปัจจุบันเป็นหน่วยวินาที | |
| ส่งกลับระยะเวลาของวิดีโอเป็นหน่วยวินาที | |
| เพิ่มฟังก์ชั่นผู้ฟังสำหรับเหตุการณ์ที่ระบุ สำหรับรายละเอียดเกี่ยวกับเหตุการณ์ ให้ดูที่ส่วนการติดตามเหตุการณ์ ส่งกลับโทเค็นพร้อมกับวิธีการ |
|
เหตุการณ์ | คำอธิบาย |
---|---|
| เกิดขึ้นเมื่อวิดีโอเริ่มเล่น |
| เกิดขึ้นเมื่อพักวิดีโอ |
| เกิดขึ้นเมื่อวิดีโอเล่นจบ |
| เกิดขึ้นเมื่อวิดีโอเริ่มบัฟเฟอร์ |
| เกิดขึ้นเมื่อวิดีโอกลับคืนจากการบัฟเฟอร์ |
| เกิดขึ้นเมื่อเกิดข้อผิดพลาดกับวิดีโอ |