המדיניות בנושא הפעלה אוטומטית ב-Chrome

שיפור בחוויית המשתמש, צמצום תמריצים להתקנת חסימת מודעות וצריכת נתונים מופחתת

פרנסואה בופורט

GitHub

הערה: מדיניות ההפעלה האוטומטית שהושקה ב-Chrome 66 לרכיבי אודיו ווידאו, ולמעשה חוסמת כמחצית מההפעלות האוטומטיות הלא רצויות של מדיה ב-Chrome. לגבי Web Audio API, מדיניות ההפעלה האוטומטית הושקה ב-Chrome 71. ההגדרה משפיעה על משחקי אינטרנט, אפליקציות WebRTC ודפי אינטרנט אחרים שמשתמשים בתכונות אודיו. לפרטים נוספים, ראו Web Audio API בהמשך.

מדיניות ההפעלה האוטומטית של Chrome השתנתה באפריל 2018. אני כאן כדי להסביר למה ואיך זה משפיע על הפעלת סרטונים עם קול. אזהרת ספוילר: המשתמשים יאהבו את זה!

ממים מהאינטרנט שתויגו בשם 'הפעלה אוטומטית' נמצאו ב-Imgflip וב-Imgur.

התנהגויות חדשות

כפי ששמתם לב, דפדפני אינטרנט פועלים בהתאם למדיניות מחמירה יותר בנושא הפעלה אוטומטית, כדי לשפר את חוויית המשתמש ולצמצם את התמריצים להתקנת תוכנות לחסימת מודעות ולצמצם את צריכת הנתונים ברשתות יקרות או מוגבלות. מטרת השינויים האלה היא להעניק למשתמשים שליטה רבה יותר בהפעלה, ולספק לבעלי תוכן דיגיטלי תרחישים לגיטימיים לדוגמה.

מדיניות ההפעלה האוטומטית של Chrome פשוטה:

