التعرّف على أساسيات الفيديو زيادة التفاعل:
هل تفكر في إضافة فيديو إلى موقعك الإلكتروني؟ مع ازدياد سرعة اتصالات الأجهزة والشبكات وفعاليتها، يمكنك الاستفادة من تقنيات إضافية، مثل استخدام الفيديو، لإنشاء صفحات الويب. تُظهر الأبحاث أنّ المواقع الإلكترونية التي تتضمّن فيديوهات تحقّق تفاعلًا ومبيعات أعلى. لذا، حتى إذا لم تضِف فيديو إلى مواقعك الإلكترونية بعد، من المرجّح أنّه لن يستغرق الأمر سوى وقت قصير قبل أن تفعل ذلك.
من المرجّح أن تكون ملفات الفيديو التي تضيفها إلى موقعك الإلكتروني هي
الملفات الأكبر حجمًا التي يتم تنزيلها. لهذا السبب، من المهم جدًا التأكّد من
أنّ الملفات مصمّمة لتشغيلها بسرعة وسلاسة لجميع عملائك.
على الرغم من أنّ الفيديو يمكن أن يزيد من التفاعل ورضا العملاء، إلا أنّ الفيديو الذي
لا يمكن تشغيله أو يتوقّف أثناء التشغيل قد يتسبب في انزعاج العملاء.
تركّز هذه المشاركة على استخدام علامة <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. في أحد الأمثلة، يمكنك الاطّلاع على الفرق في فيلم مدته دقيقتان:
برنامج الترميز | حجم الملف |
---|---|
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
إلى بدء التشغيل في وضع كتم الصوت. في حال عدم توفّر عناصر تحكّم،
سيظلّ الصوت مُسكتًا طوال عملية التشغيل. إذا كان ذلك هو المطلوب، قد يكون من المنطقي إزالة المقطع الصوتي من الفيديو. ويؤدي ذلك بدوره إلى تصغير حجم ملف الفيديو الذي يتم إرساله إلى العميل.
كما هو الحال مع الحاويات وبرامج الترميز، فإنّ إزالة الملف الصوتي، والتي تُعرف أيضًا باسم إزالة الترميز، لا تقع أيضًا ضمن نطاق هذه المقالة. يمكنك الاطّلاع على التعليمات في جدول التلاعب بالوسائط.
تكرار
لإرسال فيديو يعرض المحتوى بشكل متكرّر (مثل صورة GIF متحركة)، أضِف السمة loop
. وبما أنّ ملفات الفيديو عادةً ما تكون أصغر حجمًا من ملفات GIF المتحركة، تتيح لك هذه الميزةاستبدال ملفات GIF بملفات
فيديو.
تشغيل الفيديو تلقائيًا
إذا كنت تريد تشغيل الفيديو على الفور (مثلاً كفيديو في الخلفية أو
فيديو يتم تشغيله بشكل متكرّر مثل صورة GIF متحركة)، يمكنك إضافة السمة autoplay
:
<video src="myVideo.mp4" playsinline autoplay>
ومع ذلك، لكي يتم تشغيل الفيديو تلقائيًا على متصفّحات الأجهزة الجوّالة، يجب أيضًا إضافة السمة muted
:
<video src="myVideo.mp4" playsinline autoplay muted>
الخاتمة
ستؤدي إضافة فيديو إلى موقعك الإلكتروني إلى تحسين تفاعل العميل ، ولكن من المهم تقديم المحتوى بشكل صحيح، والتأكّد من تشغيل الفيديو بسلاسة وبدون توقّف. يمكن أن يساعدك استخدام السمات المضمّنة في علامة <video> بشكل كبير في عرض فيديو مثالي لجميع زوّار موقعك الإلكتروني.