تحسين حجم الفيديو وجودته

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

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

هناك حل على الرغم من! من خلال تشغيل التحسينات الأساسية لمقاطع الفيديو الخاصة بنا قبل إضافتها إلى مواقع الويب الخاصة بنا ، يمكننا منع حدوث هذه المشكلات إلى الأبد - حسنًا ، معظمها. كل ما نحتاجه حقًا هو تصغير حجم الملف - بطريقة أو بأخرى. إذن ، الحيلة الآن هي: كيف نجعل الملف أصغر دون تقليل الجودة؟

في هذه المقالة ، سنتعرف على الأدوات وبعض الخطوات التي يمكنك اتخاذها لتحسين مقاطع الفيديو الخاصة بك للتشغيل - كل ذلك لتجنب الأكشاك وإثارة إعجاب عملائك!

بيانات العالم الحقيقي

ليس من غير المألوف العثور على مواقع الويب التي تحتوي على مقاطع فيديو كبيرة للغاية - على سبيل المثال ، يتم استخدامها كمقاطع فيديو خلفية للبطل. في بحثي ، كنت أبحث في المواقع الموجودة في HTTPArchive للهاتف المحمول لشهر ديسمبر 2020 ، ولم يكن من الصعب تحديد عدد كبير من المواقع التي تقوم بتحميل ملفات فيديو ضخمة بشكل افتراضي ، سواء على الهاتف المحمول أو على سطح المكتب.

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

قصة القرع باتش

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

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

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

يمكنك البدء بفتح DevTools في متصفحك. بمجرد تحميل الصفحة ، يمكننا الانتقال إلى علامة التبويب "الشبكة" ، والتصفية حسب "الوسائط" لمشاهدة جميع ملفات الفيديو:

نرى أنه يتم تنزيل ملف MP4. لا يأتي الملف عبر الشبكة كملف مستقل ؛ بدلاً من ذلك ، يجب أن تقوم خدمة البث بتقسيم الملف إلى أجزاء قليلة ، لذلك قد ترى طلبات 206 (محتوى جزئي) للملف نفسه.

بالنظر إلى رؤوس الردود لهذا الملف ، يمكننا تحديد بعض التفاصيل:

 accept-ranges: bytes access-control-allow-headers: x-test-header, Origin, X-Requested-With, Content-Type, Accept access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS Content-Length: 87690242 Content-Range: bytes 70025216-157715457/157715458 content-type: video/mp4 date: Fri, 22 Jan 2021 15:27:26 GMT last-modified: Mon, 24 Jun 2019 05:13:04 GMT server: Apache

الآن ، بعض هذه الأرقام مخيفة قليلاً لأنها كبيرة قليلاً. في الواقع ، غالبًا ما تكون كبيرة جدًا لدرجة أنني وجدت نفسي أعتاد على إضافة الفواصل ، لذا يمكنني الحصول على فكرة عن حجم الملفات في الواقع. في هذه الحالة ، يكون التنزيل الجزئي 87 ميغا بايت ، والملف بأكمله 157،715،457 بايت. نعم ، هذا صحيح ، هذا الفيديو بحجم 157 ميغا بايت ، و (حاول) تحميله على هاتفي في وقت سابق اليوم! لا عجب أنها لم تنجح.

إذن ما الجديد في هذا الفيديو؟

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

لذلك ، لنبدأ بأداة التشخيص المسماة FFprobe. يجمع FFprobe معلومات من تدفقات الوسائط المتعددة ، ويوفر لك تفاصيل حول كيفية ترميز الفيديو وكيف سيتم تشغيله. إنه جزء من حزمة FFMPEG ، وهو في الواقع سهل الاستخدام للغاية.

أفضل من ذلك: إذا كان الفيديو الخاص بك موجودًا على الإنترنت بالفعل ، فهناك نسخة عبر الإنترنت من ffprobe يمكننا الانتقال إليها على الفور. لذلك ، دعنا فقط ندخل عنوان URL في النموذج ، ونحصل على تفاصيل حول الفيديو في المقابل (مثل أبعاد الفيديو ، ومعدل البت ، وقليلًا من البيانات الوصفية).

