سياسة التشغيل التلقائي في Chrome

تحسين تجربة المستخدم، وتقليل الحوافز لتثبيت أدوات حظر الإعلانات، وتقليل استهلاك البيانات

François Beaufort
François Beaufort
GitHub

لقد تغيّرت سياسات التشغيل التلقائي في Chrome في نيسان (أبريل) 2018، وأنا هنا لأخبرك عن سبب وكيفية تأثير ذلك في تشغيل الفيديو مع الصوت. تنبيه بكشف تفاصيل اللعبة: سيحبه المستخدمون

حسام نيسون: سأعثر عليك وسأوقفك مؤقتًا.
شون بين: لا يكتفي واحد بتشغيل الفيديوهات تلقائيًا.
تم العثور على مشاركات مضحكة على الإنترنت تتضمّن علامة "التشغيل التلقائي" على Imgflip وImgur.

السلوكيات الجديدة

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

سياسات التشغيل التلقائي في Chrome بسيطة:

مؤشر تفاعل الوسائط

يقيس مؤشر التفاعل مع وسائل الإعلام (MEI) ميل الفرد إلى مشاهدة الوسائط على الموقع الإلكتروني. يتمثّل المنهج الذي يتّبعه Chrome في نسبة الزيارات إلى أحداث تشغيل الوسائط المهمة لكل مصدر:

  • يجب أن تكون مدة مشاهدة الوسائط (الصوت/الفيديو) أكبر من سبع ثوانٍ.
  • يجب أن يتوفّر الصوت وإعادته.
  • علامة التبويب التي تحتوي على الفيديو نشطة.
  • يجب أن يكون حجم الفيديو (بالبكسل) أكبر من 200x140.

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

تتوفّر ميزة MEI للمستخدم على صفحة about://media-engagement الداخلية.

لقطة شاشة لصفحة about://media-engagement الداخلية.
لقطة شاشة لصفحة about://media-engagement الداخلية في Chrome.

عمليات تبديل المطوِّر

وبصفتك مطوِّرًا، قد تحتاج إلى تغيير سلوك سياسة التشغيل التلقائي في Chrome محليًا لاختبار موقعك الإلكتروني لمستويات مختلفة من تفاعل المستخدمين.

  • يمكنك إيقاف سياسة التشغيل التلقائي بالكامل باستخدام علامة سطر الأوامر: chrome.exe --autoplay-policy=no-user-gesture-required. ويتيح لك ذلك اختبار موقعك الإلكتروني كما لو كان المستخدمون يتفاعلون بشكل كبير مع موقعك، وسيُسمح دائمًا بتشغيل المحتوى التلقائي.

  • يمكنك أيضًا التأكّد من عدم السماح مطلقًا بميزة التشغيل التلقائي من خلال إيقاف ميزة MEI وما إذا كانت المواقع الإلكترونية التي تسجّل أكبر عدد من المساحة الإجمالية MEI يتم تشغيلها تلقائيًا بشكل تلقائي للمستخدمين الجدد. تنفيذ ذلك مع استخدام العلامات: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

تفويض إطار iframe

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

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

عند إيقاف سياسة الأذونات لميزة التشغيل التلقائي، ستؤدي الطلبات إلى play() بدون استخدام إيماءة المستخدم إلى رفض الوعد باستخدام NotAllowedError DOMException. وسيتم أيضًا تجاهل سمة التشغيل التلقائي.

أمثلة

المثال 1: في كل مرة يزور فيها أحد المستخدمين VideoSubscriptionSite.com على الكمبيوتر المحمول، يشاهد عرضًا تلفزيونيًا أو فيلمًا. ونظرًا لارتفاع مستوى تفاعلهم مع الوسائط، فيُسمح بالتشغيل التلقائي

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

المثال 3: يحتوي LocalNewsSite.com على محتوى نصي ومحتوى فيديو معًا. يدخل معظم الأشخاص إلى الموقع من خلال الصفحة الرئيسية ثم ينقرون على مقالات الأخبار. وسيُسمح بتشغيل صفحات المقالات الإخبارية تلقائيًا بسبب تفاعل المستخدم مع النطاق. ومع ذلك، يجب توخي الحذر للتأكد من عدم فاجأ المستخدمين بالتشغيل التلقائي للمحتوى.

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

سياسات Chrome Enterprise

من الممكن تغيير سلوك التشغيل التلقائي من خلال سياسات Chrome Enterprise لحالات الاستخدام مثل أجهزة Kiosk أو الأنظمة غير الخاضعة للرقابة. يمكنك الاطّلاع على صفحة المساعدة الخاصة بقائمة السياسات لمعرفة كيفية ضبط سياسات المؤسسات المتعلّقة بميزة التشغيل التلقائي:

  • وتحدّد سياسة AutoplayAllowed ما إذا كان التشغيل التلقائي مسموحًا به أم لا.
  • تسمح لك سياسة AutoplayAllowlist بتحديد قائمة مسموح بها لأنماط عناوين URL التي سيتم دائمًا تفعيل ميزة التشغيل التلقائي فيها.

أفضل الممارسات لمطوّري البرامج على الويب

عناصر الصوت أو الفيديو

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

عليك دائمًا الاطّلاع على الوعد الذي تعرضه دالة التشغيل لمعرفة ما إذا تم رفضه:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

إحدى الطرق الرائعة لجذب المستخدمين هي استخدام التشغيل التلقائي مع كتم الصوت والسماح لهم باختيار إعادة الصوت. (اطّلِع على المثال أدناه.) تقوم بعض مواقع الويب بالفعل بذلك بشكل فعال، بما في ذلك Facebook وInstagram وTwitter وYouTube.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

لا تزال الأحداث التي تؤدي إلى تنشيط المستخدم يتم تحديدها باستمرار عبر المتصفحات. أنصحك بالالتزام بـ "click" في الوقت الحالي. راجِع مشكلة في GitHub/whatwg/html#3849.

الملفات الصوتية على الويب

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

إذا أنشأت AudioContext عند تحميل الصفحة، عليك الاتصال بـ resume() في وقت ما بعد تفاعل المستخدم مع الصفحة (على سبيل المثال، بعد أن ينقر المستخدم على أحد الأزرار). وبدلاً من ذلك، سيتم استئناف AudioContext بعد إيماءة المستخدم في حال استدعاء start() في أي عقدة مرفقة.

// Existing code unchanged.
window. {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

يمكنك أيضًا إنشاء AudioContext فقط عندما يتفاعل المستخدم مع الصفحة.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

لاكتشاف ما إذا كان المتصفّح يتطلب تفاعل المستخدم لتشغيل الصوت، تحقَّق من AudioContext.state بعد إنشائه. في حال السماح بالتشغيل، من المفترض أن يتم التبديل فورًا إلى "running". بخلاف ذلك، ستكون suspended. إذا استمعت إلى حدث statechange، يمكنك رصد التغييرات بشكل غير متزامن.

للاطّلاع على مثال، يمكنك الاطّلاع على قسم طلب السحب المصغَّر الذي يساعد في حلّ مشكلة تشغيل الصوت على الويب في قواعد سياسة التشغيل التلقائي هذه على موقع https://airhorner.com.