كل ما يجب أن يعرفه المعلنون الرقميون عن سمات ومقاطع فيديو AMP

اليوم ، نشرت ملايين المجالات مليارات من صفحات التحميل الفوري باستخدام إطار عمل Accelerated Mobile Pages. بدأ هذا المشروع منذ عدة سنوات ، وقد ساعد بنجاح ليس فقط في تحسين أوقات تحميل صفحات الويب ، ولكن أيضًا تجربة المستخدم ، ونتيجة لذلك ، عائد الاستثمار للأعمال.

تم تحقيق ذلك عن طريق تقليل "وزن" الصفحات - بيانات حجمها - مع قيود على جافا سكريبت ، واستبدال خفيف للغات الترميز الشائعة ، والتخزين المؤقت على شبكة توصيل محتوى Google.

ومع ذلك ، كان النقد الأكبر للمشاريع هو أنها مبادلة المشاركة بالسرعة. بينما كان هذا صحيحًا في يوم من الأيام - تم استخدام AMP بشكل أساسي في المواقع الإخبارية للمحتوى الثابت - لم يعد كذلك. يمكن الآن استخدام AMP لإنشاء مواقع ويب كاملة ، كاملة بنسخ عالية السرعة من عناصر الصفحة الثقيلة مثل الفيديو. نوضح اليوم كيفية عمل مكونات فيديو AMP هذه بالضبط ، وصولاً إلى تعريفات مصطلحات ترميز معينة وإمكانيات تحليلية وتنسيقات والمزيد.

صفات

يأتي كل مكون من مكونات فيديو AMP مع مجموعة من السمات. يتداخل بعضها ، وبعضها يكون فريدًا بالنسبة للمكون ، ويتحكم كل جانب في جانب من طريقة تصرف الفيديو أو عرضه.

فيما يلي قائمة بالسمات التي ستجدها بين المكونات وما تعنيه. هذه القائمة ليست شاملة. من الأفضل إعادة التحقق من صفحة مطور AMP المخصصة لأحد المكونات قبل إضافتها إلى صفحتك.

• src: هذا العنصر مطلوب إذا لم يتم تحديد <source>. يجب تحديده في HTTPS.
• ملصق: يحدد هذا الصورة المصغرة للصورة التي يتم عرضها قبل أن ينقر العارض على "تشغيل". يتم عرض الإطار الأول افتراضيًا. يمكنك أيضًا اختيار عرض تراكب ، وهو النقر للتشغيل.
• التشغيل التلقائي: إذا كان المتصفح يدعم التشغيل التلقائي ، فيمكنك استخدام هذه السمة لإجراء تشغيل تلقائي للفيديو بمجرد عرضه على الزائر.
• عناصر التحكم: باستخدام هذه السمة ، سيوفر المتصفح عناصر تحكم يمكن للمستخدم التحكم في مشغل الفيديو بها.
• قائمة عناصر التحكم: مدعومة من قبل بعض المستعرضات فقط ، تسمح قائمة عناصر التحكم للمستخدمين بعرض عناصر التحكم التي يمكن استخدامها لضبط التشغيل.
• dock: عند دمجها مع ملحق amp-video-docking ، تعمل هذه السمة على تصغير مشغل الفيديو وإصلاحه في زاوية عندما يقوم المستخدم بالتمرير خارج منطقته.
• حلقة: إذا تم تنفيذها ، سيعود الفيديو تلقائيًا إلى البداية عندما يصل إلى النهاية.
• crossorigin: هذا العنصر مطلوب إذا تمت استضافة الفيديو في مكان آخر غير المستند الأصلي.
• disableremoteplayback: باستخدام هذا العنصر ، قم بتعطيل التشغيل عن بُعد من خلال أنظمة مثل Chromecast أو AirPlay.
• noaudio: تعمل هذه السمة على تعطيل الصوت في الفيديو.
• تدوير إلى ملء الشاشة: إذا تم تمكين هذه السمة ، فعندما يدير المستخدم جهازه ، سيتم ضبط الفيديو على وضع ملء الشاشة.

السمات المشتركة

السمات الشائعة هي تلك التي تنطبق على العديد من مكونات AMP. في قائمة مكونات فيديو AMP ، عندما ترى إشارة إلى "السمات المشتركة" ، فهذا يعني أنه يمكن استخدام ما يلي معها.

تقهقر

