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

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

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

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

אינדקס התקשרות מדיה (MEI)

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

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

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

.ממשק המשתמש של המשתמש זמין בכרום://media-engagement internal page

Screenshot of the chrome://media-engagement page

Developer switches

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

  • תוכל להחליט להשבית לחלוטין את מדיניות ההפעלה האוטומטית על ידי הגדרת הדגל של Chrome "מדיניות הפעלה אוטומטית" ל"לא נדרשת מחווה משתמש "ב- chrome: // flags / # autoplay-policy. זה מאפשר לך לבדוק את האתר שלך כאילו המשתמש היו עסוקים מאוד עם האתר שלך הפעלה אוטומטית יהיה מותר תמיד.
  • כמו כן, באפשרותך להחליט אם הפעלה אוטומטית של הפעלה אוטומטית לעולם אינה מותרת על-ידי ביטול השימוש ב- MEI, הפעלת מדיניות הפעלה אוטומטית ל- Audio Audio, והאם אתרים עם ה- MEI הכולל הגבוה ביותר מקבלים הפעלה אוטומטית כברירת מחדל עבור משתמשים חדשים. זה יכול להיעשות עם שלושה מתגים פנימיים עם chrome.exe --disable-features=PreloadMediaEngagementData,AutoplayIgnoreWebAudio, MediaEngagementBypassAutoplayPolicies .

Iframe delegation

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

<span class="com"><!-- Autoplay is allowed. --></span>
<span class="tag"><iframe</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cross-origin.com/myvideo.html"</span> <span class="atn">allow</span><span class="pun">=</span><span class="atv">"autoplay"</span><span class="tag">></span>
<span class="com"><!-- Autoplay and Fullscreen are allowed. --></span>
<span class="tag"><iframe</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cross-origin.com/myvideo.html"</span> <span class="atn">allow</span><span class="pun">=</span><span class="atv">"autoplay; fullscreen"</span><span class="tag">></span>
	

כאשר מדיניות התכונה עבור הפעלה אוטומטית מושבתת, שיחות אל play() ללא מחווה המשתמש ידחה את ההבטחה עםNotAllowedError DOMException. וגם התכונה הפעלה אוטומטית תתעלם.

תרחישים לדוגמה

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

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

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

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

Chrome enterprise policies

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

  • המדיניות "AutoplayAllowed" קובעת אם הפעלה אוטומטית מותרת או לא.
  • המדיניות "AutoplayWhitelist" מאפשרת לך לציין רשימה לבנה של דפוסי כתובות אתרים שבהם ההפעלה האוטומטית תפעיל תמיד.

שיטות עבודה מומלצות למפתחי אינטרנט

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

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

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

<code><span class="kwd">var</span><span class="pln"> promise </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'video'</span><span class="pun">).</span><span class="pln">play</span><span class="pun">();</span>
<span class="kwd">if</span> <span class="pun">(</span><span class="pln">promise </span><span class="pun">!==</span> <span class="kwd">undefined</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
  promise</span><span class="pun">.</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">_ </span><span class="pun">=></span> <span class="pun">{</span><span class="pln">
    </span><span class="com">// Autoplay started!</span><span class="pln">
  </span><span class="pun">}).</span><span class="kwd">catch</span><span class="pun">(</span><span class="pln">error </span><span class="pun">=></span> <span class="pun">{</span><span class="pln">
    </span><span class="com">// Autoplay was prevented.</span><span class="pln">
    </span><span class="com">// Show a "Play" button so that user can start playback.</span><span class="pln">
  </span><span class="pun">});</span>
<span class="pun">}</span>
</code>
	
<code><span class="tag"><video</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"video"</span> <span class="atn">muted</span> <span class="atn">autoplay</span><span class="tag">></span>
<span class="tag"><button</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"unmuteButton"</span><span class="tag">></button></span>
<span class="tag"><script></span><span class="pln">
  unmuteButton</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
    video</span><span class="pun">.</span><span class="pln">muted </span><span class="pun">=</span> <span class="kwd">false</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">});</span>
<span class="tag"></script></span>
</code>
	

Web Audio

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

<code><span class="com">// Existing code unchanged.</span><span class="pln">
window</span><span class="pun">.</span><span class="pln">onload </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> context </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">AudioContext</span><span class="pun">();</span><span class="pln">
  </span><span class="com">// Setup all nodes</span><span class="pln">
  </span><span class="pun">...</span>
<span class="pun">}</span>
<span class="com">// One-liner to resume playback when user interacted with the page.</span><span class="pln">
document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'button'</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
  context</span><span class="pun">.</span><span class="pln">resume</span><span class="pun">().</span><span class="kwd">then</span><span class="pun">(()</span> <span class="pun">=></span> <span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Playback resumed successfully'</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span>
<span class="pun">});</span>
</code>
	

ניתן גם ליצור את AudioContext רק כאשר המשתמש מקיים אינטראקציה עם הדף.

<code><span class="pln">document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'button'</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> context </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">AudioContext</span><span class="pun">();</span><span class="pln">
  </span><span class="com">// Setup all nodes</span><span class="pln">
  </span><span class="pun">...</span>
<span class="pun">});</span>
</code>
	

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

לקבלת מידע, בדוק את בקשת השחרור הקטנה שתיקן את פעולת השמעת האינטרנט עקב שינויי מדיניות ההפעלה האוטומטית עבור https://airhorner.com.

כברירת מחדל, ממשק ה- API של שמע האינטרנט אינו מושפע כרגע ממדיניות ההפעלה האוטומטית. כדי להפעיל את מדיניות ההפעלה האוטומטית עבור Internet Audio, הפעל את Chrome באמצעות המתג הפנימי הבא: chrome.exe --disable-features = AutoplayIgnoreWebAudio.