فيديو

عند تحسين الفيديو للتوافق مع "مؤشرات أداء الويب الأساسية"، احرص على ضبط السمتَين width وheight على العلامة <video>. قد تحتاج أيضًا إلى استخدام السمة poster، وذلك حسب الحالة.

  • السمتان width وheight: لمنع متغيّرات التصميم، اضبط السمتَين width وheight في العلامة <video>. يتيح ذلك للمتصفح تحديد أبعاد الفيديو (وحجز المساحة الصحيحة) بدون الحاجة إلى الانتظار إلى حين تنزيل الفيديو.

  • السمة poster (اختيارية): تحدد السمة poster الصورة التي يجب عرضها أثناء تنزيل الفيديو. إذا كان الفيديو هو عنصر سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)، يتم تحديد سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) استنادًا إلى وقت عرض صورة الملصق بدلاً من وقت تحميل الفيديو كله. وفي حال عدم تحديد هذه السمة، سينتظر المتصفّح إلى أن يتوفّر الإطار الأوّل من الفيديو، ويستخدم هذه السمة كصورة الملصق. أما الفيديوهات التي لا تتضمّن سمة poster فهي لا يمكن اعتبارها في الوقت الحالي ضمن سرعة عرض أكبر جزء من المحتوى على الصفحة.

في هذا المثال، يتم استخدام CSS لضمان تغيير حجم الفيديو بحيث يلائم الحاوية. ولا يؤثّر هذا الإجراء في "مؤشرات أداء الويب"، ولكنّه أسلوب مفيد.

HTML

<video controls width="960" height="540" poster="flower-960-poster.png">
    <source src="flower-960.mp4" type="video/mp4">
</video>

CSS


        video {
    max-width: 100%;
    height: auto;
}