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

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

François Beaufort
François Beaufort
GitHub

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

เลียม นีสัน: ฉันจะตามหาคุณและจะหยุดเล่นชั่วคราว
Sean Bean: One ไม่เพียงเล่นวิดีโออัตโนมัติเท่านั้น
พบมีมบนอินเทอร์เน็ตที่ติดแท็ก "autoplay" ใน Img Flip และ Imgur

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

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

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

ตัวอย่าง

ตัวอย่างที่ 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 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