تعلُّم الفيديو الأساسي زيادة التفاعل:
هل تفكر في إضافة فيديو إلى موقعك الإلكتروني؟ نظرًا لزيادة سرعة وفعالية الأجهزة والاتصال بالشبكة، أصبح بإمكانك تجاوز الصور وإضافة الفيديوهات إلى مجموعة أدواتك لإنشاء الويب. أظهرت الأبحاث أنّ المواقع الإلكترونية التي تتضمّن فيديوهات تحقّق زيادة في التفاعل والمبيعات. لذا، حتى لو لم تكن قد أضفت الفيديو إلى مواقعك الإلكترونية بعد، من المحتمل أن يكون الأمر مسألة وقت.
وفي الغالب، تكون ملفات الفيديو التي تضيفها إلى موقعك الإلكتروني هي أكبر
الملفات التي يتم تنزيلها. لهذا السبب، من المهم للغاية ضمان
إنشاء الملفات للتشغيل السريع والثابت لجميع العملاء.
على الرغم من أن الفيديو يمكن أن يزيد من التفاعل ورضا العملاء، إلا أن الفيديو الذي
لا يتم تشغيله أو يتوقف أثناء التشغيل يمكن أن يؤدي إلى استياء العملاء.
تركّز هذه المشاركة على استخدام علامة <video> HTML5 لإرسال الفيديوهات، وبالتالي لن تتناول بث الفيديو المباشر.
هيا بنا نبدأ!
علامة <video>
يبدو الأمر واضحًا، أليس كذلك؟ لإضافة فيديو، عليك إضافة العلامة <video> والإشارة إلى
مصدر، ومن ثم يتم نقلك إلى السباقات.
<video src="myVideo.mp4">
وأنت على حق. في أعلى مستوى، هذا كل ما تحتاجه لإضافة فيديو إلى الويب. ولكن هناك الكثير من السمات التي يمكنك إضافتها إلى علامة الفيديو لتحسين تنسيق الفيديو وطريقة عرضه.
علامة <source>
ربما تكون أفضل طريقة لتحسين عرض الفيديو على الويب هي تحسين الملفات التي يتم إرسالها إلى المتصفح. يمكنك إجراء ذلك باستخدام
علامة <source>:
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
يشير هذا إلى ثلاثة ملفات مصدر منفصلة. يبدأ المتصفح من الأعلى، ويختار أول تنسيق وبرنامج ترميز يمكن استخدامه. في عالم الفيديو، يمكن حفظ تنسيق الملف، الذي يُطلق عليه عادةً اسم الحاوية، باستخدام برامج ترميز مختلفة، لكل منها سمات مختلفة. (مزيد من المعلومات حول هذا الموضوع) في المثال أعلاه، يكون الخيار الأول هو تنسيق WebM (الذي يمكن ترميزه باستخدام برنامج ترميز VP8 أو VP9)، وهو متاح (في وقت كتابة هذا التقرير) من قِبل% 78 من المستخدمين العالميين. الخيار الثاني هو برنامج ترميز H.265 لملفات mp4، والمتوافق مع أجهزة iOS والأجهزة التي تعمل بإصدارات أحدث. أما برامج الترميز هذه، فهي أحدث وقد حسّنت ضغط البيانات، مع تقديم فيديو عالي الجودة مماثل لتنسيقات الفيديوهات القديمة.
الخيار الأخير في قائمتنا هو تنسيق H.264 mp4، وهو متوافق مع% 92 من جميع المستخدمين حول العالم، غير أنّ هذا التنسيق كان قديمًا، وبالتالي فهو أكبر بكثير من فيديوهات WebM أو H.265 بشكل عام. في مثال واحد، يمكنك رؤية الفرق لفيلم دقيقتين:
| برنامج الترميز | حجم الملف |
|---|---|
| VP8 | 5.5 ميغابايت |
| VP9 | 4.2 ميغابايت |
| H.265 | 5.4 ميغابايت |
| H.264 | 16.1 ميغابايت |
يشكّل إرسال ملفات أصغر حجمًا أفضل وسيلة لتحسين الأداء يمكنك إجراؤها لعرض الفيديوهات بشكل أفضل. عند تنزيل فيديو أصغر حجمًا، يتم تشغيل الفيديو في وقت أقرب، ويُمتلئ المخزن المؤقت للفيديو بشكل أسرع. يؤدي ذلك إلى أكشاك أقل أثناء تشغيل الفيديو. بالإضافة إلى ذلك، يتم تقليل التحميل على الخادم، ما يعزز متطلبات التخزين المتزايدة لملفات الفيديو المتعددة.
سمة التحميل المُسبق
لا يمكن بدء تشغيل مقاطع الفيديو إلا بعد تنزيل بعض مقاطع الفيديو وتخزينها
على الجهاز. باستخدام سمة "التحميل المُسبق"، يمكنك التحكّم في مقدار الفيديو الذي يتم
تنزيله عند تحميل الصفحة. تتوفّر ثلاث قيم لسمة التحميل المُسبق:
auto وmetadata وnone.
preload='auto'
في حال استخدام 'auto'، سيتم تنزيل الفيديو بالكامل، بغض النظر عمّا إذا
ضغط المستخدم على "تشغيل" أم لا. يتيح ذلك تشغيل الفيديو السريع أثناء تنزيل
الفيديو محليًا قبل أن يضغط المستخدم على تشغيل. من ناحية استخدام البيانات (ومنظور حمل الخادم)، يجب استخدام هذه الطريقة فقط عندما يكون من المرجّح جدًا أن تتم مشاهدة الفيديو. وإلا سيتم إهدار جميع بيانات تنزيل الفيديو الكامل.
preload='metadata'
وهذا هو الإعداد التلقائي للتحميل المُسبق على Chrome وSafari. عند استخدام "'metadata'"، يتم تنزيل
أول% 3 من الفيديو. على الرغم من أنّ ذلك يؤدي إلى أخذ الحذر من "'auto'"، إلا أنّ تنزيل% 3 فقط من الفيديو يؤدي إلى تكلفة أقل بكثير من الخادم أو البيانات
مقارنةً بتكلفة الفيديو الكامل، مع ضمان تخزين جزء من الفيديو محليًا لبدء تشغيل الفيديو بسرعة.
preload='none'
يؤدي هذا الإجراء إلى حفظ أكبر قدر من البيانات، ولكنه سيؤدي إلى إبطاء بدء تشغيل الفيديو عند الضغط على تشغيل، لأنّه وفقًا لحالة الإعداد، لا يتم تحميل أي كيلوبايت من الفيديو مسبقًا على الجهاز. بالنسبة إلى مقاطع الفيديو الحالية ولكن من غير المحتمل تشغيلها، فهذا هو الإعداد المناسب. يمكن استخدام ذلك أيضًا إذا فعّل المستخدم الوضع البسيط في المتصفّح.
poster
من الأفضل عرض صورة ملصق فوق نافذة الفيديو قبل بدء تشغيل الفيديو:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
يعرض فيديو بدون ملصق شاشة سوداء قبل بدئه.
إنّ الفيديو الذي يتضمّن ملصقًا يكون أكثر جاذبية.
من خلال إضافة صورة بدلاً من المربع الأسود على الصفحة، تجعل موقعك الإلكتروني
أكثر جذبًا وتفاعلاً. في المقابل، يؤدي استخدام السمة poster إلى إضافة إمكانية
تنزيل الصورة قبل بدء عملية تنزيل الفيديو. لهذا السبب، يمكنك تجنّب إضافة ملصق للفيديوهات التي يتم تشغيلها تلقائيًا (لأنّ التنزيل الإضافي
سيؤخر تنزيل الفيديو).
عناصر التحكّم في التشغيل
تؤدي إضافة السمة controls إلى إضافة عناصر التحكّم في التشغيل. بدونها، لن يتمكن عملاؤك
من تشغيل الفيديو أو إيقافه. يجب عليك إضافة هذا إلى مقاطع الفيديو حتى يتمكن
المستخدمون من التوقف والتوقف مؤقتًا وتغيير مستوى الصوت وما إلى ذلك. بالنسبة إلى مقاطع الفيديو التي تعمل في الخلفية أو
التي تتكرر، ننصحك بحذف هذه السمة.
تم كتم الصوت
تؤدي السمة muted إلى بدء التشغيل في حالة كتم الصوت. في حال عدم توفير أي عناصر تحكم،
سيظل الصوت مكتومًا طوال فترة التشغيل. إذا كان ذلك مقصودًا، ننصحك بإزالة المقطع الصوتي من الفيديو. ويقلل ذلك أيضًا من حجم ملف الفيديو الذي يتم إرساله إلى العميل.
كما هي الحال في الحاويات وبرامج الترميز، إنّ إزالة الملف الصوتي، التي تُعرف أيضًا باسم "إزالة التشويش"، خارج نطاق هذه المقالة. يمكنك العثور على التعليمات في ورقة المعلومات المرجعية لمعالجة الوسائط.
loop
ولإرسال فيديو تكرار المحتوى (مثل صورة GIF متحرّكة)، يجب إضافة السمة loop. بما أنّ ملفات الفيديو عادةً ما تكون أصغر بكثير من ملفات GIF المتحركة، تتيح لك هذه الآلية استبدال ملفات GIF بملفات
فيديو.
تشغيل الفيديو تلقائيًا
إذا أردت تشغيل الفيديو فورًا (على سبيل المثال كفيديو في الخلفية أو فيديو يتم تكراره مثل صورة GIF متحرّكة)، يمكنك إضافة السمة autoplay:
<video src="myVideo.mp4" autoplay>
ومع ذلك، يجب إضافة السمة muted أيضًا ليتم تشغيل فيديو تلقائيًا على المتصفحات المتوافقة مع الأجهزة الجوّالة:
<video src="myVideo.mp4" autoplay muted>
الخلاصة
ستؤدي إضافة فيديو إلى موقعك الإلكتروني إلى إضافة مجال جديد من التفاعل لعملائك، ولكن من المهم أن تقدّم المحتوى بشكل صحيح، ما يضمن لك تشغيل الفيديو بسلاسة وبدون عوائق. يمكن أن يساعدك استخدام السمات المضمنة في العلامة <video> بشكل كبير في تقديم فيديو خالية من العيوب لكل من يزور موقعك الإلكتروني.