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

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

François Beaufort
François Beaufort
GitHub

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

เลียม นีสัน: ฉันจะตามหาคุณและจะหยุดเล่นชั่วคราว
Sean Bean: One does not simply autoplay videoas.
มีมบนอินเทอร์เน็ตที่ติดแท็ก "autoplay" ซึ่งพบใน Imgflip และ Imgur

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

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

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

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

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

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

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

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

ภาพหน้าจอของหน้าภายใน about://media-engagement
ภาพหน้าจอของหน้าเว็บภายใน about://media-engagement ใน Chrome

สวิตช์สำหรับนักพัฒนาแอป

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

  • คุณปิดใช้นโยบายการเล่นอัตโนมัติทั้งหมดได้โดยใช้คำสั่งบรรทัดแรก Flag ต่อไปนี้ 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() โดยไม่มี ท่าทางสัมผัสของผู้ใช้จะปฏิเสธสัญญาที่มี DOMException NotAllowedError และระบบจะไม่สนใจแอตทริบิวต์เล่นอัตโนมัติด้วย

ตัวอย่าง

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

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

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

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

นโยบาย Chrome Enterprise

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

  • นโยบาย AutoplayAllowed ควบคุมว่า หรือไม่อนุญาตการเล่นอัตโนมัติ
  • นโยบาย AutoplayAllowlist ให้คุณระบุรายการที่อนุญาตพิเศษของรูปแบบ URL ที่ระบบจะเปิดใช้การเล่นอัตโนมัติเสมอ

แนวทางปฏิบัติแนะนำสำหรับนักพัฒนาเว็บ

องค์ประกอบเสียง/วิดีโอ

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

คุณควรดูสัญญาที่ฟังก์ชัน 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 มี 2-3 อย่างที่ควรทราบ ก่อนอื่น เป็นแนวทางปฏิบัติที่ดีที่จะรอให้ การโต้ตอบของผู้ใช้ก่อนเริ่มเล่นเสียงเพื่อให้ผู้ใช้รับรู้ สิ่งที่เกิดขึ้น ลองนึกถึง "การเล่น" หรือ "เปิด/ปิด" สวิตช์เป็นต้น นอกจากนี้ คุณยังเพิ่มปุ่ม "เปิดเสียง" ได้ด้วย โดยขึ้นอยู่กับขั้นตอนของแอป

หากสร้าง 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