تشغيل الفيديو على الويب: أفضل ممارسات توصيل الفيديو (الجزء 2)

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

TL؛ DR : في هذا المنشور ، نلقي نظرة على تقنيات لتحسين سرعة الفيديو وتسليمه لعملائك ، ونقدم قائمة بأفضل 9 ممارسات لمساعدتك على تقديم أصول الفيديو الخاصة بك.

مقاييس تشغيل الفيديو

هناك 3 مقاييس رئيسية لتشغيل الفيديو قيد الاستخدام اليوم:

1. وقت بدء تشغيل الفيديو
2. توقف الفيديو
3. جودة الفيديو

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

بدء تشغيل الفيديو

عندما يضغط المستخدم على تشغيل مقطع فيديو ، فإنهم يتوقعون أن يتمكنوا من مشاهدة الفيديو بسرعة. وفقًا لـ Conviva (الشركة الرائدة في تحليل مقاييس الفيديو) ، في الربع الأول من عام 2018 ، لم يبدأ تشغيل 14٪ من مقاطع الفيديو مطلقًا (أي 2.4 مليار تشغيل فيديو) بعد ضغط المستخدم على التشغيل.

2.3٪ من مقاطع الفيديو (400 مليون طلب فيديو) فشل في التشغيل بعد أن ضغط المستخدم على زر التشغيل. 11.54٪ (2B تشغيل) تم التخلي عنها من قبل المستخدم بعد الضغط على اللعب. دعنا نحاول تفصيل سبب هذه المشكلات.

فشل تشغيل الفيديو

يمثل فشل تشغيل الفيديو 2.3٪ من إجمالي عمليات تشغيل الفيديو. ما الذي يمكن أن يؤدي إلى هذا؟ في بيانات أرشيف HTTP ، نرى 0.3٪ من جميع طلبات الفيديو تؤدي إلى استجابة 4xx أو 5xx HTTP - لذلك تفشل بعض النسبة المئوية في عناوين URL سيئة أو تهيئة خاطئة للخادم. هناك مشكلة أخرى محتملة (لم يتم ملاحظتها في بيانات أرشيف HTTP) وهي مقاطع الفيديو التي تم حظرها بواسطة تحديد الموقع الجغرافي (تم حظرها بناءً على موقع العارض وترخيص الموفر لعرض الفيديو في تلك المنطقة).

العزوف عن تشغيل الفيديو

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

يُظهر البحث من Akamai أن المشاهدين سينتظرون لمدة ثانيتين ، ولكن في كل ثانية لاحقة ، يتخلى 5.8٪ من المشاهدين عن الفيديو.

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

MP4: تحميل الفيديو مسبقًا

لضمان التشغيل السريع على الويب ، يتمثل أحد الخيارات في تحميل الفيديو مسبقًا على الجهاز مسبقًا. بهذه الطريقة ، عندما ينقر عميلك على "تشغيل" ، يكون الفيديو قد تم تنزيله بالفعل ، وسيكون التشغيل سريعًا. يوفر HTML سمة تحميل مسبق بثلاثة خيارات ممكنة: auto وبيانات metadata ولا none .

preload = auto

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

ومع ذلك ، يجب استخدام preload="auto" فقط إذا كان هناك احتمال كبير بأن الفيديو ستتم مشاهدته. إذا كان الفيديو موجودًا ببساطة على صفحة الويب الخاصة بك ، وتم تنزيله في كل مرة ، فسيؤدي ذلك إلى إضافة عقوبة بيانات كبيرة لمستخدمي الهاتف المحمول ، بالإضافة إلى زيادة تكاليف الخادم / CDN لتسليم الفيديو بالكامل لجميع المستخدمين.

يحتوي هذا الموقع على قسم بعنوان "معرض الفيديو" به عدة مقاطع فيديو. يحتوي كل مقطع فيديو في هذا القسم على تحميل مسبق مضبوط على auto ، ويمكننا تصور تنزيله في شلال WebPageTest كخطوط أفقية خضراء:

يوجد قسم يسمى "معرض الفيديو" ، وتبلغ مساحة الملفات الخاصة بهذا القسم الصغير من موقع الويب 14.6 مليون (83٪) من تنزيل الصفحة. من المحتمل أن تكون احتمالات تشغيل مقطع فيديو واحد (من بين العديد) منخفضة جدًا ، وبالتالي فإن استخدام preload="auto" يؤدي فقط إلى توليد قدر كبير من حركة البيانات للموقع.

