amp-video
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>
Supported Layouts
أمثلة
[جدول المحتويات]
بديل لعلامة 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