عنصر الفيديو

صورة معاينة ثابتة في البريد الوارد تفتح الملف عند النقر عليها، ومشغّل <video> حقيقي يعمل فعلًا في العرض المباشر المستضاف. لا يوجد تطبيق بريد يشغّل الوسائط، لذا فهذا هو العنصر الوحيد الذي يكون فيه مستوى البريد ومستوى العرض المباشر عرضين مختلفين فعلًا، بدلًا من انقسام حركي/بديل للترميز نفسه.

آلية العمل

لا يستطيع أي تطبيق بريد — لا Gmail، ولا Outlook، ولا أي شيء بينهما — تشغيل فيديو مضمَّن. ولذا لا يوجد هنا مستوى حركي يُذكر، على نحو ما يوجد في الاستطلاع أو القائمة القابلة للطي.

يعرض HTML البريد دائمًا معاينة ثابتة. فإن ضبطت صورة الملصق، فإنها تُعرض وسم <img> عاديًا بكامل العرض داخل رابط يؤدي مباشرة إلى ملف الفيديو (أو إلى صفحة توجّهه إليها). وإن تركت الملصق فارغًا، يُعرض بدلًا منه مربع نائب: مستطيل داكن مصمت يحمل الرمز ▶ وتعليقًا — هو نص الوصف، إضافة إلى مدة منسّقة بصيغة M:SS إن ضبطتها. وبهذا يبقى العنصر معبّرًا عمّا هو عليه، حتى دون تقديم أي صورة. النقر على أيٍّ من النسختين يفتح src مباشرة، وهو نمط النقر نفسه الذي يستخدمه أصلًا عنصر الصورة المرتبطة برابط، وتُتتبَّع النقرة في الخريطة الحرارية للنقرات على مستوى العنصر.

أما العرض المباشر المستضاف فهو صفحة حقيقية يشاهدها إنسان فعليًا، لا بريد وارد مقيّد بما تستطيع تطبيقات البريد عرضه. ولذا يعرض العنصر نفسه هناك عنصر <video controls> حقيقيًا بدلًا من ذلك، مع ضبط صورة الملصق سمةً poster إن قدّمتها، والوصف سمةً aria-label له. ويقود هذا الانقسامَ المؤشرُ نفسه الذي يستخدمه كل مُخرِج يتفرّع حسب الواجهة الخلفية في الشيفرة: هل رابط URL الأساسي موجود (البريد) أم غائب (العرض المباشر) وقت العرض. لا يوجد عنصر «فيديو للعرض المباشر» منفصل يحتاج إلى ضبطه — مجرد عنصر واحد يختلف مستوياها فعلًا فيما يستطيعان فعله.

يأخذ العنصر رابط URL عاديًا في src — فأنت تستضيف ملف الفيديو بنفسك؛ ولا يخزّن MailInApp ملفات الفيديو. أما صورة الملصق فأمرها مختلف: فهي تأتي من مكتبة الوسائط، لذا تعرض لوحة الخصائص صورة مصغّرة وزر اختيار صورة… بدلًا من مربع لرابط URL — اختر صورة مرفوعة سابقًا أو ارفع صورة جديدة في المكان نفسه. وإذا كان src فارغًا، فلا يُعرض العنصر على الإطلاق، في أيٍّ من المستويين.

الحقول القابلة للضبط:

• رابط URL الفيديو — الملف (أو الصفحة) الذي ترتبط به معاينة البريد، وsrc لمشغّل العرض المباشر.
• صورة الملصق — تُعرض صورةَ المعاينة في البريد وتُضبط ملصقًا لعنصر <video> في العرض المباشر؛ وتُختار من مكتبة الوسائط.
• الوصف — يُستخدم تعليقًا للعنصر النائب (حين لا يُضبط ملصق)، وسمةَ aria-label لمشغّل العرض المباشر.
• المدة (بالثواني) — تُنسَّق في تعليق العنصر النائب بصيغة M:SS؛ والقيمة 0 تُسقطها.
• العرض (%) — 10–100.
• لون الخلفية، والحشو، والحدّ، واستدارة الزوايا على الإطار.

الفيديو محتوى خالص: لا شيء يُجاب عنه، لذا لا تُتتبَّع مرات الإكمال ولا مدة المشاهدة — ولا يظهر إلا النقر نفسه، في الخريطة الحرارية للنقرات، مثل أي عنصر آخر مرتبط برابط.

أمثلة

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

كيف يبدو البديل الثابت

<a href="https://cdn.example.com/launch-teaser.mp4"
   style="display:block">
  <div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
    <img src="https://cdn.example.com/launch-teaser-poster.jpg" alt="Launch teaser"
         style="display:block;width:100%;max-width:100%" />
  </div>
</a>

هذا هو مستوى البريد: صورة ملصق داخل رابط عادي إلى ملف الفيديو — أما عنصر <video controls> الحقيقي في العرض المباشر فلا يُعرض إلا في الصفحة المستضافة، وليس في البريد أبدًا.

انظر أيضًا

• نظرة عامة على مرجع العناصر
• عنصر الصوت
• روابط العرض المباشر
• التفاعلات والتحليلات