• ההפעלה האוטומטית במצב מושתק תמיד מותרת.
• הפעלה אוטומטית עם קול מותרת במקרים הבאים:
  • המשתמש יצר אינטראקציה עם הדומיין (קליק, הקשה וכו').
  • במחשב, חרגתם מהסף מדד מעורבות במדיה של המשתמש, כלומר המשתמש הפעיל בעבר סרטון עם קול.
  • המשתמש הוסיף את האתר למסך הבית שלו בנייד, או התקין את ה-PWA במחשב.
• פריימים מובילים יכולים להאציל הרשאה להפעלה אוטומטית למסגרות ה-iframe שלהם כדי לאפשר הפעלה אוטומטית עם קול.

מדד מעורבות במדיה

מדד ההתעניינות במדיה (MEI) מודד את הנטייה של אדם לצרוך מדיה באתר. הגישה של Chrome היא יחס בין ביקורים לאירועים משמעותיים של הפעלה של מדיה לכל מקור:

• צריכת המדיה (אודיו/וידאו) חייבת להיות גבוהה מ-7 שניות.
• יש למצוא את האודיו ולבטל את ההשתקה.
• הכרטיסייה שבה נמצא הסרטון פעילה.
• גודל הסרטון (בפיקסלים) צריך להיות גדול מ-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

מדיניות ההרשאות מאפשרת למפתחים להפעיל ולהשבית תכונות וממשקי API באופן סלקטיבי. אחרי שמקור מקבל הרשאה להפעלה אוטומטית, הוא יכול להאציל את ההרשאה הזו למסגרות 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() ללא תנועת משתמש ידחו את ההבטחה עם DOMERROR מסוג NotAllowedError. המערכת תתעלם גם ממאפיין ההפעלה האוטומטית.

אזהרה: בכתבות ישנות יותר, מומלץ להשתמש במאפיין gesture=media שאינו נתמך

.

דוגמאות

דוגמה 1: בכל פעם שמשתמש מבקר ב-VideoSubscriptionSite.com במחשב הנייד הוא צופה בתוכנית טלוויזיה או בסרט. מאחר שציון המעורבות שלהם במדיה גבוה, ההפעלה האוטומטית מותרת.

דוגמה 2: ב-GlobalNewsSite.com יש גם תוכן טקסט וגם תוכן וידאו. רוב המשתמשים נכנסים לאתר כדי למצוא תוכן טקסט וצופים בסרטונים רק מדי פעם. ציון המעורבות של המשתמשים במדיה הוא נמוך, ולכן ההפעלה האוטומטית לא תאושר אם המשתמש מנווט ישירות מדף של מדיה חברתית או מחיפוש.

דוגמה 3: ב-LocalNewsSite.com יש גם תוכן טקסט וגם תוכן וידאו. רוב האנשים נכנסים לאתר דרך דף הבית ולאחר מכן לוחצים על מאמרי החדשות. הפעלה אוטומטית בדפי מאמרי החדשות מותרת עקב אינטראקציה של משתמשים עם הדומיין. עם זאת, צריך לוודא שהמשתמשים לא יופתעו על ידי הפעלה אוטומטית של התוכן.

דוגמה 4: MyMovieReviewBlog.com מטמיע iframe עם טריילר של סרט כדי להוסיף ביקורת. המשתמשים יצרו אינטראקציה עם הדומיין כדי להגיע לבלוג, לכן ההפעלה האוטומטית מותרת. עם זאת, הבלוג צריך להאציל באופן מפורש את ההרשאה הזו ל-iframe כדי להפעיל את התוכן באופן אוטומטי.

כללי המדיניות של Chrome Enterprise

במדיניות הארגון של Chrome, ניתן לשנות את התנהגות ההפעלה האוטומטית בתרחישים לדוגמה כמו קיוסק או מערכות ללא השגחה. בדף העזרה של רשימת המדיניות מוסבר איך להגדיר את כללי המדיניות הארגונית שקשורים להפעלה אוטומטית:

• המדיניות AutoplayAllowed קובעת אם הפעלה אוטומטית מותרת או לא.
• המדיניות AutoplayAllowlist מאפשרת לציין רשימת היתרים של תבניות URL שבהן ההפעלה האוטומטית תמיד תהיה מופעלת.

שיטות מומלצות למפתחי אתרים

רכיבי וידאו/אודיו

הנה דבר אחד שחשוב לזכור: אל תניחו בשום מקרה שסרטון יופעל, ואל תציגו לחצן השהיה כאשר הסרטון לא פועל בפועל. זה כל כך חשוב שאני אכתוב את זה עוד פעם אחת למטה בשביל האנשים שפשוט מדלגים על הפוסט.

נקודה חשובה: אל תניחו שהסרטון יופעל ולא יוצג לחצן השהיה כשהסרטון אינו מופעל בפועל.

תמיד צריך לבדוק את הפונקציה Promise שהוחזרה על ידי פונקציית Play כדי לבדוק אם היא נדחתה:

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 API נכלל בהפעלה אוטומטית של Chrome החל מגרסה 71. יש כמה דברים שכדאי לדעת עליו. קודם כול, כדאי להמתין לאינטראקציה של המשתמש לפני הפעלת האודיו, כדי שהם יהיו מודעים למשהו. לדוגמה, ניתן לחשוב על לחצן 'הפעלה' או על מתג 'הפעלה/כיבוי'. אפשר גם להוסיף לחצן 'ביטול השתקה' בהתאם לזרימה באפליקציה.

הערה: אם נוצר AudioContext לפני שהמסמך מקבל תנועת משתמש, הוא ייווצר במצב 'מושעה' ויהיה צורך להפעיל את resume() אחרי תנועת המשתמש.

אם יוצרים את 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, אפשר לזהות שינויים באופן אסינכרוני.

כדי לראות דוגמה, כדאי לקרוא את Pull Request הקטנה שמתקנת את ההפעלה של האודיו באינטרנט לכללי המדיניות לגבי הפעלה אוטומטית של https://airhorner.com.

הערה: אפשר למצוא סיכום של תכונת ההפעלה האוטומטית של Chrome באתר Chromium.