AMP

تضمين صور ومقاطع فيديو

كما هو الحال في صفحة HTML عادية، يسمح لك AMP بتضمين محتوى الصور، ومقاطع الفيديو والصوت . تعرَّف على الأشياء المختلفة حول مكافئات AMP وتعرَّف على طريقة تضمينها في صفحاتك.

لمَ لا <img>، <video> و<audio>؟

لا تدعم AMP مثيلات HTML لعرض الوسائط مثل <img>. فيما نقدم نحن مكونات مكافئة للأسباب التالية:

تحذير: بينما تُعد هذه المكونات غير مدعومة، إلا أنه سيتم عرضها، لكنAMP لن تقوم بـ التتحقق من صحة صفحاتك ولن تستفيد من الميزات التي توفرها AMP.

الصور

قم بتضمين صورة في صفحتك باستخدام العنصر amp-img على النحو التالي:

<amp-img
  alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
</amp-img>
فتح هذه القصاصة في الساحة

في هذا المثال الأساسي؛ سيتم عرض الصورة بالارتفاع والعرض المحددين. وكحد أدنى، يجب تعيين عرض وارتفاع واضحين.

عرض الصور عند تعطيل JavaScript

نظرًا لاعتماد <amp-img> على JavaScript، إذا قام المستخدم باختيار تعطيل البرامج النصية، فلن يتم عرض الصور. في هذه الحالة، يجب عليك توفير احتياطي للصورة باستخدام <img> و<noscript>، على النحو التالي:

<amp-img
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
  <noscript>
    <img
      src="/static/inline-examples/images/sunset.jpg"
      width="264"
      height="195"
    />
  </noscript>
</amp-img>
فتح هذه القصاصة في الساحة

التخطيطات المتقدمة

يجعل AMP الأمر أسهل بكثير من استخدام CSS/HTML القياسيين لإنشاء صور سريعة الاستجابة بشكل كامل. في أبسط أشكاله، كل ما عليك فعله هو إضافة layout="responsive":

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>
فتح هذه القصاصة في الساحة

تابع القراءة – تعرَّف على المزيد حول تقنيات التخطيط المتقدم.

السلوك والعناصر النائبة

يمكن لوقت تشغيل AMP HTML إدارة موارد الصور بفاعلية، واختيار تأخير تحميل الموارد أو تحديد أولوياتها بناءً على موضع منفذ العرض أو موارد النظام أو النطاق الترددي للاتصال أو عوامل أخرى.

تابع القراءة – تعرَّف على طريقة توفير احتياطات وعناصر نائبة للصور.

الصور المتحركة

إن العنصر amp-anim مشابه تمامًا للعنصر amp-img، ويوفر وظائف إضافية لإدارة تحميل الصور المتحركة وتشغيلها مثل صور GIF المتحركة.

<amp-anim
  width="400"
  height="300"
  src="/static/inline-examples/images/wavepool.gif"
>
  <amp-img
    placeholder
    width="400"
    height="300"
    src="/static/inline-examples/images/wavepool.png"
  >
  </amp-img>
</amp-anim>
فتح هذه القصاصة في الساحة

ملحوظة– قم بتضمين <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> في رأس صفحتك لاستخدام هذا المكون.

فيديو

قم بتضمين مقطع فيديو في صفحتك باستخدام العنصر amp-video.

استخدم هذا العنصر فقط لتضمينات ملفات مقاطع فيديو HTML5 مباشرة. يقوم العنصر بتحميل مورد الفيديو المحدد عن طريق السمة src على نحو بطيء، وفي وقت تحدده AMP.

قم بتضمين عنصر نائب قبل بدء مقطع الفيديو، وكذا عامل احتياطي، إذا كان المتصفح لا يدعم مقاطع فيديو HTML5، على سبيل المثال:

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
فتح هذه القصاصة في الساحة

الصوت

قم بتضمين مورد صوت في صفحتك، باستخدام العنصر amp-audio.

استخدم هذا العنصر فقط لتضمينات ملفات الصوت HTML5 مباشرة. يقوم العنصر بتحميل مورد الصوت المحدد عن طريق السمة src على نحو بطيء، وفي وقت تحدده AMP.

قم بتضمين احتياطي ، إذا كان المتصفح لا يدعم صوت HTML5 ، على سبيل المثال:

Your browser doesn’t support HTML5 audio.

<amp-audio width="400"
  height="200"
  src="/static/inline-examples/audio/cat-meow.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg"
    src="/static/inline-examples/audio/cat-meow.mp3">
  <source type="audio/ogg"
    src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>
فتح هذه القصاصة في الساحة

ملحوظة– قم بتضمين <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> في رأس صفحتك لاستخدام هذا المكون.