مع وجود احتياطي ، سيتواصل المتصفح مع المشاهد عندما لا يدعم عنصرًا ، أو عند فشل التحميل. في المثال أدناه ، تقرأ رسالة الخطأ "لا يمكن تشغيل الصور المتحركة على هذا الجهاز". يمكن استخدام عنصر احتياطي على أي عنصر AMP يدعم العناصر الاحتياطية ، وسيتم عرضه بدلاً من العنصر غير المدعوم.

مرتفعات

إذا كان العنصر يدعم التنسيق سريع الاستجابة ، فإنه يدعم سمة الارتفاع أيضًا. يتم تحديد سمة الارتفاع بناءً على تعبيرات الوسائط ولا تنطبق إلا على الارتفاع. القيم المئوية مسموح بها. إذا كان الارتفاع 80٪ ، كما في المثال أدناه ، فإن ارتفاع العنصر سيكون 80٪ من عرضه.

تَخطِيط

تحدد سمة التخطيط كيف يتصرف العنصر. يمكنك تحديد تخطيط لمكون عن طريق إضافة سمة التخطيط بإحدى قيم التخطيط المدعومة للعنصر (المزيد عن هذه القيم لاحقًا).

وسائل الإعلام

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

لا يوجد تحميل

أثناء التحميل ، تعرض العديد من عناصر AMP رسمًا متحركًا أساسيًا للتحميل ، مما يشير إلى أن العنصر تتم معالجته للعرض. تتحكم السمة noloading في عرض الرسوم المتحركة.

عنصر نائب

سيعرض العنصر الذي تم تمييزه بسمة العنصر النائب عنصرًا نائبًا لعنصره الأصلي. في المثال أدناه ، يتم عرض صورة المعاينة كعنصر نائب لصورة gif متحركة. يمكن استخدام هذه السمة على أي عنصر HTML يكون عنصرًا فرعيًا لعنصر AMP يدعم العناصر النائبة.

سيظهر العنصر النائب على الفور في مكان الأصل ، افتراضيًا. عندما يتم تقديم المورد ، يتم إخفاء العنصر النائب ويتم عرض المورد في مكانه.

الأحجام

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

العرض والارتفاع

في تنسيقات معينة ، يجب تحديد سمة العرض والارتفاع التي تحتوي على قيمة بكسل لبعض مكونات AMP.

تَخطِيط

وفقًا لموارد مطوري AMP ، يمكن أن يكون لعناصر AMP <amp-img> و <amp-video> واحد من ستة تخطيطات ، كل منها يجعل العنصر يتصرف بشكل مختلف:

متجاوب

عندما يتم جعل عنصر ما مستجيبًا ، فسيتم تغيير حجمه تلقائيًا ليناسب مساحة منطقة معينة. تعتمد المساحة المتاحة على العنصر الأصل.

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

لا يوجد عرض

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

حقيقي

في هذا التخطيط ، يستهلك العنصر المساحة المتاحة ، ويغير حجم ارتفاعه بناءً على سمات العرض والارتفاع حتى يصل إلى الحجم الطبيعي أو قيد CSS مثل max-width.
تلك المساحة المتاحة تعتمد على العنصر الأصل.

فليكس البند

باستخدام هذا التنسيق ، ستستهلك العناصر الموجودة في العنصر الرئيسي المساحة المتبقية لذلك الأصل عندما تكون حاوية مرنة ، مثل "display: flex."

ارتفاع ثابت

سيتم ضبط العناصر المحددة على أنها ذات ارتفاع ثابت لتلائم المساحة المتاحة ، ولكن سيظل ارتفاعها ثابتًا. في هذه الحالة ، يجب أن تكون سمة الارتفاع موجودة ، ويجب ألا تكون سمة العرض (أو تساوي الصفر إذا كانت كذلك).

مُثَبَّت

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

يملأ

باستخدام هذا التخطيط ، سيملأ العنصر كل الطول والعرض المتاحين. سيتطابق مع ارتفاع وعرض العنصر الأصلي طالما أن الحاوية الرئيسية تحدد "position: النسبي" أو "position: المطلق".

وعاء

مثل HTML div ، يتيح هذا التنسيق لأطفال العنصر تحديد حجمه. مع الحاوية ، يعمل المكون فقط كحاوية ، وليس له تخطيط محدد بحد ذاته. يتم تقديم أطفالها على الفور.

دعم التحليلات

