นโยบายการเล่นอัตโนมัติใน Chrome

ปรับปรุงประสบการณ์ของผู้ใช้ ลดสิ่งจูงใจในการติดตั้งตัวบล็อกโฆษณา และลดการใช้ข้อมูล

François Beaufort
François Beaufort
GitHub

นโยบายการเล่นอัตโนมัติของ Chrome มีการเปลี่ยนแปลงไปเมื่อเดือนเมษายน 2018 และเราขออธิบายเหตุผลและผลกระทบที่นโยบายนี้จะมีต่อการเล่นวิดีโอที่มีเสียง บอกใบ้นิดนึงว่าผู้ใช้จะต้องชอบ

Liam Neeson: I will find you and I will pause you.
Sean Bean: One does not simply autoplay videoas.
มีมบนอินเทอร์เน็ตที่ติดแท็ก "autoplay" ซึ่งพบใน Imgflip และ Imgur

ลักษณะการทำงานใหม่

คุณอาจสังเกตเห็นว่าเว็บเบราว์เซอร์กําลังใช้นโยบายการเล่นอัตโนมัติที่เข้มงวดขึ้นเพื่อปรับปรุงประสบการณ์ของผู้ใช้ ลดแรงจูงใจในการติดตั้งโปรแกรมบล็อกโฆษณา และลดปริมาณการใช้อินเทอร์เน็ตในเครือข่ายที่มีค่าใช้จ่ายสูงและ/หรือมีข้อจํากัด การเปลี่ยนแปลงเหล่านี้มีจุดประสงค์เพื่อให้ผู้ใช้ควบคุมการเล่นได้มากขึ้นและเป็นประโยชน์ต่อผู้เผยแพร่โฆษณาที่มี Use Case ที่ถูกต้อง

นโยบายการเล่นอัตโนมัติของ Chrome นั้นง่ายมาก

ดัชนีการมีส่วนร่วมกับสื่อ

ดัชนีการมีส่วนร่วมกับสื่อ (MEI) จะวัดแนวโน้มของแต่ละบุคคลในการใช้สื่อบนเว็บไซต์ แนวทางของ Chrome คืออัตราส่วนการเข้าชมต่อเหตุการณ์การเล่นสื่อที่สำคัญต่อต้นทาง

  • การใช้สื่อ (เสียง/วิดีโอ) ต้องมากกว่า 7 วินาที
  • ต้องมีเสียงและไม่ได้ปิดเสียง
  • แท็บที่มีวิดีโอเปิดอยู่
  • ขนาดของวิดีโอ (เป็นพิกเซล) ต้องมากกว่า 200x140

จากนั้น Chrome จะคํานวณคะแนนการมีส่วนร่วมกับสื่อ ซึ่งจะสูงที่สุดในเว็บไซต์ที่เล่นสื่อเป็นประจำ และเมื่อเล่นในระดับสูงพอ สื่อจะได้รับอนุญาตให้เล่น โดยอัตโนมัติบนเดสก์ท็อปเท่านั้น

MEI ของผู้ใช้จะอยู่ในหน้าเว็บภายใน about://media-engagement

ภาพหน้าจอของหน้าภายใน 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 และระบบจะไม่สนใจแอตทริบิวต์เล่นอัตโนมัติด้วย

ตัวอย่าง

ตัวอย่างที่ 1: ทุกครั้งที่ผู้ใช้เข้าชม VideoSubscriptionSite.com บนแล็ปท็อป ผู้ใช้จะดูรายการทีวีหรือภาพยนตร์ เนื่องจากโฆษณามีคะแนนการมีส่วนร่วมสูง ระบบจึงอนุญาตให้ใช้การเล่นอัตโนมัติ

ตัวอย่างที่ 2: GlobalNewsSite.com มีทั้งเนื้อหาข้อความและวิดีโอ ผู้ใช้ส่วนใหญ่เข้าเว็บไซต์เพื่อดูเนื้อหาข้อความและดูวิดีโอเป็นครั้งคราวเท่านั้น คะแนนการมีส่วนร่วมในสื่อของผู้ใช้อยู่ในระดับต่ำ ดังนั้นระบบจึงจะไม่อนุญาตการเล่นอัตโนมัติหากผู้ใช้ออกจากหน้าโซเชียลมีเดียหรือการค้นหาโดยตรง

ตัวอย่างที่ 3: LocalNewsSite.com มีเนื้อหาทั้งแบบข้อความและวิดีโอ ผู้ใช้ส่วนใหญ่เข้าสู่เว็บไซต์ผ่านหน้าแรก แล้วคลิกบทความข่าว ระบบจะอนุญาตให้เล่นอัตโนมัติในหน้าบทความข่าวเนื่องจากมีการโต้ตอบของผู้ใช้กับโดเมน แต่คุณควรระมัดระวังไม่ให้ผู้ใช้ประหลาดใจเมื่อเล่นเนื้อหาอัตโนมัติ

ตัวอย่างที่ 4: MyMovieReviewBlog.com ฝัง iframe พร้อมกับตัวอย่างภาพยนตร์เพื่อดูรีวิว ผู้ใช้โต้ตอบกับโดเมนเพื่อไปยังบล็อก ระบบจึงอนุญาตให้เล่นอัตโนมัติ อย่างไรก็ตาม บล็อกต้องมอบสิทธิ์ดังกล่าวให้ iFrame อย่างชัดเจนเพื่อให้เนื้อหาเล่นอัตโนมัติ

นโยบาย Chrome Enterprise

คุณเปลี่ยนลักษณะการทำงานอัตโนมัติด้วยนโยบาย Chrome Enterprise ได้สำหรับกรณีการใช้งาน เช่น คีออสก์หรือระบบที่ไม่มีผู้ดูแล ดูหน้าความช่วยเหลือรายการนโยบายเพื่อดูวิธีตั้งค่านโยบายขององค์กรที่เกี่ยวข้องกับการเล่นอัตโนมัติ

  • นโยบาย 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 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 จะกลับมาทำงานต่อหลังจากผู้ใช้ใช้ท่าทางสัมผัสหากมีการเรียกใช้ 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