باستخدام واجهة 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; } });
في عينة من الرمز البرمجي الموضح أدناه، نفترض أنك تستخدم معرف تطبيق عند بدء تشغيل مجموعة Facebook SDK للغة JavaScript. وإذا لم يكن لديك معرف تطبيق حتى الآن، يمكنك قراءة المستندات المتوفرة حول إنشاء معرف تطبيق.
في عينة من الرمز البرمجي الموضح أدناه، استبدل المعرف {your-app-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');مرجع الحدث
يمكنك استدعاء مجموعة وظائف للتحكم في مشغل الفيديو أو معرفة حالته الحالية، على سبيل المثال: موضع التشغيل الحالي.
الوظيفة | الوصف | الوسيطات (النوع) |
---|---|---|
| يمكن تشغيل الفيديو. | |
| يمكن إيقاف تشغيل الفيديو مؤقتًا. | |
| يمكن الانتقال إلى موضع محدد. |
|
| يمكن كتم صوت الفيديو. | |
| يمكن إلغاء كتم صوت الفيديو. | |
| علمًا بأنه تظهر القيمة | |
| يمكن تعيين مستوى الصوت إلى الرقم المحدد ( |
|
| يمكن عرض مستوى الصوت الحالي للفيديو ( | |
| يمكن عرض موضع وقت الفيديو الحالي بالثواني. | |
| يمكن عرض مدة الفيديو بالثواني. | |
| يمكن إضافة وظيفة مستمع إلى الحدث المحدد. للحصول على تفاصيل حول الأحدث، يرجى الرجوع إلى القسم الاشتراك في الأحداث. يمكن عرض رمز مميز من خلال أسلوب |
|
الحدث | الوصف |
---|---|
| يمكن إطلاقه عند بدء تشغيل الفيديو. |
| يمكن إطلاقه عند إيقاف الفيديو مؤقتًا. |
| يمكن إطلاقه عند إكمال تشغيل الفيديو. |
| يمكن إطلاقه عند بدء تخزين الفيديو مؤقتًا. |
| يمكن إطلاقه عند استعادة الفيديو من التخزين المؤقت. |
| يمكن إطلاقه عند حدوث خطأ بالفيديو. |