على الرغم من أن كل مكون من مكونات فيديو AMP قد لا يكون لديه القدرة التحليلية التي تتمتع بها مشغلات الفيديو الأخرى ، فإن هذا لا يعني أنه لا يمكنك تتبع مقاييس أداء فيديو محددة للغاية. إليك ما يمكنك تتبعه:

• التشغيل التلقائي: يشير إلى ما إذا كان الفيديو قد بدأ كفيديو يتم تشغيله تلقائيًا.
• CurrentTime: يحدد وقت التشغيل الحالي (بالثواني) وقت التشغيل.
• المدة: تحدد المدة الإجمالية للفيديو (بالثواني).
• الارتفاع: يحدد ارتفاع الفيديو (بالبكسل).
• id: يحدد معرّف عنصر الفيديو.
• playTotal: يحدد مقدار الوقت الإجمالي الذي شاهده المستخدم للفيديو.
• الحالة: تشير إلى الحالة ، والتي يمكن أن تكون "تشغيل_ تلقائي" أو "تشغيل يدوي" أو "متوقف مؤقتًا".
• العرض: يحدد عرض الفيديو (بالبكسل).
• playRangesJson: يمثل أجزاء من الوقت الذي شاهد فيه المستخدم الفيديو (بتنسيق JSON).

بالنسبة لبعض مكونات فيديو AMP ، ستتمكن من اكتشاف كل هذه المقاييس. بالنسبة للآخرين ، سيكون لديك فقط دعم تحليلي جزئي. الدعم الجزئي يعني أنه يتم دعم الكل باستثناء الوقت الحالي ، والإعجاب ، و PlayRangesJson ، و PlayTotal . في قسم مكونات فيديو AMP ، ستجد مستويات دعم التحليلات. اكتشف المزيد حول تحليلات فيديو AMP هنا.

مكونات فيديو AMP

أمبير فيديو

مكون amp-video هو بديل لعلامة فيديو HTML5 ؛ فقط ليتم استخدامها لتضمينات ملفات فيديو HTML5 المباشرة. يُحمِّل المكوِّن amp-video مورد الفيديو المحدد بواسطة السمة src الخاصة به بتكاسل ، في وقت يحدده وقت التشغيل. يمكنك التحكم في مكون amp-video بالطريقة نفسها تمامًا مثل علامة HTML5 <video> القياسية.

مثال

دعم التحليلات: كامل

النص البرمجي المطلوب: <script async custom-element = ”amp-video” src = ”https://cdn.ampproject.org/v0/amp-video-0.1.js”> </script>

التنسيقات المتاحة: fill و fixed و fixed-height و flex-item و nodisplay و response

السمات: src ، الملصق ، التشغيل التلقائي ، عناصر التحكم ، قائمة الضوابط ، الإرساء ، التكرار ، التقاطع ، disableremoteplayback ، noaudio ، التدوير إلى ملء الشاشة ، السمات الشائعة

amp-3q- لاعب

يسمح مكون amp-3q-player للمطورين بتضمين مقاطع فيديو من 3Q SDN.

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-3q-player” src = ”https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”> </script>

التنسيقات المتاحة: fill و fixed و flex-item و response

السمات: التشغيل التلقائي (اختياري) ، السمات المشتركة

amp-brightcove

يقوم مكون amp-brightcove بتضمين مشغل فيديو كما يظهر في Brightcove's Video Cloud أو Brightcove Player.

مثال

دعم التحليلات: كامل

النص البرمجي المطلوب: <script async custom-element = ”amp-brightcove” src = ”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”> </script>

التنسيقات المتاحة: fill و fixed و fixed-height و flex-item و nodisplay و response

السمات: data-account أو data-player أو data-player-id أو data-embed أو data-video-id أو data-playlist-id أو data-referenceer أو data-param-

amp-dailymotion

عندما يعرض المكون amp-dailymotion مقطع فيديو من مشغل Dailymotion.

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-dailymotion” src = ”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”> </script>

التنسيقات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، متجاوب

السمات: التشغيل التلقائي ، data-videoid (مطلوب) ، كتم البيانات (اختياري) ، تمكين شاشة نهاية البيانات (اختياري) ، تمكين مشاركة البيانات (اختياري) ، بدء البيانات (اختياري) ، تمييز واجهة المستخدم للبيانات (اختياري) ) ، data-ui-logo (اختياري) ، data-info (اختياري) ، data-param- * (اختياري) ، dock ، السمات المشتركة

أمبير الفيسبوك

