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

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

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

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

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

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

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

אינדקס מעורבות במדיה

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

• צריכת המדיה (אודיו/וידאו) חייבת להיות גדולה מ-7 שניות.
• האודיו צריך להיות מוצג ולבטל את ההשתקה.
• הכרטיסייה עם הסרטון פעילה.
• הגודל של הסרטון (בפיקסלים) צריך להיות גדול מ-200x140.

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

מדד ה-MEI של המשתמש זמין בדף הפנימי של about://media-engagement.

החלפת מפתחים

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

דוגמאות

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

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

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

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

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

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

• המדיניות 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 API מכוסה בהפעלה אוטומטית ב-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.