AMP

amp-video

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

بديل لعلامة video للغة HTML5، ولا يُستخدم هذا المكوِّن إلا للتضمينات المباشرة لملفات الفيديو HTML5.

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

السلوك

يعمل المكوِّن amp-video على تحميل مورد الفيديو الذي تحدده سمته src ببطء في الوقت الذي يحدده وقت التشغيل. يمكنك التحكم في المكوِّن amp-video بنفس طريقة التحكم في العلامة <video> للغة HTML5 القياسية.

يقبل المكوِّن amp-video ما يصل إلى أربعة أنواع فريدة من عُقد HTML كعناصر ثانوية له:

  • العلامات source: كما هو الحال مع العلامة <video> الخاصة باللغة HTML، يمكنك إضافة العناصر الثانوية للعلامة <source> لتحديد ملفات وسائط مصدر مختلفة لتشغيلها.
  • العلامات track لتمكين الترجمة في الفيديو. إذا تمت استضافة المقطع الصوتي على أصل مختلف غير المستند، تجب إضافة السمة crossorigin إلى العلامة <amp-video>.
  • عنصر نائب قبل بدء الفيديو
  • عنصر احتياطي في حال عدم عمل فيديو HTML5 على المتصفح: يمكن أن تتضمن أحد عقد العناصر الثانوية المباشرة السمة fallback أو لا يتضمن أي منها هذا. عند توفّر السمة، تظهر هذه العقدة وعناصرها الثانوية من المحتوى الذي يتم عرضه إذا كان متصفح المستخدم لا يتيح عمل الفيديو HTML5.

مثال

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
Open this snippet in playground

التحليلات

يوفر المكوِّن amp-video التحليلات بطريقة مبتكرة. ويمكنك الاطّلاع على تحليلات الفيديو للحصول على مزيد من المعلومات.

السمات

src هذه السمة مطلوبة في حال توفر عناصر <source> الثانوية. وتجب أن تكون HTTPS.
poster يتم عرض صورة للإطار قبل بدء تشغيل الفيديو. ويتم عرض الإطار الأول تلقائيًا.
أو يمكنك تقديم تراكب النقر للتشغيل بدلاً من هذا. للحصول على التفاصيل، راجع قسم تراكب النقر للتشغيل أدناه.
autoplay في حال توفّر هذه السمة، وإتاحة المتصفح عمل التشغيل التلقائي، سيتم تشغيل الفيديو تلقائيًا بعد ظهوره. هناك بعض الشروط التي يحتاج إليها المكوِّن ليتم تشغيله وهي موضحة في مواصفات الفيديو في AMP.
controls هذه السمة شبيهة بالسمة controls في video للغة HTML5. في حالة توفّر هذه السمة، يقدّم المتصفح للمستخدِم عناصر للتحكم في تشغيل الفيديو.
controlsList هذه السمة هي نفس السمة controlsList لعنصر الفيديو HTML5. ولا تتيحها إلا متصفحات معينة. يُرجى الاطّلاع على https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList للحصول على مزيد من التفاصيل.
dock تتطلب هذه السمة الإضافة amp-video-docking. في حال توفّر هذه السمة وتشغيل الفيديو يدويًا، سيتم "تصغير" الفيديو وتثبيته في زاوية أو عنصر عند تمرير المستخدم إلى خارج المنطقة المرئية لمكّوِن الفيديو. لمزيد من التفاصيل، راجع المستندات المتعلقة بإضافة الإرساء نفسها.
loop في حال توفّر السمة، سيتم تكرار تشغيل الفيديو من بدايته كلما وصل إلى النهاية.
crossorigin هذه السمة مطلوبة إذا تمت استضافة مورد track على أصل مختلف عن المستند.
disableremoteplayback تحدد هذه السمة إذا ما كان عنصر الوسائط مسموح بأن يكون له واجهة مستخدم للتشغيل عن بُعد، مثل Chromecast أو AirPlay.
muted (deprecated) يتم إيقاف السمة muted ولن يعد لها أي تأثير. تتحكم السمة autoplay تلقائيًا في سلوك كتم الصوت.
noaudio توضح السمة أن الفيديو ليس له صوت. فهي تؤدي إلى إخفاء رمز معادلة الأصوات الذي يتم عرضه إذا كان للفيديو إمكانية التشغيل التلقائي.
rotate-to-fullscreen إذا كان الفيديو مرئيًا، سيتم عرض الفيديو بملء الشاشة بعد تدوير المستخدم جهازه إلى الوضع الأفقي. لمزيد من التفاصيل، راجع مواصفات الفيديو في AMP.
السمات المشتركة يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP.

سمات واجهة برمجة التطبيقات لجلسات الوسائط

ينفذ المكوِّن amp-video واجهة برمجة التطبيقات لجلسات الوسائط، التي تمكّن مطوّري البرامج من تحديد المزيد من المعلومات عن ملف الفيديو. وتظهر المعلومات الإضافية عن الفيديو في مركز الإشعارات على جهاز المستخدِم (مع عناصر التحكم في التشغيل/الإيقاف المؤقت).

artwork تحدد هذه السمة عنوان URL للصورة PNG/JPG/ICO المعروضة على أنها العمل الفني للفيديو. في حال غياب artwork، يستخدم مساعد "واجهة برمجة التطبيقات لجلسات الوسائط" الحقل image في تعريف schema.org، وهو og:image أو يستخدم favicon للموقع الإلكتروني.
artist تشير السمة إلى مؤلف ملف الفيديو، ويتم تحديدها على شكل سلسلة.
album تشير السمة إلى الألبوم/المجموعة التي تم أخذ الفيديو منها، ويتم تحديدها على شكل سلسلة.
title تشير السمة إلى اسم/عنوان الفيديو، ويتم تحديدها على شكل سلسلة. إذا لم تتوفر السمة، يستخدم مساعد "واجهة برمجة التطبيقات لجلسات الوسائط" السمة aria-label أو يعود إلى عرض عنوان الصفحة.

مثال:

يحتوي هذا المثال على سمتَي poster وartwork. تعمل السمة poster بمثابة صورة العنصر النائب التي تُعرض قبل تشغيل الفيديو بينما تكون السمة artwork الصورة التي تعرضها "واجهة برمجة التطبيقات لجلسات الوسائط" في الإشعار.

<amp-video width="720" height="305" layout="responsive"
  src="https://yourhost.com/videos/myvideo.mp4"
  poster="https://yourhost.com/posters/poster.png"
  artwork="https://yourhost.com/artworks/artwork.png"
  title="Awesome video" artist="Awesome artist"
  album="Amazing album">
</amp-video>

تراكب النقر للتشغيل

إن توفير تراكب النقر للتشغيل ميزة شائعة في تجربة المستخدم بالنسبة إلى مشغلات الفيديو على الويب. يمكنك مثلاً عرض رمز مخصص للتشغيل يمكن للمستخدِم النقر عليه، ويمكنك أيضًا تضمين عنوان الفيديو وصور الملصقات ذات الأحجام المختلفة وغير هذا. يمكنك بسهولة تنفيذ النقر للتشغيل لأن المكوِّن amp-video يتيح عمل الإجراء play القياسي في AMP.

للحصول على مثال مُفصّل، يمكنك الانتقال إلى تراكب النقر للتشغيل للمكّوِن amp-video في موقع "AMP بالمثال".

التحقق

اطّلع على قواعد amp-video في مواصفات مدقق 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