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

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

François Beaufort
François Beaufort
GitHub

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

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

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

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

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

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

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

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

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

يتوفّر رقم تعريف حساب العميل على Merchant Center (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 لحالات الاستخدام مثل الأكشاك أو الأنظمة غير الخاضعة للمراقبة. يُرجى الاطّلاع على السياسة. إدراج صفحة المساعدة للتعرّف على كيفية ضبط إعدادات ميزة التشغيل التلقائي للمؤسسات السياسات:

  • تحدِّد سياسة 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 playsinline autoplay>
<button id="unmuteButton"></button>

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

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

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

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

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

// Existing code unchanged.
window.onload = function() {
  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