ابتكار ميزات جديدة تتجاوز الصور باستخدام الفيديوهات الأساسية على الويب

التعرّف على أساسيات الفيديو زيادة التفاعل:

Doug Sillars

هل تفكر في إضافة فيديو إلى موقعك الإلكتروني؟ مع تزايد سرعة اتصالات الشبكات والأجهزة وفعاليتها، يمكنك الاستفادة من تقنيات إضافية، مثل استخدام الفيديو، لإنشاء صفحات الويب. تُظهر الأبحاث أنّ المواقع الإلكترونية التي تتضمّن فيديوهات تحقّق تفاعلًا ومبيعات أعلى. لذا، حتى إذا لم تضِف فيديو إلى مواقعك الإلكترونية بعد، من المرجّح أنّه لن يمرّ وقت طويل قبل أن تفعل ذلك.

من المرجّح أن تكون ملفات الفيديو التي تضيفها إلى موقعك الإلكتروني هي الملفات الأكبر حجمًا التي يتم تنزيلها. لهذا السبب، من المهم جدًا التأكّد من أنّ الملفات مصمّمة لتشغيلها بسرعة وسلاسة لجميع عملائك. على الرغم من أن الفيديو يمكن أن يزيد التفاعل ورضا العملاء، إلا أن مقطع الفيديو الذي لا يتم تشغيله أو يتوقّف أثناء التشغيل يمكن أن يؤدي إلى استياء العملاء. تركّز هذه المشاركة على استخدام علامة <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 وأجهزة Mac المزودة بمعالجات أحدث . إنّ برامج الترميز هذه أحدث وتعمل على تحسين ضغط البيانات، مع تقديم فيديو بجودة مماثلة لتنسيقات الفيديو القديمة.

الخيار الأخير في قائمتنا هو تنسيق H.264 mp4، وهو متاح لدى %92 من مستخدِمي الويب، ولكنه تنسيق قديم، وبالتالي يكون حجمه أكبر بكثير من فيديوهات WebM أو H.265. في أحد الأمثلة، يمكنك ملاحظة الفرق لفيلم مدته دقيقتان:

إنّ إرسال ملفات أصغر حجمًا هو أفضل تحسين للأداء يمكنك إجراءه لعرض فيديوهاتك بشكل أفضل. عند تنزيل فيديو أصغر حجمًا، يبدأ تشغيله بشكل أسرع، ويمتلئ التخزين المؤقت للفيديو بشكل أسرع. ويؤدي ذلك إلى تقليل عدد مرات توقُّف الفيديو عن التشغيل أثناء تشغيله. بالإضافة إلى ذلك، يتم خفض حمولة الخادم، ما يعوض متطلبات مساحة التخزين المتزايدة لملفات الفيديو المتعدّدة.

سمة التحميل المُسبَق

لا يمكن بدء تشغيل الفيديوهات إلا بعد تنزيل بعض الفيديوهات وتخزينها على الجهاز. باستخدام سمة التحميل المُسبَق، يمكنك التحكّم في مقدار الفيديو الذي يتم تنزيله عند تحميل الصفحة. هناك ثلاث قيم لسمة "التحمّل المُسبَق": 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 إلى بدء التشغيل في وضع كتم الصوت. في حال عدم توفّر عناصر تحكّم، سيظلّ الصوت مُسكتًا طوال عملية التشغيل. إذا كان ذلك هو المطلوب، قد يكون من المنطقي إزالة المقطع الصوتي من الفيديو. ويؤدي ذلك بدوره إلى تصغير حجم ملف الفيديو الذي يتم إرساله إلى العميل.

كما هو الحال مع الحاويات وبرامج الترميز، لا تشمل هذه المقالة أيضًا إزالة الملف الصوتي، وتُسمّى أيضًا إزالة التشويش. يمكنك الاطّلاع على التعليمات في جدول التلاعب بالوسائط .

تكرار

لإرسال فيديو يكرّر المحتوى (مثل صورة GIF متحرّكة)، أضِف السمة loop. وبما أنّ ملفات الفيديو عادةً ما تكون أصغر حجمًا من ملفات GIF المتحركة، تتيح لك هذه الميزةاستبدال ملفات GIF بملفات فيديو.

تشغيل الفيديو تلقائيًا

إذا كنت تريد تشغيل الفيديو على الفور (مثلاً كفيديو في الخلفية أو فيديو يتم تشغيله بشكل متكرّر مثل صورة GIF متحركة)، يمكنك إضافة السمة autoplay:

<video src="myVideo.mp4" playsinline autoplay>

ومع ذلك، لكي يتم تشغيل الفيديو تلقائيًا على متصفّحات الأجهزة الجوّالة، يجب أيضًا إضافة السمة muted :

<video src="myVideo.mp4" playsinline autoplay muted>

الخاتمة

ستؤدي إضافة فيديو إلى موقعك الإلكتروني إلى تحسين تفاعل العميل ، ولكن من المهم تقديم المحتوى بشكل صحيح، والتأكّد من تشغيل الفيديو بسلاسة وبدون توقّف. يمكن أن يساعدك استخدام السمات المضمّنة في علامة <video> بشكل كبير في عرض فيديوهات خالية من الأخطاء لكل من يزور موقعك الإلكتروني.