عندما أقوم بإضافة عنوان URL الخاص بـ MP4 من مزرعة اليقطين ، نرى على الفور إحدى المشكلات. تُرجع استجابة show_format من ffprobe ملخصًا: على ما يبدو ، هناك دفقان ، وطولهما 62 ثانية (وكلها تبدو طبيعية بما يكفي لعدم إثارة أي شكوك). ولكن عندما نصل إلى الحجم ومعدل البت ، نرى على الفور مكان فشل الفيديو.

كما ذكرنا سابقًا ، قد يكون من الجيد التعود على إضافة الفواصل إلى هذه الأعداد الكبيرة. كما اتضح ، يبلغ حجم لقطات الطائرة بدون طيار التي تحلق فوق الميدان 157 ميغا بايت ، ومعدل بت يبلغ 20 ميغا بايت في الثانية! هذا يعني أنه لكي يتم تشغيل الفيديو بسلاسة ، يجب أن تكون الشبكة قادرة على دفق الفيديو بمعدل أسرع من 20 ميجابايت في الثانية ، وهذا هو بالضبط سبب توقفه على الهاتف.

ما هو معدل بت التشغيل المثالي؟

لتجنب المماطلة ، نحتاج إلى دفق الفيديو بمعدل مناسب . هذا هو المكان الذي يصبح فيه معدل البت مهمًا. معدل البت هو سرعة تشغيل الفيديو. لكي يقوم المتصفح بتشغيل الفيديو بسلاسة ، يجب أن يتم تنزيل الفيديو بشكل أسرع من تشغيله - مما يعني أنه سيتم تشغيل الفيديو بسلاسة فقط إذا كانت سرعة الشبكة تزيد عن 20 ميجابايت في الثانية. عندما أفكر في سرعات الشبكة ، أميل إلى الاعتماد على ملفات تعريف حركة مرور WebPageTest:

كما يمكننا أن نقول من النظرة العامة أعلاه ، قد يتم تشغيل الفيديو بشكل جيد على "الاتصال الأصلي" ، وعلى اتصال FIOS للكابل البصري فائق السرعة (20 ميجابت في الثانية هي السرعة المطلوبة بالضبط ، لذلك نأمل ألا تحتاج إلى تنزيل أي شيء آخر في معرفتي). ومع ذلك ، تتمتع جميع الاتصالات الأخرى بسرعة تنزيل أقل بكثير من 20 ميجابت في الثانية. إذا تم تحميل الفيديو بهذه السرعات ، فسيحاول المشغل استهلاك الفيديو بشكل أسرع مما يمكن تنزيله ، وسيتوقف الفيديو نهائيًا.

يعيّن معدل البت للفيديو الخاص بك الحد الأدنى لسرعة الشبكة التي يمكن لعملائك استخدامها. بشكل عام ، يجب أن يكون معدل البت للفيديو الخاص بك حوالي 80٪ من الإنتاجية المتاحة على الشبكة. لذا ، فإن الفيديو الذي تبلغ سعته 20 ميجابايت في الثانية يحتاج حقًا إلى إنتاجية للشبكة تبلغ 24 ميجابت في الثانية لتشغيل الفيديو بسلاسة. كل شخص على اتصال أبطأ سيكون لديه تجربة سيئة للغاية ومن المحتمل ألا يتمكن من مشاهدة الفيديو على الإطلاق. وبشكل أكثر تحديدًا ، هذا يعني أنه لكي نتمكن من اللعب بسلاسة وحريرية على 4G ، يجب أن يظل معدل البت أقل من 7.2 ميجا بايت في الثانية.

هل يمكننا خفض معدل نقل بيانات هذا الفيديو؟

نعم! لنلقِ نظرة على بعض التكوينات التي يمكننا استخدامها لتقليل معدل نقل بيانات هذا الفيديو. لكن أولاً ، دعنا نلقي نظرة على البيانات التي نحصل عليها من FFprobe. الشيء الوحيد الملحوظ هو قيمة r_frame_rate ، وهي عدد الإطارات في الثانية في الفيديو. قيمتها 60000/1001. هذا يعني أن معدل الإطارات للفيديو هو 60 إطارًا في الثانية. ومع ذلك ، تتراوح معدلات الإطارات النموذجية على الويب بين 25 و 30 ، لذا فإن أول شيء يمكننا القيام به هو إعادة تشفير الفيديو بمعدل بت أقل .

