عند تحسين الفيديو للتوافق مع "مؤشرات أداء الويب الأساسية"، احرص على ضبط السمتَين 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;
}