يحتوي المكون amp-facebook على تنوع أكثر قليلاً من العديد من العلامات الموجودة في هذه القائمة. بالإضافة إلى الفيديو ، يمكن أن تعرض علامة amp-facebook تعليقًا أو منشورًا على Facebook أيضًا.

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-facebook” src = ”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”> </script>

التنسيقات المتاحة: fill و fixed و fixed-height و flex-item و nodisplay و response

السمات: data-href (مطلوب) ، data-embed-as ، data-align-center ، data-locale (اختياري) ، السمات المشتركة

amp-gfycat

يعرض المكون amp-gfycat صورة GIF من gfycat.com.

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-gfycat” src = ”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”> </script>

التنسيقات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، متجاوب

السمات: data-gfyid ، العرض والارتفاع ، noautoplay ، السمات المشتركة

amp-hulu

يقوم المكون amp-hulu بتضمين مقطع فيديو من Hulu.

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-hulu” src = ”https://cdn.ampproject.org/v0/amp-hulu-0.1.js”> </script>

التنسيقات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، متجاوب

السمات: بيانات عيد ، سمات مشتركة

أمبير- IMA- فيديو

يشتمل amp-ima-video على مشغل فيديو لإعلانات الفيديو أثناء البث. يتطلب المكوِّن علامة إعلان ، يتم توفيرها في علامة البيانات ، وهي عنوان URL لاستجابة إعلان متوافق مع VAST (للحصول على أمثلة ، راجع نماذج علامات IMA).

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-ima-video” src = ”https://cdn.ampproject.org/v0/amp-ima-video-0.1.js”> </script>

التخطيط المتاح: ثابت وسريع الاستجابة

السمات: data-tag (مطلوب) ، data-src ، data-crossorigin ، data-poster (اختياري) ، data-delay-ad-request (اختياريًا) ، data-ad-label (اختياري) ، dock ، والسمات الشائعة

amp-izlesene

يسمح المكون amp-izlesene للمستخدمين بتضمين فيديو Izlesene.

مثال

دعم التحليلات : جزئي

النص المطلوب: <script async custom-element = ”amp-izlesene” src = ”https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”> </script>

التنسيقات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، متجاوب

السمات: data-videoid (مطلوب) ، data-param-showrel

أمبير-kaltura- لاعب

مكوّن amp-kaltura-player يمكّن المستخدمين من تضمين مقطع فيديو باستخدام مشغل Kaltura Video Platform.

مثال

دعم التحليلات : جزئي

البرنامج النصي المطلوب: <script async custom-element = ”amp-kaltura-player” src = ”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر فليكس ، عقدة ، متجاوب

السمات: data-partner و data-uiconf و data-entryid و data-param- * والسمات المشتركة.

amp-ooyala-player

يسمح amp-ooyala-player للمستخدمين بتضمين فيديو Ooyala.

مثال

دعم التحليلات: جزئي

النص المطلوب: <script async custom-element = ”amp-ooyala-player” src = ”https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، عنصر مرن ، سريع الاستجابة

السمات: data-embedcode (مطلوب) ، data-playerid (مطلوب) ، data-pcode (مطلوب) ، data-playerversion (اختياري) ، data-config (اختياري) ، والسمات المشتركة

أمبير يصل لاعب

يسمح مكون amp-reach-player للمستخدمين بتضمين Reach Player الموجود في منصة Beachfront Reach.

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-reach-player” src = ”https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، سريع الاستجابة

السمات: data-embed-id ، السمات المشتركة

أمبير- سبرينج بورد لاعب

يعرض amp-springboard-player المشغل المستخدم في Springboard.

مثال

دعم التحليلات: جزئي

البرنامج النصي المطلوب: <script async custom-element = ”amp-springboard-player” src = ”https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، عنصر مرن ، سريع الاستجابة

السمات: date-site-id (مطلوب) ، data-mode (مطلوب) ، data-content-id (مطلوب) ، data-player-id (required) ، data-domain (required) ، data-items (required) ، السمات المشتركة

أمبير فيديو لرسو السفن

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

• يمكن إرساء الفيديو إلى زاوية افتراضية أو إلى موضع ثابت مخصص.
• يمكن للمستخدم سحب الفيديو وتغيير موضعه في زاوية مختلفة.
• يمكن تحريك الفيديو ليتم استبعاده من وضع الإرساء.
• يمكن إرساء مقاطع فيديو متعددة على نفس الصفحة ، ولكن سيتم إرساء وإصلاح مقطع فيديو واحد فقط في كل مرة.