في هذه الحالة ، من غير المحتمل أن تتم مشاهدة أحد مقاطع الفيديو هذه ، ومع ذلك يتم تنزيلها جميعًا بالكامل ، مما يضيف 14.8 ميجابايت من المحتوى إلى موقع الجوال (83٪ من محتوى الصفحة). بالنسبة لمقاطع الفيديو ذات الاحتمالية العالية للتشغيل (ربما ينتج عن 90٪ من مشاهدات الصفحة تشغيل الفيديو) - يعد التحميل المسبق للفيديو بأكمله فكرة جيدة جدًا. ولكن بالنسبة لمقاطع الفيديو التي من غير المحتمل أن يتم تشغيلها ، فإن preload="auto" لن يؤدي إلا إلى زيادة كمية المحتوى عبر الخوادم وأجهزة العميل (وأجهزة سطح المكتب) المحمولة الخاصة بك.

preload="metadata"

عند استخدام سمة preload="metadata" ، يتم تنزيل مقطع أولي من الفيديو. يتيح ذلك للمشغل معرفة حجم نافذة الفيديو ، وربما تنزيل مقطع فيديو ثانٍ أو ثانيتين للتشغيل الفوري. يقوم المتصفح ببساطة بتقديم 206 (طلب جزئي) من محتوى الفيديو. من خلال تخزين جزء صغير من بيانات الفيديو على الجهاز ، يتم تقليل وقت بدء تشغيل الفيديو ، دون التأثير الكبير على كمية البيانات المنقولة.

في Chrome ، تكون البيانات الوصفية هي الخيار الافتراضي إذا لم يتم اختيار أي سمة.

ملاحظة : قد يؤدي ذلك إلى تنزيل كمية كبيرة من الفيديو ، إذا كان الفيديو كبيرًا.

على سبيل المثال ، على موقع ويب للجوال مع تعيين فيديو على preload="metadata" ، نرى طلبًا واحدًا فقط للفيديو:

والطلب عبارة عن تنزيل جزئي ، لكنه لا يزال ينتج عنه تحميل 2.7 ميغابايت من الفيديو لأن الفيديو الكامل يبلغ 1080 بكسل وطول 150 ثانية و 97 ميجا بايت (سنتحدث عن تحسين حجم الفيديو في الأقسام التالية).

لذلك ، أوصي بأن يستمر استخدام preload="metadata" فقط عندما يكون هناك احتمال كبير إلى حد ما أن يشاهد المستخدمون الفيديو ، أو إذا كان الفيديو صغيرًا.

preload="none"

خيار التنزيل الأكثر اقتصادا لمقاطع الفيديو ، حيث لا يتم تنزيل أي ملفات فيديو عند تحميل الصفحة. من المحتمل أن يؤدي هذا إلى تأخير في التشغيل ، ولكنه سيؤدي إلى تحميل أسرع للصفحة الأولية بالنسبة للمواقع التي تحتوي على العديد من مقاطع الفيديو على صفحة واحدة ، فقد يكون من المنطقي إضافة ملصق إلى نافذة الفيديو ، وعدم تنزيل أي مقطع فيديو حتى يتم ذلك طلب صراحة من قبل المستخدم النهائي. لا تقوم جميع مقاطع فيديو YouTube المضمنة في مواقع الويب بتنزيل أي محتوى فيديو حتى يتم الضغط على زر التشغيل ، ويتصرف بشكل أساسي كما لو كان preload="none" .

أفضل ممارسة للتحميل المسبق: استخدم فقط preload="auto" إذا كان هناك احتمال كبير بأن الفيديو ستتم مشاهدته. بشكل عام ، يوفر استخدام preload="metadata" توازنًا جيدًا في استخدام البيانات مقابل وقت بدء التشغيل ، ولكن يجب مراقبته للاستخدام المفرط للبيانات.

نصائح تشغيل الفيديو MP4

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

لنلقِ نظرة على بعض الحيل لتحسين حجم تنزيلات الفيديو. هناك عدة أبعاد للفيديو يمكن تحسينها لتقليل حجم الفيديو:

صوتي

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

