ปรับปรุงประสบการณ์ของผู้ใช้ ลดสิ่งจูงใจในการติดตั้งตัวบล็อกโฆษณา และลดการใช้ข้อมูล
นโยบายการเล่นอัตโนมัติของ Chrome มีการเปลี่ยนแปลงในเดือนเมษายน 2018 ผมอยากบอกเหตุผลและผลกระทบที่มีต่อการเล่นวิดีโอพร้อมเสียง ระวังสปอยล์ ผู้ใช้จะต้องชอบแน่ๆ
ลักษณะการทำงานใหม่
ดังที่คุณอาจทราบแล้ว เว็บเบราว์เซอร์กำลังเปลี่ยนไปใช้นโยบายการเล่นอัตโนมัติที่เข้มงวดขึ้นเพื่อปรับปรุงประสบการณ์ของผู้ใช้ ลดแรงจูงใจในการติดตั้งตัวบล็อกโฆษณา และลดการใช้ข้อมูลในเครือข่ายที่มีราคาแพงและ/หรือถูกจำกัด การเปลี่ยนแปลงเหล่านี้มีจุดประสงค์เพื่อให้ผู้ใช้ควบคุมการเล่นได้มากขึ้น และเป็นประโยชน์กับผู้เผยแพร่โฆษณาที่มีกรณีการใช้งานที่ถูกต้อง
นโยบายการเล่นอัตโนมัติของ Chrome มีความเรียบง่ายดังนี้
- อนุญาตให้ใช้การเล่นอัตโนมัติแบบปิดเสียงเสมอ
- ระบบจะอนุญาตให้เล่นอัตโนมัติพร้อมเสียงในกรณีต่อไปนี้
- ผู้ใช้ได้โต้ตอบกับโดเมน (คลิก แตะ ฯลฯ)
- ในเดสก์ท็อป ผู้ใช้ถูกข้ามเกณฑ์ดัชนีการมีส่วนร่วมกับสื่อ ซึ่งหมายความว่าผู้ใช้ได้เล่นวิดีโอพร้อมเสียงไปแล้วก่อนหน้านี้
- ผู้ใช้ได้เพิ่มเว็บไซต์ลงในหน้าจอหลักบนอุปกรณ์เคลื่อนที่หรือติดตั้ง PWA บนเดสก์ท็อปแล้ว
- เฟรมด้านบนสามารถมอบสิทธิ์การเล่นอัตโนมัติให้กับ iframe ของตนเพื่ออนุญาตให้เล่นอัตโนมัติพร้อมเสียง
ดัชนีการมีส่วนร่วมกับสื่อ
ดัชนีการมีส่วนร่วมกับสื่อ (MEI) จะวัดแนวโน้มของแต่ละบุคคลในการใช้สื่อบนเว็บไซต์ แนวทางของ Chrome คืออัตราส่วนการเข้าชมต่อเหตุการณ์การเล่นสื่อที่สำคัญต่อต้นทาง
- การรับชมสื่อ (เสียง/วิดีโอ) ต้องมากกว่า 7 วินาที
- ต้องแสดงและเปิดเสียง
- แท็บที่มีวิดีโอทำงานอยู่
- ขนาดของวิดีโอ (เป็นพิกเซล) ต้องใหญ่กว่า 200x140
จากนั้น Chrome จะคำนวณคะแนนการมีส่วนร่วมกับสื่อ ซึ่งสูงที่สุดในเว็บไซต์ที่มีการเล่นสื่อเป็นประจำ และเมื่อเล่นในระดับสูงพอ สื่อจะได้รับอนุญาตให้เล่น โดยอัตโนมัติบนเดสก์ท็อปเท่านั้น
MEI ของผู้ใช้จะอยู่ในหน้าเว็บภายใน about://media-engagement
สวิตช์ของนักพัฒนาซอฟต์แวร์
ในฐานะนักพัฒนาซอฟต์แวร์ คุณอาจต้องการเปลี่ยนลักษณะการทำงานของนโยบายการเล่นอัตโนมัติของ 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