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

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

François Beaufort

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

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

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

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

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

מדד ההתעניינות בתוכן

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

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

<!-- 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 שבהן ההפעלה האוטומטית תמיד תהיה מופעלת.

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

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

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

תמיד צריך להסתכל על ה-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 playsinline autoplay>
<button id="unmuteButton"></button>

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

עדיין צריך להגדיר באופן עקבי את האירועים שמפעילים הפעלת משתמש בכל הדפדפנים. לכן, מומלץ להשתמש ב-"click" בינתיים. בעיה ב-GitHub‏ whatwg/html#3849

Web Audio

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

דוגמה לכך היא בקשת משיכה קטנה לתיקון ההפעלה של Web Audio בהתאם לכללי המדיניות האלה בנושא הפעלה אוטומטית באתר https://airhorner.com.