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

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

François Beaufort

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

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

דוגמאות

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

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

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