إذا تم تشغيل الفيديو الخاص بك بطريقة صامتة (مثل تكرار GIF ، أو فيديو الخلفية) ، فإن إزالة دفق الصوت من الفيديو هي طريقة سريعة وسهلة لتقليل حجم الملف. في أحد الأمثلة على فيديو الخلفية ، كان حجم الملف الكامل 5.3 ميغابايت ، لكن المسار الصوتي (الذي لم يسمع به مطلقًا) كان حوالي 300 كيلوبايت (5٪ من الملف) بمجرد إزالة الصوت ، سيتم تسليم الملف بسرعة دون إهدار بايت.

42٪ من ملفات MP4 الموجودة في أرشيف HTTP ليس بها دفق صوتي.

أفضل ممارسة : قم بإزالة المسارات الصوتية من مقاطع الفيديو التي يتم تشغيلها بصمت.

ترميز الفيديو

عند تشفير مقطع فيديو ، توجد خيارات لتقليل جودة الفيديو (عدد وحدات البكسل لكل إطار ، أو الإطارات في الثانية). من السهل تقليل الفيديو عالي الجودة ليكون مناسبًا للويب ، ولا يؤثر بشكل عام على الجودة المقدمة إلى المستخدمين النهائيين. هذه المقالة ليست طويلة بما يكفي لإجراء مناقشة متعمقة لجميع تقنيات الضغط المختلفة المتاحة للفيديو. في أجهزة التشفير x264 و x265 ، يوجد مصطلح يسمى C onstant R أكل الممثل F (CRF). سيعطي استخدام CRF من 23 إلى 28 بشكل عام مقايضة جيدة للضغط / الجودة ، ويعد بداية رائعة في عالم ضغط الفيديو

حجم الفيديو

يمكن أن يتأثر حجم الفيديو بالعديد من الأبعاد: الطول والعرض والارتفاع (يمكنك على الأرجح تضمين الصوت هنا أيضًا).

مدة الفيديو

لا يعد طول الفيديو بشكل عام ميزة يمكن لمطور الويب تعديلها. إذا كان الفيديو سيتم تشغيله لمدة ثلاث دقائق ، فسيتم تشغيله لمدة ثلاث دقائق. في الحالات التي يكون فيها الفيديو طويلًا بشكل استثنائي ، يمكن لأدوات مثل preload="none" أو دفق الفيديو أن تسمح بتنزيل كمية أقل من البيانات مبدئيًا لتقليل وقت تحميل الصفحة.

أبعاد الفيديو

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

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

الآن ، للأسف ، لا تدعم المتصفحات استعلامات الوسائط للفيديو بتنسيق HTML ، مما يعني أن هذا لا يعمل:

 <video preload="auto" autoplay muted controls source src="large.mp4" </video>

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

تنزيل الفيديو وإخفائه عن العرض

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

مقاطع فيديو بجودة شبكية العين

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

تنزيل أنواع مختلفة من الفيديو بناءً على حجم الجهاز وجودة الشبكة

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

• عدم إرسال فيديو على شاشات أقل من 500 بكسل ؛
• تسليم مقاطع فيديو صغيرة للشاشات 500-1400 ؛
• قم بتسليم فيديو أكبر حجمًا لجميع الأجهزة الأخرى.

 <html><body> <div> </div> <div></div> <script> //get screen width and pixel ratio var width = screen.width; var dpr = window.devicePixelRatio; //initialise 2 videos — //“small” is 960 pixels wide (2.6 MB), large is 1920 pixels wide (10 MB) var smallVideo="https://res.cloudinary.com/dougsillars/video/upload/w_960/v1534228645/30s4kbbb_oblsgc.mp4"; var bigVideo = "https://res.cloudinary.com/dougsillars/video/upload/w_1920/v1534228645/30s4kbbb_oblsgc.mp4"; //TODO add logic on adding retina videos if (width<500){ console.log("this is a very small screen, no video will be requested"); } else if (width< 1400){ console.log("let's call this mobile sized"); var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +smallVideo +"\"/\>"; console.log(videoTag); document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a small video."; } else{ var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +bigVideo +"\"/\>"; document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a big video."; } </script> </html></body>

يقسم هذا البرنامج النصي شاشات المستخدم إلى ثلاثة خيارات:

1. أقل من 500 بكسل ، لا يوجد فيديو معروض.
2. بين 500 و 1400 ، لدينا فيديو أصغر.
3. بالنسبة للشاشات التي يزيد عرضها عن 1400 بكسل ، لدينا مقطع فيديو أكبر.

