لقد أعددت ملف فيديو بشكل صحيح للويب. لقد منحته الأبعاد والدقة الصحيحتَين. لقد أنشأت أيضًا ملفَّي 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 في الأداء عندما تكون هناك مصادر متعددة بأنواع غير متوافقة.
هناك بضع طرق يمكنك من خلالها الاطّلاع على التفاصيل. يمكنك الاطّلاع على مقالة A Digital Media Primer for Geeks لمعرفة المزيد عن طريقة عمل الفيديو والصوت على الويب. يمكنك أيضًا استخدام تصحيح الأخطاء عن بُعد في "أدوات مطوّري البرامج" لمقارنة نشاط الشبكة مع سمات النوع وبدون سمات النوع.
تحديد وقتَي البدء والانتهاء
يمكنك توفير معدل نقل البيانات وجعل موقعك الإلكتروني أكثر استجابةً من خلال استخدام أجزاء الوسائط لإضافة وقتَي البدء والانتهاء إلى عنصر الفيديو.
لاستخدام جزء وسائط، أضِف #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)، جرِّب نهجًا متجاوبًا (مثل النهج الذي اقترحه John Surdakowski).
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: كان يتطلب في السابق إجراءً تفاعليًا من المستخدم، ولكنّه بدأ يخفّف هذا الشرط في الإصدارات الأخيرة. لمزيد من التفاصيل، اطّلِع على مقالة New <video> Policies for iOS.
حتى على الأنظمة الأساسية التي يمكن فيها التشغيل التلقائي، عليك تحديد ما إذا كان من الجيد تفعيل هذه الميزة:
- يمكن أن يكون استخدام البيانات مكلفًا.
- يمكن أن يؤدي تشغيل الوسائط قبل أن يريدها المستخدم إلى استهلاك معدل نقل البيانات ووحدة المعالجة المركزية، وبالتالي تأخير عرض الصفحة.
- قد يكون المستخدمون في سياق يكون فيه تشغيل الفيديو أو الصوت أمرًا مزعجًا.
التحميل المسبق
تقدّم السمة preload تلميحًا للمتصفّح بشأن مقدار المعلومات أو المحتوى الذي يجب تحميله مسبقًا.
| القيمة | الوصف |
|---|---|
none |
قد يختار المستخدم عدم مشاهدة الفيديو، لذا لا تحمِّل أي محتوى مسبقًا. |
metadata |
يجب تحميل البيانات الوصفية (المدة والأبعاد والمسارات النصية) مسبقًا، ولكن مع الحد الأدنى من الفيديو. |
auto |
يُعد تنزيل الفيديو بالكامل على الفور أمرًا مرغوبًا فيه. تؤدي السلسلة الفارغة إلى النتيجة نفسها. |
تؤثر السمة preload بشكل مختلف على الأنظمة الأساسية المختلفة.
على سبيل المثال، يخزّن Chrome مؤقتًا 25 ثانية من الفيديو على الكمبيوتر المكتبي، ولكن لا يخزّن أي محتوى مؤقتًا على iOS أو Android. هذا يعني أنّه على الأجهزة الجوّالة، قد تحدث تأخيرات في بدء التشغيل لا تحدث على الكمبيوتر المكتبي. لمزيد من التفاصيل، اطّلِع على مقالة Fast playback with audio and video preload أو
مدونة Steve Souders.
بعد أن تعرّفت على كيفية إضافة الوسائط إلى صفحة الويب، حان الوقت للتعرّف على إمكانية الوصول إلى الوسائط حيث ستضيف ترجمة وشرحًا إلى الفيديو للمستخدمين الذين يعانون من ضعف السمع ، أو عندما لا يكون تشغيل الصوت خيارًا مناسبًا.