واجهة 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. مثال على الرمز البرمجي بالكامل

في عينة من الرمز البرمجي الموضح أدناه، نفترض أنك تستخدم معرف تطبيق عند بدء تشغيل مجموعة 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');

مرجع الحدث

مرجع عناصر التحكم في المشغل

الوظيفة	الوصف	الوسيطات (النوع)
`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`	يمكن إطلاقه عند حدوث خطأ بالفيديو.