تحتوي صفحتنا على مقطع فيديو سريع الاستجابة بحجمين مختلفين: أحدهما للجوال والآخر للشاشات بحجم سطح المكتب. يحصل مستخدمو الأجهزة المحمولة على جودة فيديو رائعة ، لكن حجم الملف 2.6 ميغابايت فقط ، مقارنة بفيديو 10 ميغابايت لسطح المكتب.

صور GIF متحركة

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

 <video loop autoplay muted playsinline src="pseudoGif.mp4">

في Safari ، هناك نهج أكثر فخامة: يمكنك وضع حلقة mp4 في علامة الصورة ، مثل:

 <picture> <source type="video/mp4" loop autoplay> <source type="image/webp"> <src="animated.gif"> </picture>

في هذه الحالة ، سيقوم Safari بتشغيل ملف GIF المتحرك ، بينما يقوم Chrome (والمتصفحات الأخرى التي تدعم WebP) بتشغيل WebP المتحرك ، مع الرجوع إلى ملف GIF المتحرك. يمكنك قراءة المزيد حول هذا النهج في منشور Colin Bendell الرائع.

مقاطع فيديو الطرف الثالث

تتمثل إحدى أسهل الطرق لإضافة فيديو إلى موقع الويب الخاص بك في نسخ / لصق الرمز من خدمة مشاركة الفيديو ووضعه على موقعك. ومع ذلك ، تمامًا مثل إضافة أي طرف ثالث إلى موقعك ، يجب أن تكون متيقظًا بشأن نوع المحتوى الذي تتم إضافته إلى صفحتك ، وكيف سيؤثر ذلك على تحميل الصفحة. تضيف العديد من أدوات واجهة المستخدم هذه "ببساطة لصق هذا في HTML" مئات من كيلوبايت من جافا سكريبت. سيقوم الآخرون بتنزيل الفيلم بالكامل (فكر في preload="auto" ) ، وسيقوم البعض الآخر بكليهما.

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

بدء تشغيل الجري

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

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

عند فحص 1065 ملف بيان تم تسليمه إلى الأجهزة المحمولة من أرشيف HTTP ، وجدنا أن 59٪ من مقاطع الفيديو بها معدل بت أولي أقل من 1.2 ميجابت في الثانية - ومن المرجح أن يبدأ البث دون أي تأخير كبير بمعدل 1.6 ميجا بايت في الثانية لمعدلات بيانات 3G. يستخدم 11٪ معدل بت بين 1.2 و 1.6 ميجابايت في الثانية - مما قد يؤدي إلى إبطاء بدء التشغيل على شبكة الجيل الثالث ، و 30٪ لديهم معدل بت أعلى من 1.6 ميجابت في الثانية - ولا يمكنهم التشغيل عند معدل البت هذا على اتصال 3G. بناءً على هذه البيانات ، يبدو أن حوالي 41٪ من جميع مقاطع الفيديو لن تكون قادرة على الحفاظ على معدل البت الأولي على الهاتف المحمول - مما يؤدي إلى تأخير بدء التشغيل ، وربما زيادة عدد الأكشاك أثناء التشغيل.

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

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

يمكننا تصور ذلك من خلال إنشاء بيانات فيديو بمعدلات بت أولية مختلفة. نختبر 3 سيناريوهات مختلفة: بدءًا من أدنى (215 كيلو بايت في الثانية) ، ومتوسط ​​(600 كيلو بايت في الثانية) ، وأعلى معدل بت (2.6 ميجا بايت في الثانية).

عند البدء بالفيديو الأقل جودة ، يبدأ التشغيل في 11 ثانية. بعد بضع ثوانٍ ، يبدأ المشغل في طلب تدفق عالي الجودة ، وتشتد الصورة.

عند البدء بأعلى معدل بت (الاختبار على اتصال 3G بسرعة 1.6 ميجابت في الثانية) ، يدرك المشغل بسرعة أن التشغيل لا يمكن أن يحدث ، ويتحول إلى فيديو أقل معدل بت (215 كيلو بايت في الثانية). يبدأ تشغيل الفيديو في 17 ثانية. هناك تأخير مدته 6 ثوانٍ ، وجودة الفيديو هي نفس الجودة المنخفضة التي تم تقديمها في الاختبار الأول.

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

