#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

amp-youtube

Description

Displays a YouTube video.

Required Scripts

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

يعرض المكّوِن فيديو YouTube.

النص البرمجي المطلوب <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
التنسيقات المعتمدة fill وfixed وfixed-height وflex-item وnodisplay وresponsive
أمثلة مثال توضيحي لترميز amp-youtube

[جدول المحتويات]

مثال

باستخدام التنسيق المتجاوب، يجب أن يوفر العرض والارتفاع الواردين في المثال تنسيقات مناسبة للفيديوهات التي تبلغ نسبة العرض إلى الارتفاع لها 9:16:

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>
<amp-youtube
    id="myLiveChannel"
    data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
    width="358"
    height="204"
    layout="responsive">
  <amp-img
    src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
    placeholder
    layout="fill"
    />
</amp-youtube>

السمات

autoplay في حالة توفّر هذه السمة، وإتاحة المتصفح التشغيل التلقائي:
  • يتم كتم صوت الفيديو تلقائيًا قبل بدء التشغيل التلقائي.
  • عند تمرير الفيديو بعيدًا عن منطقة المشاهدة، يتم إيقاف الفيديو مؤقتًا.
  • عند تمرير الفيديو إلى منطقة المشاهدة، يستأنف الفيديو التشغيل.
  • عند نقر المستخدم على الفيديو، تتم إعادة صوت الفيديو.
  • إذا تفاعل المستخدِم مع الفيديو (مثل كتم صوته/إعادة صوته أو إيقافه مؤقتًا/استئنافه وغير ذلك)، وتم تمرير الفيديو إلى منطقة المشاهدة أو بعيدًا عنها، تظل حالة الفيديو كما تركها المستخدِم. إذا أوقف مثلاً المستخدِم الفيديو مؤقتًا ثم مرره بعيدًا عن منطقة المشاهدة ثم عاد إلى الفيديو، سيجده قيد الإيقاف المؤقت.
data-videoid هذه السمة هي معرّف فيديو YouTube الذي يوجد في عنوان URL لصفحة كل فيديو من فيديوهات YouTube. في عنوان URL هذا مثلاً: https://www.youtube.com/watch?v=Z1q71gFeRqM، معرّف الفيديو هو Z1q71gFeRqM.
data-live-channelid هذه السمة هي معرّف قناة YouTube الذي يوفر عنوان URL مستقرًا للبث المباشر. في عنوان URL هذا مثلا: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q، معرّف القناة هو UCB8Kb4pxYzsDsHxzBfnid4Q. يمكن توفير data-live-channelid بدلاً من السمة data-videoid لتضمين عنوان URL مستقر للبث المباشر بدلاً من الفيديو. ولا تكون للقناة عناصر نائبة تلقائية بل يمكنك إضافتها إلى الفيديو كما في المثال 2 أعلاه.
data-param- ستتم إضافة جميع السمات data-param- كمعامِل طلب بحث إلى السمة src لإطار iframe في YouTube. يمكن استخدام هذا لتمرير قيم مخصصة إلى مكونات YouTube الإضافية، مثل إظهار عناصر التحكم من عدمه. سيتم ترميز معرّف الموارد المنتظم للمفاتيح والقيم. وستتم كتابة المفاتيح بطريقة camelCase.
  • data-param-controls=1 تصبح &controls=1
يمكنك الاطّلاع على معلَمات مُشغِلات YouTube المضمَّنة لمعرفة المزيد من خيارات المعلَمات لبرنامج YouTube.
dock تتطلب هذه السمة الإضافة amp-video-docking. في حال توفّر هذه السمة وتشغيل الفيديو يدويًا، سيتم "تصغير" الفيديو وتثبيته في زاوية أو عنصر عند تمرير المستخدم إلى خارج المنطقة المرئية لمكّوِن الفيديو. لمزيد من التفاصيل، راجع المستندات المتعلقة بإضافة الإرساء نفسها.
credentials (اختيارية) تعرِّف هذه السمة خيار credentials بالشكل الذي تحدده واجهة برمجة التطبيقات للجلب.
  • القيم المعتمدة: omit وinclude
  • القيمة التلقائية: include
إذا أردت استخدام مشغل YouTube في وضع تحسين الخصوصية، اختَر القيمة omit. عادةً ما يعمل YouTube على تعيين ملفات تعريف الارتباط له عند تحميل المُشغِل. في وضع تحسين الخصوصية، يتم تعيين ملفات تعريف الارتباط عندما ينقر المستخدِم على المُشغِل.
السمات المشتركة يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP.

التحقق

اطّلِع على قواعد amp-youtube في مواصفات مدقق AMP.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub