AMP

Important: this documentation is not applicable to your currently selected format email!

amp-video

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Replaces the HTML5 video tag.

 

Required Scripts

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

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

بديل لعلامة 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>
فتح هذه القصاصة في الساحة

التحليلات

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

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

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

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

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

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