AMP

amp-youtube

يعرض المكّوِن فيديو 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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub