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

كما هو الحال في صفحة 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>

فيديو

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

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

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

<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 ، على سبيل المثال:

<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>

• Written by @pbakaus
  with contributions from @Meggin and @bpaduch