تجربة مستخدِم محسَّنة وحوافز مخفّضة لتثبيت أدوات حظر الإعلانات وتقليل استهلاك البيانات
طرأ تغيير على سياسات التشغيل التلقائي في Chrome في نيسان (أبريل) 2018، لذا يسعدني أن أخبرك بسبب تأثيرها في تشغيل الفيديو مع الصوت وكيفية تأثيره في ذلك. تنبيه بحرق الأحداث: سيحبها المستخدمون!
السلوكيات الجديدة
ربما لاحظت أنّ متصفِّحات الويب بصدد الانتقال إلى سياسات أكثر صرامة بشأن التشغيل التلقائي من أجل تحسين تجربة المستخدم، وتقليل الحوافز التي تشجع المستخدم على تثبيت أدوات حظر الإعلانات، وتقليل استهلاك البيانات على الشبكات ذات التكلفة العالية و/أو المحدودة. تهدف هذه التغييرات إلى منح المستخدمين إمكانية تحكّم أكبر في التشغيل وإفادة الناشرين في حالات الاستخدام المشروعة.
إنّ سياسات التشغيل التلقائي في Chrome بسيطة:
- ويُسمح دائمًا بتشغيل الفيديوهات بدون صوت.
- يُسمح باستخدام ميزة التشغيل التلقائي مع الصوت في الحالات التالية:
- تفاعل المستخدم مع النطاق (النقر، وما إلى ذلك).
- على أجهزة الكمبيوتر المكتبي، تم تجاوُز حدّ مؤشر التفاعل مع الوسائط للمستخدم، أي أنّ المستخدم قد شغّل فيديو مع صوت في السابق.
- أضاف المستخدم الموقع الإلكتروني إلى شاشته الرئيسية على الأجهزة الجوّالة أو ثبّت تطبيق الويب التقدّمي (PWA) على أجهزة الكمبيوتر المكتبي.
- يمكن للإطارات الرئيسية تفويض إذن التشغيل التلقائي لإطارات iframe للسماح بالتشغيل التلقائي مع الصوت.
مؤشر التفاعل مع الوسائط
يقيس مؤشر تفاعُل الوسائط (MEI) ميل الفرد إلى استهلاك الوسائط على موقع إلكتروني. يستند أسلوب Chrome إلى نسبة الزيارات إلى أحداث تشغيل وسائط مهمة لكل مصدر:
- يجب أن تكون مدة تشغيل الوسائط (الصوت/الفيديو) أكثر من سبع ثوانٍ.
- يجب أن يكون الصوت قيد العرض وتمّت إعادة صوته.
- أن علامة التبويب التي تحتوي على الفيديو مفعّلة
- يجب أن يكون حجم الفيديو (بالبكسل) أكبر من 200x140.
وبناءً على ذلك، يحسب Chrome نتيجة التفاعل مع الوسائط، وهي أعلى نتيجة في المواقع التي يتم فيها تشغيل الوسائط بشكل منتظم. عندما يكون عاليًا بما يكفي، يُسمح للوسائط بالتشغيل التلقائي على سطح المكتب فقط.
تتوفّر MEI للمستخدم على الصفحة الداخلية في 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 التي سيتم دائمًا تفعيل ميزة التشغيل التلقائي فيها.
أفضل الممارسات لمطوّري الويب
عناصر الصوت/الفيديو
إليك أمر يجب تذكره: لا تفترض أبدًا أنه سيتم تشغيل فيديو ولا تعرض زر الإيقاف المؤقت عندما لا يكون الفيديو قيد التشغيل. من المهم جدًا أن أكتبها مرة أخرى أدناه لأولئك الذين يتصفحون هذا المنشور.
يجب أن تطّلِع دائمًا على الحقل Promise الذي تعرضه دالة التشغيل لمعرفة ما إذا تم رفضه أم لا:
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 issue whatwg/html#3849.
محتوى صوتي على الويب
تشمل ميزة التشغيل التلقائي واجهة برمجة تطبيقات Web Audio منذ الإصدار 71 من Chrome. هناك بعض الأشياء التي يجب معرفتها حولها. أولاً، من الممارسات الجيدة انتظار تفاعل المستخدم قبل بدء تشغيل الصوت حتى يكون المستخدمون على دراية بحدوث شيء ما. فكر في زر "تشغيل" أو مفتاح "تشغيل/إيقاف" على سبيل المثال. يمكنك أيضًا إضافة زر "إعادة الصوت" بناءً على مسار التطبيق.
إذا أنشأت 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.