مشغل الفيديو المضمن والفيديو المباشر

يتيح لك مشغل الفيديو المضمن إضافة مقاطع فيديو على فيسبوك ومقاطع فيديو بث مباشر على فيسبوك إلى موقعك على الويب بسهولة. ويمكنك استخدام أي منشور فيديو عام تم نشره من صفحة أو شخص كمصدر فيديو أو كمصدر فيديو بث مباشر.

أداة تكوين مشغل الفيديو المضمننموذج الرمز البرمجيالإعداداتإضافة الرمز يدويًا

الخطوات التفصيلية

1. اختيار عنوان URL أو صفحة

اختر عنوان URL لمقطع فيديو فيسبوك تريد تضمينه.

2. أداة تكوين الرموز

الصق عنوان URL في أداة تكوين الرموز ثم انقر على الزر "الحصول على الرمز" لإنشاء رمز مشغل الفيديو المضمن.

3. نسخ جزء رمز HTML البرمجي ولصقه

انسخ جزء الرمز البرمجي والصقه داخل رموز HTML بموقع الويب المقصود.

أداة تكوين مشغل الفيديو المضمن

عنوان URL للفيديو
عرض بيكسل الفيديو

مثال للرمز البرمجي بالكامل

انسخ نموذج الرمز والصقه بموقعك على الويب. اضبط قيمة data-href بوضع عنوان URL لمقطع الفيديو. تحكم في حجم المشغل باستخدام السمة data-width.

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

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

الإعدادات

لا تشتمل أداة التكوين الموضحة أعلاه على كل الإعدادات الممكنة لمشغل الفيديو المضمن. ويمكنك أيضًا تغيير الإعدادات التالية:

الإعداد الوصف القيمة الافتراضية

data-href

عنوان URL المطلق لمقطع الفيديو.

n/a

data-allowfullscreen

يسمح بعرض مقطع الفيديو في وضع ملء الشاشة. على سبيل المثال false أو true.

false

data-autoplay

يبدأ تلقائيًا تشغيل مقطع الفيديو عند تحميل الصفحة. يتم عرض الفيديو دون صوت (كتم الصوت). يمكن للأشخاص تشغيل الصوت من خلال عناصر التحكم الموجودة بالمشغل. لا ينطبق هذا الإعداد على الأجهزة المحمولة. على سبيل المثال false أو true.

false

data-width

عرض حاوية الفيديو. الحد الأدنى 220px.

auto

data-show-text

قم بالتعيين على true لتضمين النص من منشور فيسبوك المرتبط بالفيديو، إن وجد. لا تتوفر إلا لمواقع ويب أجهزة الكمبيوتر.

false

data-show-captions

قم بالتعيين على true لعرض الشروحات التعليقية (إذا كانت متوفرة) تبعًا للإعدادات الافتراضية. لا تتوفر الشروحات التعليقية إلا على أجهزة الكمبيوتر.

false

نموذج تكوين

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

الحصول على الرمز من منشور فيديو

1. الانتقال إلى منشور الفيديو

إذا نشرت مقطع فيديو عام (راجع الأسئلة المتكررة)، يمكنك الحصول على رمز التضمين مباشرة من منشور الفيديو نفسه.

اختر Embed Video من قائمة الخيارات:

أو عند مشاهدة الفيديو بطريقة عرض ملء الصفحة، حدد الزر Embed Video من أسفل اليسار:

للصفحات فقط

عند نشر مقطع فيديو عام على صفحة (راجع الأسئلة المتكررة)، يمكنك الحصول على رمز التضمين مباشرة من اليوميات. انقر على الرمز الذي يظهر في الزاوية العلوية اليسرى للمنشور على فيسبوك.

اختر Embed Video من القائمة المنسدلة: (للصفحات فقط)

2. نسخ الرمز ولصقه

سيظهر مربع حوار به رمز تضمين منشور الفيديو. انسخ هذا الرمز والصقه في صفحة الويب في المكان الذي تريد ظهور الفيديو به.

للتعرف على التفاصيل الفنية، يرجى الرجوع إلى قسم إضافة الرمز يدويًا

إضافة الرمز يدويًا

بالإضافة إلى أداة إنشاء الرموز، يمكنك أيضًا تضمين الرمز يدويًا.

1. الحصول على عنوان URL لمنشور الفيديو

يجب أولاً الحصول على عنوان URL لمنشور الفيديو الذي تريد مشاركته. يجب أن يكون منشور الفيديو عامًا (راجع الأسئلة المتكررة)، وهو ما يشار إليه برمز الكرة الأرضية رمادي اللون، الموجود بجوار توقيت نشر المنشور:

يمكنك استخدام نموذج عنوان URL هذا لأغراض الاختبار:

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2. تحميل JavaScript SDK

لاستخدام المكون الإضافي لتضمين مشغل الفيديو، أو أي مكون إضافي اجتماعي، ستحتاج لإضافة JavaScript SDK لفيسبوك إلى موقعك على الويب. يجب تحميل مجموعة SDK مرة واحدة فقط بالصفحة، والأفضل أن يكون ذلك بعد علامة <body> الافتتاحية:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

يمكنك العثور على مزيد من المساعدة لتنفيذ JavaScript SDK في JavaScript SDK - البدء السريع.

3. وضع علامة مشغل الفيديو المضمن

بعد ذلك، ضع علامة مشغل الفيديو المضمن في أي مكان بموقعك على الويب، وضع عنوان URL لمنشورك مكان {your-video-post-url} .

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. الاختبار

بعد إكمال هذه الخطوات، ستتمكن من اختبار مشغل الفيديو المضمن. سيبدو التكامل عند اكتماله على نحو مشابه لهذا:

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