شيء آخر يجب أخذه في الاعتبار هو عامل المعدل الثابت . في FFMPEG ، معيار الجودة / الحجم الرئيسي هو ضغط عامل المعدل الثابت (CRF) ، بقيم تتراوح من 0 (بدون ضغط) إلى 50 (ضغط عالي). القيمة الافتراضية لـ CRF في FFMPEG هي 23 (إذا تركت معلمة CRF ، فسيكون الفيديو الخاص بك بهذه القيمة). في تجربتي الشخصية ، لا تزال القيم من 23 إلى 28 تنتج مقاطع فيديو عالية الجودة ، وتبدو جيدة على الويب وتقل حجم الملف بشكل كبير.

لنبدأ عند 30 إطارًا في الثانية و CRF 23 . سيبدو الأمر Terminal كما يلي:

 ffmpeg -i input.mp4 -vcodec h264 -acodec aac -crf 23 -strict -2 :v fps=fps=30 output.mp4

هاهو! ينتج عن هذا فيديو 81.5 ميغابايت - تحسن بالفعل بنسبة 48٪. لكن الفيديو لا يزال كبيرًا للغاية ، حيث يبلغ معدل البت 10 ميجابايت في الثانية. إذا قمنا بتعيين CRF على 28 ، فسينخفض ​​الملف إلى 35.4 ميجابايت ، بمعدل بت 4.5 ميجابايت في الثانية والذي من المرجح أن يعمل بشكل جيد على اتصال 4G.

هذا تحسين خمس مرات على الفيديو الأصلي . لتسهيل الوصول إلى هذا الفيديو ، يمكننا تغيير حجم الفيديو لجعله أصغر. هذا شيء سنناقشه في قسم البث أدناه.

الجياع لقصة البيتزا

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

في تلك الليلة ، تحصل على رسالة نصية من شركة الاتصالات الخاصة بك تفيد بأنك استخدمت بيانات أكثر بكثير مما كنت تتخيل (وبالتأكيد أكثر بكثير مما كنت تخطط له في الأصل!). اثنين من سيارات الأجرة وموقع البيتزا - ما هي تكلفة موقع البيتزا مرة أخرى؟

أدخل موقع البيتزا في WebPageTest وتحقق منه عبر اتصال محمول:

44 ميجا بايت من الفيديو . من أين أتت؟ حتى بعد ذلك ، عندما نفحص المصدر والشلال بتفاصيل أكثر قليلاً ، يمكننا أن نرى أن هناك بالفعل مقطعي فيديو! لحسن الحظ (أو للأسف؟) ، لم يتم تنزيل أي منهما بالكامل:

هذا يثير بعض المخاوف وبعض الأسئلة.

أولاً ، لماذا تم تنزيل الكثير من مقاطع الفيديو عندما لم يتم تشغيلها تلقائيًا؟ لم نتمكن من النقر فوق أي شيء حتى الآن ، لكننا استخدمنا بالفعل ما يقرب من 40 ميغابايت من البيانات. الجواب ، كما هو الحال دائما ، يكمن في المصدر. حسنًا ، "عرض المصدر" ، هذا هو.

 <video class="video-js vjs-big-play-centered" controls preload="auto" width="1050" height="591" poster="assets/home_poster.jpg" data-setup='{"fluid": true}'>
  <source src="assets/home_1.mp4" type='video/mp4'> <source src="assets/home.webm" type='video/webm'>
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video>

بعيدًا عن الخفاش ، نرى مشكلتين على الأقل:

• التحميل المسبق = "تلقائي"
  عندما نقوم بتعيين preload="auto" ، فإننا نتجاوز الإعداد الافتراضي للمتصفح ، ونفرض تنزيل الفيديو - سواء ضغط العميل على "تشغيل" أم لا. سمة preload الافتراضية هي metadata ، وكان من الممكن أن تؤدي إلى تنزيل 100 كيلوبايت قليلة. باعتراف الجميع ، إنها نتيجة أفضل بكثير لزوار الموقع الذين لن يشاهدوا هذا الفيديو أبدًا.
• طلب الفيديو
  إذا كان لديك إصدارات متعددة من الفيديو (في هذه الحالة: h264 .mp4 و VP8 .webm مقاطع فيديو مشفرة) ، سيختار المتصفح أول فيديو يعرف كيفية تشغيله. الآن ، يدعم كل متصفح حديث mp4 ، بينما تدعم معظم المتصفحات الحديثة أيضًا webm (95.4٪ دعم عالمي ، وفقًا لـ CanIUse).

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

window.onload = addAutoplay(); var videoLocation = document.getElementById("hero-video"); function addAutoplay() { if(window.innerWidth > 992){ videoLocation.setAttribute("autoplay",""); }; }
window.onload = addAutoplay(); var videoLocation = document.getElementById("hero-video"); function addAutoplay() { if(window.innerWidth > 992){ videoLocation.setAttribute("autoplay",""); }; }

إذا قمنا الآن بتشغيل ffprobe على هذين الفيديوين ، فسنكتشف اختلافات كبيرة في الأحجام:

يعد webm أصغر بنسبة 90٪ ، ومع ذلك لا يحتوي على أي مشاهدات ، لأن كل متصفح يدعم تنسيق MP4. يبلغ طول مقطعي الفيديو هاتين 640 × 360 و 140 ثانية. يؤدي تشغيل الأمر ffmpeg من الأعلى على mp4 إلى إنتاج فيديو بحجم 12.4 ميجا بايت ، لذلك من المحتمل أن المطورين اتبعوا عملية مماثلة لضغط وتشفير متغير الويب. ربما لن يكون preload="auto" لـ 12.5 ميغابايت أمرًا سيئًا على الإطلاق.

تم تصوير الفيديو الثاني (لقطات طائرة بدون طيار داخل المطعم) بدقة Full HD (1080 بكسل) ، ولكن بالمثل يتم ضغطه من 140 ميجا بايت إلى 35 ميجا بايت. لذلك ، يمكن أن تقلل 120 ثانية مع FFMPEG وزن الفيديو في هذه الصفحة من 160 ميجابايت إلى 57 ميجابايت. سيؤدي تقليب ترتيب webm / mp4 إلى توفير بضعة ميغابايت إضافية لـ 95٪ من المتصفحات التي يمكنها دعم هذا التنسيق.

ماذا لو أردنا القيام بعمل أفضل ، ربما جعل مقاطع الفيديو تستجيب لشاشات مختلفة الأحجام؟ حسنًا ، دعنا نحصل على مقاطع فيديو أصغر - مع مقاطع فيديو سريعة الاستجابة!

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

يمكننا إنشاء دفق فيديو باستخدام FFMPEG (لقد استخدمت نصوص bash مثل هذه في الماضي) ، لكن هذا يتطلب منا معرفة جميع الأحجام والإعدادات التي نرغب في استخدامها (وكما ذكرنا سابقًا ، يحتوي FFMPEG على الكثير من الإعدادات! ).

لتسهيل دفق الفيديو ، توجد واجهات برمجة تطبيقات (مثل api.video و Mux) حيث تقوم بتحميل الفيديو الخاص بك ، وتنشئ الأدوات تدفقات الفيديو وتستضيف الفيديو الخاص بك. للإفصاح الكامل ، أعمل في السابق ، لذا لتبسيط خط معالجة الفيديو الخاص بي ، سأستخدم api.video لتحويل واستضافة مقاطع الفيديو الخاصة بي. باستخدام واجهة برمجة التطبيقات للتحميل ، يمكنني تحميل أي مقطع فيديو ، وستقوم الأداة بإنشاء نسخة متدفقة بأبعاد ومعدلات بت مختلفة (حاليًا 240 بكسل و 360 بكسل و 480 بكسل و 720 بكسل و 1080 بكسل و 4 K).