أفضل ممارسة لبدء تشغيل الفيديو : للتشغيل الأسرع ، ابدأ بأقل دفق جودة. بالنسبة لمقاطع الفيديو الأطول ، قد تفكر في استخدام دفق "متوسط ​​الجودة" في البداية لتقديم فيديو حاد عند بدء التشغيل (مع تأخير أطول قليلاً).

نتائج اختبار WebPage: دفق الفيديو الأولي منخفض ومتوسط ​​وعالي (من أعلى إلى أسفل). يبدأ الفيديو بأسرع ما يمكن بأقل جودة فيديو. من المهم ملاحظة أن فيديو البدء عالي الجودة عند 17 ثانية هو نفس جودة الجودة المنخفضة التي تبدأ عند 11 ثانية.

الجري: استمرار التشغيل

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

 #EXT-X-STREAM-INF:BANDWIDTH=912912,PROGRAM-ID=1,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=640x360,SUBTITLES="subs" video/600k.m3u8

يشير خط المعلومات إلى أن هذا الدفق يحتوي على معدل بت 913 كيلو بايت في الثانية ، ودقة 640 × 360. إذا نظرنا إلى عنوان URL الذي يشير إليه هذا السطر ، فسنجد أنه يشير إلى مقطع فيديو بحجم 600 ألف. يُظهر فحص ملفات الفيديو أن الفيديو يبلغ 600 كيلو بايت في الثانية ، وأن البيان يبالغ في معدل البت.

المبالغة في معدل نقل بيانات الفيديو

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

بالنسبة للمستخدمين الذين يستخدمون اتصالاً بسرعة 1.6 ميغابت في الثانية ، سيختار المشغل معدل نقل 913 كيلوبت في الثانية ، يخدم فيديو العميل 600 كيلوبت في الثانية. ومع ذلك ، إذا تم الإبلاغ عن معدلات البت بدقة ، فسيتم استخدام معدل نقل 950 كيلو بايت في الثانية ، ومن المحتمل أن يتم التدفق دون مشاكل. بينما تمنع الاختيارات هنا الأكشاك ، فإنها تقلل أيضًا من جودة الفيديو الذي يتم تسليمه للمستهلك.

أفضل الممارسات : قد تكون المبالغة الصغيرة في معدل بت الفيديو مفيدة لتقليل عدد حالات التوقف في التشغيل. ومع ذلك ، يمكن أن تؤدي القيمة الكبيرة جدًا إلى تقليل جودة التشغيل.

اختبر فيديو Neilsen في المتصفح ، واعرف ما إذا كان يمكنك جعله يقفز ذهابًا وإيابًا.

خاتمة

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

1. preload="auto"
   استخدمه فقط إذا كان هناك احتمال كبير أن يشاهد عملاؤك هذا الفيديو.
2. preload="metadata"
   افتراضيًا في Chrome ، ولكن لا يزال من الممكن أن يؤدي إلى تنزيل ملفات فيديو كبيرة. استخدم بحذر.
3. مقاطع الفيديو الصامتة (تكرار ملفات GIF أو مقاطع فيديو الخلفية)
   تجريد قناة الصوت
4. أبعاد الفيديو
   ضع في اعتبارك تقديم فيديو بأحجام مختلفة إلى الهاتف المحمول عبر سطح المكتب. ستكون مقاطع الفيديو أصغر ، ويتم تنزيلها بشكل أسرع ، ومن غير المرجح أن يرى المستخدمون الفرق (سينخفض ​​تحميل الخادم أيضًا!)
5. ضغط الفيديو
   لا تنس ضغط مقاطع الفيديو للتأكد من تسليمها
6. لا تخفي مقاطع الفيديو
   إذا لم يتم عرض الفيديو - فلا تقم بتنزيله.
7. قم بمراجعة مقاطع الفيديو التابعة لجهات خارجية بانتظام
8. تدفق
   ابدأ ببث منخفض الجودة لضمان بدء التشغيل السريع. (لمقاطع الفيديو التي يتم تشغيلها لفترة أطول ، ضع في اعتبارك معدل بت متوسط ​​للحصول على جودة أفضل عند بدء التشغيل)
9. تدفق
   لا بأس في أن تكون متحفظًا بشأن معدل البت لمنع المماطلة ، ولكن الذهاب بعيدًا جدًا ، وستوفر التدفقات فيديو بجودة أقل.

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