تظهر نتيجة نموذج الاختبار في لقطة الشاشة أدناه.

5. التخصيص

اتبع التعليمات التي سيتم توضيحها لاحقًا في هذه الصفحة لضبط الحجم واللغة والإعدادات الأخرى.

الحصول على عنوان URL لمنشور الفيديو

يمكن أن يتطلب الأمر في بعض الحالات إنشاء رمز تضمين بواسطة CMS ولن تحتاج إلا لعنوان URL المجرد للمنشور. هناك طريقتان للحصول على عنوان URL للمنشور:

  1. نسخ عنوان URL للرابط الثابت من شريط عنوان المتصفح.
  2. النقر بزر الماوس الأيمن على وقت نشر المنشور ونسخ عنوان الرابط.

ولقد تم تمييز الطريقتين باللون الأحمر في لقطة الشاشة التالية.

عبر Graph API

إذا كنت تريد دمج مشغلات الفيديو المضمنة تلقائيًا في موقعك على الويب، فعلى الأرجح يمكنك استخدام Graph API لجمع مقاطع الفيديو. على سبيل المثال، يمكنك استخدام نقطة نهاية API لمقاطع فيديو الصفحة، والتي ترسل استجابة لطلبك إلى /{page-id}/videos بالتنسيق التالي (مختصر):

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

للحصول على عنوان URL للفيديو:

استخدم قيمة id لإنشاء عنوان URL وفقًا للبنية:

"https://www.facebook.com/video.php?v={id}"

لا تستخدم الخاصية embed_html لتضمين مقاطع الفيديو. للحصول على مزيد من المعلومات عن هذا الموضوع، يرجى الرجوع إلى قسم الأسئلة المتكررة

التنسيق على أجهزة الكمبيوتر

يمكنك ضبط عرض مشغل الفيديو المضمن على أجهزة الكمبيوتر عبر سمة data-width في علامة مشغل الفيديو المضمن على النحو الوارد بالمثال التالي. يجب أن تكون القيمة 220 على الأقل. لا يوجد حد للقيمة العليا، ورغم ذلك لن يزيد حجم المشغل عن العنصر الأصلي.

لا تستخدم علامات نمط CSS لضبط حجم المكونات الإضافية. حيث قد يؤدي ذلك إلى حدوث أخطاء في العرض.

<!-- WRONG! -->
<style type="text/css">
.fb-video {
  width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

ملء الشاشة

يمكنك إضافة الخاصية data-allowfullscreen="true" للسماح بتشغيل الفيديو في وضع ملء الشاشة.

التنسيق على ويب الهاتف المحمول

على ويب الهاتف المحمول، يتم ضبط حجم مشغل الفيديو المضمن تلقائيًا حسب العرض الداخلي للعنصر الأصلي.

ضبط اللغة

يمكنك ضبط لغة المكون الإضافي لمشغل الفيديو المضمن بتحميل الإصدار المحلي لمجموعة Facebook JavaScript SDK. عند تحميل مجموعة SDK، اضبط قيمة js.src لاستخدام اللغة التي تريدها: وما عليك إلا وضع رمز اللغة التي تريدها محل en_US، على سبيل المثال fr_FR للغة الفرنسية (فرنسا):

js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.5";

اللغات المدعومة موضحة في ملف لغات فيسبوك بتنسيق XML. وقد يتطلب الأمر ضبط عرض المكون الإضافي للتواصل الاجتماعي حتى يتوافق مع اللغات المختلفة. يمكنك العثور على المزيد من المعلومات في صفحة التطويع المحلي والترجمة.

Wordpress

إذا كنت تستخدم Facebook SDK للغة JavaScript مع موقع تم إنشاؤه من خلال Wordpress، يمكنك استخدام المكون الإضافي لمشغل الفيديو المضمن من خلال إضافة علامة fb-video إلى منشورك:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

في حالة عدم استخدام مجموعة Facebook SDK للغة JavaScript وكنت تقوم بتضمين الفيديو عبر نسخ جزء من الرمز البرمجي ولصقه، والذي يمكنك الحصول عليه من منشور الفيديو، فلن يتم على الأرجح عرض المكون الإضافي لمشغل الفيديو المضمن حيث يقوم Wordpress بتحويل كل علامات & إلى #038; وبالتالي يتعطل المُشغل.

بدلاً من ذلك، استخدم الرمز التالي لإضافة المكون الإضافي:

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v2.5'
  });
  }; (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

يتم قريبًا إطلاق ميزة تكامل جديدة وسهلة مع Wordpress.

الأسئلة المتكررة

هل يمكنني استخدام خاصية embed_html لواجهة Graph API video؟

لا، لا ينبغي استخدام الخاصية embed_html. ويجب استخدم المكون الإضافي لمشغل الفيديو المضمن بدلاً منها!

حول خاصية embed_html:

تعرض نقطة نهاية Graph APIvideo خاصية بالاسم embed_html. وتحتوي قيمة هذه الخاصية على عنصر HTML يمكن تضمينه في صفحة الويب لتشغيل الفيديو المطلوب.

ويجب عدم الخلط بين هذه القيمة وبين المكون الإضافي لمشغل الفيديو المضمن. نوصي بعدم استخدام هذه الخاصية بعد الآن - واستخدام المكون الإضافي لمشغل الفيديو المضمن بدلاً من ذلك!

إذا كنت تستخدم قيمة خاصية embed_html، فإن مشغل الفيديو:

  • لن يعمل على الهواتف المحمولة والأجهزة اللوحية
  • لن يحتوي على أي معلومات إضافية مثل المشاهدات، وعنوان الفيديو، إلخ.

مثال على خاصية embed_html (تم إيقاف العمل بها):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}