بشكل افتراضي ، سيتم تصغير الفيديو إلى الزاوية العلوية اليمنى. عند 30٪ من عرض منفذ العرض ، لا يقل عرضه عن 180 بكسل. إذا كان المستند من اليمين إلى اليسار ، فسيتم إرساء الفيديو في الزاوية العلوية اليسرى. عندما تكون في هذا الوضع ، يمكن للمستخدمين سحب مقطع الفيديو الذي تم إرساؤه لالتقاط أي ركن من أركانه.

لا يمكن استخدام هذا الامتداد إلا مع مشغل فيديو مدعوم. حاليًا ، اللاعبون المدعومون هم:

• amp-brightcove
• amp-dailymotion
• أمبير-فرحة-لاعب
• أمبير- IMA- فيديو
• أمبير فيديو
• amp-video-iframe
• amp-youtube

مرة أخرى ، سيتم إرساء الفيديو فقط إذا تم تشغيله يدويًا. هذا يعنى:

• إذا تم تشغيل الفيديو تلقائيًا ، فلن يتم تشغيل الميزة ما لم ينقر المستخدم على الفيديو أولاً.
• إذا لم يتم تشغيل الفيديو تلقائيًا ، فلن يتم تشغيل الميزة إلا إذا قام المستخدم بتشغيل الفيديو.
• إذا تم إيقاف الفيديو مؤقتًا أثناء التمرير ، فلن يتم إرساؤه.

النص البرمجي المطلوب: <script async custom-element = ”amp-video-docking” src = ”https://cdn.ampproject.org/v0/amp-video-docking-0.1.js”> </script>

amp-video-iframe

يعرض amp-video-iframe إطار iframe يحتوي على مشغل فيديو. يجب عدم استخدام هذا المكون لغرض أساسي هو عرض الإعلانات. لا بأس في استخدام amp-video-iframe لغرض عرض مقاطع الفيديو ، حيث يتم الإعلان عن جزء من مقاطع الفيديو. ولكن يجب أن تستخدم حالات استخدام الإعلانات amp-ad بدلاً من ذلك.

مثال

لكي يعمل تكامل الفيديو ، يجب أن يتضمن المستند الموجود داخل إطارك مكتبة صغيرة:

دعم التحليلات: جزئي

البرنامج النصي المطلوب: <script async custom-element = ”amp-vimeo” src = ”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، جوهري ، عرض عقدة ، سريع الاستجابة

السمات: src (مطلوبة) ، الملصق (مطلوب) ، التشغيل التلقائي ، السمات المشتركة ، dock ، implements-media-session ، implements-rotate-to-fullscreen

amp-vimeo

يتيح المكون amp-vimeo للمستخدمين تضمين مقطع فيديو من Vimeo.

مثال

دعم التحليلات: جزئي

البرنامج النصي المطلوب: <script async custom-element = ”amp-vimeo” src = ”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، سريع الاستجابة

السمات: التشغيل التلقائي ، data-videoid (مطلوب)

أمبير- viqeo- لاعب

يعرض amp-viqeo-player مشغل فيديو Viqeo.

مثال

دعم التحليلات: جزئي

البرنامج النصي المطلوب: <script async custom-element = ”amp-viqeo-player” src = ”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، سريع الاستجابة

السمات: التشغيل التلقائي ، ملف تعريف البيانات ، معرف الفيديو ، العرض والارتفاع

amp-wistia-player

يسمح المكون amp-wistia-player للمستخدمين بتضمين ملفات.

مثال

دعم التحليلات: جزئي

النص البرمجي المطلوب: <script async custom-element = ”amp-wistia-player” src = ”https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”> </script>

التخطيطات المتاحة: ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، سريع الاستجابة

السمات: البيانات-الوسائط-التجزئة-المعرف ، السمات المشتركة

amp-youtube

يسمح المكون amp-youtube لمنشئي المحتوى بتضمين مقطع فيديو على YouTube.

مثال

النص البرمجي المطلوب: <script async custom-element = ”amp-youtube” src = ”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”> </script>

السمات: التشغيل التلقائي ، data-videoid ، data-live-channelid ، data-param- * ، dock ، أوراق الاعتماد (اختياريًا) ، السمات المشتركة.

استنتاج

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

ابدأ (وانتهى) اليوم مع Instapage AMP.