يتم تقليل معدلات البت لمقاطع الفيديو الصغيرة بشكل كبير ، حيث تقل أبعاد الفيديو. هذا يعني أن الفيديو سيتطلب سعة شبكة أقل على الشاشات الأصغر وسيتم تشغيله على شبكات أبطأ.

للإيجاز ، سنختبر فقط فيديو رقعة القرع. لقد تلقيت نتائج مماثلة مع فيديو الطائرة بدون طيار (مقطع الفيديو الآخر للبيتزا 360 بكسل فقط ، لذلك لا يستفيد كثيرًا من الأحجام الأصغر).

ملاحظة : يرجى تذكر أن هذا الفيديو هو حاليًا فيديو 1080p mp4 بسرعة 60 إطارًا في الثانية ، ويزن 157 ميجا بايت لجميع الزوار.

مع بعض التحسينات (CRF 28 وتقليل معدل الإطارات إلى 30 إطارًا في الثانية) ، تم تقليل الفيديو إلى 35.7 ميغابايت . باستخدام DevTools ، يمكننا محاكاة الأجهزة لمعرفة مقدار البيانات المستخدمة لتشغيل الفيديو لدفق الفيديو على شاشات مختلفة الأحجام.

يوضح الجدول أدناه المبلغ الإجمالي لحركة المرور المستخدمة. باستخدام HLS video ، يوجد مشغل JavaScript و CSS وخطوط وما إلى ذلك تضيف حوالي 1 ميغابايت من النفقات الإضافية. تم تضمين هذا في المجاميع أدناه:

عند 1080 بكسل ، يتم تنزيل حوالي 4 ميجابايت من الأصول الإضافية للبث ، ولكن بالنسبة لكل حجم آخر ، هناك وفورات كبيرة في البيانات دون أي خسارة في جودة الفيديو. لن يتم فقط تحديد حجم الفيديو بشكل مناسب للأجهزة ، ولكن من غير المرجح أن يتوقف ، حيث يتم تقليل معدل البت للأجهزة التي يُرجح أن تكون على اتصالات محمولة أبطأ.

يهتم دفق الفيديو بمعدلات الإطارات وحجم الفيديو ومخاوف الجودة - مما يضمن التشغيل السريع على أي شاشة بأي حجم وأي شبكة سرعة.

"

ميزة أخرى لدفق الفيديو: إذا كانت الشبكة بطيئة (أو أصبحت أبطأ فجأة) ، يمكن للمشغل ضبط الفيديو المعروض وتشغيل نسخة منخفضة الجودة من الفيديو - لضمان التشغيل على الجهاز - حتى في ظروف الشبكة السيئة. (يمكنك اختبار مقاطع الفيديو المختلفة باستخدام StreamOrNot ، وهو مشروع صغير مفتوح المصدر أصدرته منذ فترة.

الآن ، أليس هناك الكثير من النفقات العامة؟ ألا يمكننا فعل الشيء نفسه (فقط أسرع) مع YouTube أو Vimeo؟ بالتأكيد يمكننا ذلك ، ولكن بعد ذلك لن نتمكن من إزالة العلامة التجارية أو الإعلان تمامًا من الفيديو ، ناهيك عن العبء الزائد للنصوص التي تم تحميلها داخل إطار iframe لمشغل الفيديو. بالإضافة إلى ذلك ، قد ترغب في بعض الأحيان في استخدام الفيديو كفيديو خلفية على صفحة المنتج الخاص بك ، وتجنب أي نوع من العلامات التجارية الخارجية على الإطلاق.

خاتمة

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

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

شكرًا على القراءة ، وإذا كنت ترغب في معرفة المزيد ، فقد ترغب في قراءة المزيد حول أفضل ممارسات الفيديو هنا ، في Smashing Magazine ، وفي مدونتي:

• تشغيل الفيديو على الويب: الوضع الحالي للفيديو (الجزء الأول)
• تشغيل الفيديو على الويب: أفضل ممارسات توصيل الفيديو (الجزء 2)
• إخفاء مقاطع الفيديو على شبكة الجوال