إعداد ملف فيديو بشكل صحيح للويب وقد أعطيته الأبعاد الصحيحة والدقة الصحيحة. وقد أنشأت أيضًا ملفات WebM وMP4 منفصلة لمتصفحات مختلفة.
ليتمكّن أي مستخدم من مشاهدة الفيديو، عليك إضافته إلى صفحة ويب. يتطلب إجراء ذلك بشكل صحيح إضافة عنصرَي HTML: العنصر <video> والعنصر <source>. بالإضافة إلى الأساسيات حول هذه العلامات، تشرح هذه المقالة السمات التي يجب إضافتها إلى هذه العلامات لإنشاء تجربة مستخدم جيدة.
تحديد ملف واحد
على الرغم من أنّنا لا ننصح بذلك، يمكنك استخدام عنصر الفيديو بمفرده. استخدِم دائمًا السمة type كما هو موضّح أدناه. يستخدم المتصفح هذا لتحديد ما إذا كان
يمكنه تشغيل ملف الفيديو المقدم. وإذا تعذّر ذلك، يتم عرض النص المضمّن.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
تحديد تنسيقات ملفات متعددة
تذكَّر من أساسيات ملفات الوسائط أنّ بعض المتصفّحات لا تتيح تشغيل بعض تنسيقات الفيديو. يتيح لك العنصر <source> تحديد تنسيقات متعددة كبديل في حال لم يكن متصفّح المستخدم متوافقًا مع أحدها.
ينتج عن المثال أدناه الفيديو المضمّن الذي يتم استخدامه كمثال لاحقًا في هذه المقالة.
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
يجب دائمًا إضافة سمة type إلى علامات <source> على الرغم من أنّها اختيارية. يضمن ذلك أن المتصفح يقوم فقط بتنزيل الملف الذي
يمكنه تشغيله.
يوفّر هذا النهج العديد من المزايا مقارنةً بعرض ملفات HTML مختلفة أو استخدام نصوص برمجية من جهة الخادم، خاصةً على الأجهزة الجوّالة:
- يمكنك إدراج التنسيقات حسب الأولوية.
- يقلّل التبديل من جهة العميل من وقت الاستجابة، إذ يتم إرسال طلب واحد فقط للحصول على المحتوى.
- إنّ السماح للمتصفّح باختيار تنسيق هو أمر أبسط وأسرع، ومن المحتمل أن يكون أكثر موثوقية من استخدام قاعدة بيانات دعم من جهة الخادم مع رصد وكيل المستخدم.
- يؤدي تحديد نوع كل مصدر ملف إلى تحسين أداء الشبكة، حيث يمكن للمتصفّح اختيار مصدر فيديو بدون الحاجة إلى تنزيل جزء من الفيديو "للكشف" عن التنسيق.
هذه المشاكل مهمة بشكل خاص في سياقات الأجهزة الجوّالة، حيث يكون معدل نقل البيانات ووقت الاستجابة في أعلى مستوياتهما، ومن المرجّح أن يكون صبر المستخدم محدودًا. يمكن أن يؤثر حذف السمة type في الأداء في حال توفُّر مصادر متعددة بأنواع غير متوافقة.
تتوفّر بضع طرق للاطّلاع على التفاصيل. يمكنك الاطّلاع على مقدمة عن الوسائط الرقمية للمهتمين بالتكنولوجيا لمعرفة المزيد عن كيفية عمل الفيديو والصوت على الويب. يمكنك أيضًا استخدام تصحيح الأخطاء عن بُعد في "أدوات مطوري البرامج" لمقارنة نشاط الشبكة مع سمات النوع وبدون سمات النوع.
تحديد وقتَي البدء والانتهاء
يمكنك توفير معدل نقل البيانات وجعل موقعك الإلكتروني أكثر استجابة من خلال استخدام أجزاء الوسائط لإضافة أوقات البدء والانتهاء إلى عنصر الفيديو.
لاستخدام جزء من الوسائط، أضِف #t=[start_time][,end_time] إلى عنوان URL الخاص بالوسائط. على سبيل المثال، لتشغيل الفيديو من الثانية 5 إلى الثانية 10، حدِّد ما يلي:
<source src="chrome.webm#t=5,10" type="video/webm">
يمكنك أيضًا تحديد الأوقات في <hours>:<minutes>:<seconds>. على سبيل المثال،
تسمح السمة #t=00:01:05 بفتح الفيديو بعد مرور دقيقة وخمس ثوانٍ من بدايته. لتشغيل الدقيقة الأولى فقط من الفيديو، حدِّد #t=,00:01:00.
يمكنك استخدام هذه الميزة لتقديم طرق عرض متعددة على الفيديو نفسه، مثل نقاط عرض الأحداث في قرص DVD، بدون الحاجة إلى ترميز ملفات متعددة وعرضها.
لكي تعمل هذه الميزة، يجب أن يتيح خادمك طلبات النطاق وأن تكون هذه الإمكانية مفعَّلة. تتيح معظم الخوادم طلبات النطاق تلقائيًا. بما أنّ بعض خدمات الاستضافة توقف هذه الطلبات، عليك التأكّد من أنّ طلبات النطاق متاحة لاستخدام الأجزاء على موقعك الإلكتروني.
لحسن الحظ، يمكنك إجراء ذلك في أدوات المطوّرين في المتصفّح. في Chrome، على سبيل المثال، يمكنك العثور عليه في لوحة الشبكة. ابحث عن العنوان Accept-Ranges وتأكَّد من أنّه يتضمّن bytes. في الصورة، رسمتُ مربعًا أحمر حول هذا
العنوان. إذا لم تظهر لك القيمة bytes، عليك التواصل مع
مقدّم خدمة الاستضافة.
تضمين صورة ملصق
أضِف سمة الملصق إلى عنصر video حتى يتمكن المشاهدون من معرفة المحتوى بمجرد تحميل العنصر، دون الحاجة إلى تنزيل الفيديو أو بدء التشغيل.
<video poster="poster.jpg" ...>
…
</video>
يمكن أيضًا استخدام الملصق كبديل في حال تعطُّل الفيديو src أو في حال عدم توفّر أي من تنسيقات الفيديو المتوافقة. الجانب السلبي الوحيد لصور الملصقات هو طلب ملف إضافي، والذي يستهلك بعض النطاق الترددي ويتطلب عرضًا.
لمزيد من المعلومات، يمكنك الاطّلاع على مقالة ترميز الصور بكفاءة.
التأكّد من أنّ الفيديوهات لا تتجاوز حدود الحاويات
عندما تكون عناصر الفيديو كبيرة جدًا بالنسبة إلى إطار العرض، قد تتجاوز حدود الحاوية، ما يجعل من المستحيل على المستخدم رؤية المحتوى أو استخدام عناصر التحكّم.
يمكنك التحكّم في أبعاد الفيديو باستخدام CSS. إذا لم تلبِّ CSS جميع احتياجاتك، يمكن أن تساعدك مكتبات JavaScript والمكوّنات الإضافية، مثل FitVids، حتى بالنسبة إلى الفيديوهات من YouTube ومصادر أخرى. للأسف، يمكن أن تزيد هذه الموارد من أحجام حمولة الشبكة مع عواقب سلبية على إيراداتك ومحافظ المستخدمين.
للاستخدامات البسيطة مثل تلك التي أصفها هنا، استخدِم الاستعلام عن الوسائط في CSS لتحديد حجم العناصر بناءً على أبعاد إطار العرض، max-width:
100% هو صديقك.
بالنسبة إلى محتوى الوسائط في إطارات iframe (مثل فيديوهات YouTube)، جرِّب نهجًا متجاوبًا (مثل النهج الذي اقترحه جون سورداكوفسكي).
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
قارِن بين النموذج المتجاوب والنسخة غير المتجاوبة. كما ترى، فإن الإصدار غير المتجاوب لا يمثل تجربة مستخدم رائعة.
اتجاه الجهاز
لا يمثّل اتجاه الجهاز مشكلة لشاشات الكمبيوتر المكتبي أو أجهزة الكمبيوتر المحمول، ولكنّه مهم جدًا عند التفكير في تصميم صفحات الويب للأجهزة الجوّالة والأجهزة اللوحية.
يقوم Safari على iPhone بعمل جيد في التبديل بين الاتجاه الرأسي والأفقي:
يمكن أن يكون اتجاه الجهاز على iPad وChrome على Android مشكلة. على سبيل المثال، بدون أي تخصيص، يبدو الفيديو الذي يتم تشغيله على جهاز iPad في الاتجاه الأفقي كما يلي:
يمكن أن يؤدي ضبط الفيديو width: 100% أو max-width: 100% باستخدام CSS إلى حلّ
العديد من مشاكل تنسيق اتجاه الجهاز.
تشغيل تلقائي
تتحكّم السمة autoplay في ما إذا كان المتصفّح سينزّل الفيديو ويشغّله على الفور. وتعتمد طريقة عملها الدقيقة على النظام الأساسي والمتصفّح.
Chrome: يعتمد ذلك على عوامل متعددة، بما في ذلك على سبيل المثال لا الحصر، ما إذا كانت المشاهدة تتم على كمبيوتر مكتبي وما إذا كان مستخدم الجهاز الجوّال قد أضاف موقعك الإلكتروني أو تطبيقك إلى شاشته الرئيسية. لمزيد من التفاصيل، يُرجى الاطّلاع على أفضل الممارسات المتعلّقة بالتشغيل التلقائي.
Firefox: يحظر كل الفيديوهات والأصوات، ولكن يمنح المستخدمين إمكانية تخفيف هذه القيود على جميع المواقع الإلكترونية أو مواقع إلكترونية معيّنة. لمعرفة التفاصيل، يُرجى الاطّلاع على مقالة السماح بالتشغيل التلقائي للوسائط أو حظره في Firefox.
Safari: كان يتطلّب في السابق إجراءً تفاعليًا من المستخدم، ولكن تم تخفيف هذا الشرط في الإصدارات الأخيرة. لمعرفة التفاصيل، يُرجى الاطّلاع على سياسات <video> الجديدة لنظام التشغيل iOS.
حتى على المنصات التي تتيح التشغيل التلقائي، عليك التفكير في ما إذا كان من الأفضل تفعيله:
- قد يكون استخدام البيانات مكلفًا.
- يمكن أن يؤدي تشغيل الوسائط قبل أن يريدها المستخدم إلى استهلاك النطاق الترددي ووحدة المعالجة المركزية، وبالتالي تأخير عرض الصفحة.
- قد يكون المستخدمون في سياق يكون فيه تشغيل الفيديو أو الصوت تدخليًا.
التحميل المسبق
توفّر السمة preload تلميحًا للمتصفّح حول مقدار المعلومات أو المحتوى الذي يجب تحميله مسبقًا.
| القيمة | الوصف |
|---|---|
none |
قد يختار المستخدم عدم مشاهدة الفيديو، لذا لا تحمّل أي محتوى مسبقًا. |
metadata |
يجب تحميل البيانات الوصفية (المدة والأبعاد والمسارات النصية) مسبقًا، ولكن مع الحد الأدنى من الفيديو. |
auto |
ويُعدّ تنزيل الفيديو بالكامل على الفور أمرًا مرغوبًا فيه. وتؤدي السلسلة الفارغة إلى النتيجة نفسها. |
تختلف تأثيرات السمة preload على المنصات المختلفة.
على سبيل المثال، يخزّن Chrome مؤقتًا 25 ثانية من الفيديو على أجهزة الكمبيوتر المكتبي، ولكن لا يخزّن أي ثوانٍ على أجهزة iOS أو Android. يعني ذلك أنّه قد يحدث تأخير في بدء التشغيل على الأجهزة الجوّالة،
وهو ما لا يحدث على أجهزة الكمبيوتر المكتبي. يمكنك الاطّلاع على التشغيل السريع مع التحميل المُسبق للصوت والفيديو أو
مدوّنة ستيف سودرز لمزيد من التفاصيل.
بعد أن تعرّفت على كيفية إضافة الوسائط إلى صفحة الويب، حان الوقت للتعرّف على تسهيل استخدام الوسائط، حيث ستضيف ترجمة وشرحًا إلى الفيديو للأشخاص الذين يعانون ضعفًا في السمع، أو عندما لا يكون تشغيل الصوت خيارًا متاحًا.