ปรับปรุงประสบการณ์ของผู้ใช้ ลดสิ่งจูงใจในการติดตั้งตัวบล็อกโฆษณา และลดปริมาณการใช้อินเทอร์เน็ต
นโยบายการเล่นอัตโนมัติของ Chrome มีการเปลี่ยนแปลงในเดือนเมษายน 2018 เราจึงขอแจ้งให้คุณทราบถึงสาเหตุและผลกระทบที่มีต่อการเล่นวิดีโอที่มีเสียง ระวังสปอยล์: ผู้ใช้จะต้องชอบแน่ๆ!
ลักษณะการทำงานใหม่
คุณอาจทราบแล้วว่าเว็บเบราว์เซอร์เปลี่ยนไปใช้นโยบายการเล่นอัตโนมัติที่เข้มงวดขึ้น เพื่อปรับปรุงประสบการณ์ของผู้ใช้ ลดสิ่งจูงใจให้ติดตั้งตัวบล็อกโฆษณา และลดการใช้ข้อมูลในเครือข่ายที่มีราคาแพงและ/หรือมีข้อจำกัด การเปลี่ยนแปลงเหล่านี้มีจุดประสงค์เพื่อให้ผู้ใช้ควบคุมการเล่นได้มากขึ้นและเป็นประโยชน์กับผู้เผยแพร่โฆษณาที่มีกรณีการใช้งานที่ถูกต้องตามกฎหมาย
นโยบายการเล่นอัตโนมัติของ Chrome มีดังนี้
- อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงเสมอ
- อนุญาตให้เล่นอัตโนมัติแบบมีเสียงในกรณีต่อไปนี้
- ผู้ใช้โต้ตอบกับโดเมน (คลิก แตะ ฯลฯ)
- บนเดสก์ท็อป มีการข้ามเกณฑ์ดัชนีการมีส่วนร่วมของสื่อของผู้ใช้ ซึ่งหมายความว่าผู้ใช้เคยเล่นวิดีโอที่มีเสียงมาก่อน
- ผู้ใช้ได้เพิ่มเว็บไซต์ลงในหน้าจอหลักในอุปกรณ์เคลื่อนที่หรือติดตั้ง PWA บนเดสก์ท็อป
- เฟรมยอดนิยมจะมอบสิทธิ์การเล่นอัตโนมัติให้กับ iframe เพื่ออนุญาตการเล่นอัตโนมัติแบบมีเสียงได้
ดัชนีการมีส่วนร่วมกับสื่อ
ดัชนีการมีส่วนร่วมของสื่อ (Media Engagement Index หรือ 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 และแอตทริบิวต์เล่นอัตโนมัติก็จะไม่มีผลเช่นกัน
ตัวอย่าง
ตัวอย่างที่ 1: ทุกครั้งที่ผู้ใช้เข้าชม VideoSubscriptionSite.com ในแล็ปท็อป พวกเขาจะดูรายการทีวีหรือภาพยนตร์ และเนื่องจากคะแนนการมีส่วนร่วมของสื่ออยู่ในระดับสูง
ระบบจึงอนุญาตให้แสดงการเล่นอัตโนมัติ
ตัวอย่างที่ 2: GlobalNewsSite.com มีทั้งเนื้อหาข้อความและวิดีโอ
ผู้ใช้ส่วนใหญ่ไปที่เว็บไซต์เพื่อดูเนื้อหาที่เป็นข้อความและดูวิดีโอเป็นครั้งคราวเท่านั้น
คะแนนการมีส่วนร่วมทางสื่อของผู้ใช้อยู่ในระดับต่ำ ดังนั้นจึงไม่อนุญาตการเล่นอัตโนมัติหากผู้ใช้นำทางจากหน้าโซเชียลมีเดียหรือการค้นหาโดยตรง
ตัวอย่างที่ 3: LocalNewsSite.com มีทั้งเนื้อหาข้อความและวิดีโอ
คนส่วนใหญ่เข้าเว็บไซต์ทางหน้าแรกแล้วคลิกบทความข่าว อนุญาตให้เล่นอัตโนมัติในหน้าบทความข่าวได้ เนื่องจากผู้ใช้โต้ตอบกับโดเมน อย่างไรก็ตาม ควรระมัดระวังเพื่อให้แน่ใจว่าผู้ใช้ไม่รู้สึกแปลกใจกับเนื้อหาที่เล่นอัตโนมัติ
ตัวอย่างที่ 4: MyMovieReviewBlog.com ฝัง iframe พร้อมตัวอย่างภาพยนตร์
พร้อมรีวิว ผู้ใช้โต้ตอบกับโดเมนเพื่อไปที่บล็อก
ดังนั้นจึงอนุญาตให้ใช้การเล่นอัตโนมัติ แต่บล็อกจะต้องมอบสิทธิ์นั้นอย่างชัดแจ้งให้กับ iframe เพื่อให้เนื้อหาเล่นอัตโนมัติ
นโยบาย Chrome Enterprise
คุณเปลี่ยนลักษณะการทำงานของการเล่นอัตโนมัติได้ด้วยนโยบาย Chrome Enterprise สำหรับกรณีการใช้งานต่างๆ เช่น คีออสก์หรือระบบที่ไม่ต้องดำเนินการใดๆ ไปที่หน้าความช่วยเหลือเกี่ยวกับรายการนโยบายเพื่อดูวิธีตั้งค่านโยบายองค์กรที่เกี่ยวข้องกับการเล่นอัตโนมัติ
- นโยบาย
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 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 คุณจะตรวจพบการเปลี่ยนแปลงแบบไม่พร้อมกันได้
ดูตัวอย่างได้จากคำขอแบบพุลขนาดเล็กที่แก้ไขการเล่นเสียง Web Audio ของกฎนโยบายการเล่นอัตโนมัติเหล่านี้ใน https://airhorner.com