การเล่นเสียงและวิดีโอบนเว็บโดยอัตโนมัติเป็นความสามารถที่มีประสิทธิภาพ แต่ก็มีข้อจำกัดที่แตกต่างกันไปในแต่ละแพลตฟอร์ม
ปัจจุบันเบราว์เซอร์บนเดสก์ท็อปส่วนใหญ่จะอนุญาตให้หน้าเว็บเริ่ม<video>หรือ<audio>เล่นผ่าน JavaScript โดยไม่ต้องมีการโต้ตอบของผู้ใช้เสมอ
อย่างไรก็ตาม เบราว์เซอร์ในอุปกรณ์เคลื่อนที่ส่วนใหญ่กำหนดให้ต้องมีการใช้ท่าทางสัมผัสของผู้ใช้อย่างชัดเจนก่อนจึงจะเล่นวิดีโอที่ JavaScript เริ่มต้นได้ ซึ่งช่วยให้มั่นใจได้ว่าผู้ใช้อุปกรณ์เคลื่อนที่ซึ่งหลายคนต้องจ่ายค่าแบนด์วิดท์หรืออาจอยู่ในสภาพแวดล้อมสาธารณะจะไม่เริ่มดาวน์โหลดและเล่นสื่อโดยไม่ตั้งใจโดยไม่ได้โต้ตอบกับหน้าเว็บอย่างชัดเจน
ที่ผ่านมา การพิจารณาว่าจำเป็นต้องมีการโต้ตอบของผู้ใช้เพื่อเริ่มการเล่นหรือไม่ และการตรวจหาความล้มเหลวที่เกิดขึ้นเมื่อพยายามเล่น (อัตโนมัติ) และเล่นไม่สำเร็จนั้นเป็นเรื่องยาก มีหลายวิธีแก้ปัญหา แต่อาจไม่เหมาะ เราควรปรับปรุงวิธีการ play() พื้นฐานเพื่อจัดการกับความไม่แน่นอนนี้มานานแล้ว และตอนนี้เราก็ได้ดำเนินการดังกล่าวในแพลตฟอร์มเว็บแล้ว โดยเริ่มใช้งานใน Chrome 50
ตอนนี้การเรียก play() ในองค์ประกอบ <video> หรือ <audio> จะแสดงผลเป็น Promise หากเล่นสําเร็จ ระบบจะยอมรับ Promise และหากเล่นไม่สําเร็จ ระบบจะปฏิเสธ Promise พร้อมกับแสดงข้อความแสดงข้อผิดพลาดที่อธิบายสาเหตุของความล้มเหลว ซึ่งจะช่วยให้คุณเขียนโค้ดที่ใช้งานง่ายได้ เช่น
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
นอกจากการตรวจหาว่าเมธอด play() ประสบความสําเร็จหรือไม่แล้ว อินเทอร์เฟซแบบ Promise ใหม่ยังช่วยให้คุณระบุได้ว่าเมธอด play() ประสบความสําเร็จเมื่อใด มีบริบทที่เว็บเบราว์เซอร์อาจตัดสินใจที่จะเลื่อนเวลาเริ่มต้นการเล่น เช่น ในเดสก์ท็อป Chrome จะไม่เริ่มเล่น <video> จนกว่าแท็บจะปรากฏขึ้น Promise จะไม่ดำเนินการจนกว่าการเล่นจะเริ่มขึ้นจริง ซึ่งหมายความว่าโค้ดภายใน then() จะไม่ทำงานจนกว่าสื่อจะเล่น วิธีการก่อนหน้านี้ในการระบุว่า play() สำเร็จหรือไม่ เช่น รอเวลาที่กำหนดสำหรับเหตุการณ์ playing และถือว่าไม่สำเร็จหากไม่เกิดเหตุการณ์ดังกล่าว มีโอกาสที่จะได้ผลลัพธ์เป็นลบเท็จในสถานการณ์การเล่นที่ล่าช้า
เราได้เผยแพร่ตัวอย่างการใช้งานจริงของฟังก์ชันการทำงานใหม่นี้ ดูในเบราว์เซอร์ เช่น Chrome 50 ที่รองรับอินเทอร์เฟซแบบ Promise นี้ โปรดทราบว่าหน้าเว็บจะเล่นเพลงโดยอัตโนมัติเมื่อคุณเข้าชม (เว้นแต่ว่าจะไม่แสดง)
โซนอันตราย
<source> ภายใน <video> ทำให้ play() สัญญาว่าจะไม่ปฏิเสธ
สำหรับ <video src="not-existing-video.mp4"\> สัญญา play() ปฏิเสธตามที่คาดไว้เนื่องจากไม่มีวิดีโอ สำหรับ <video><source src="not-existing-video.mp4" type='video/mp4'></video> สัญญา play() จะปฏิเสธไม่รับ กรณีนี้จะเกิดขึ้นก็ต่อเมื่อไม่มีแหล่งที่มาที่ถูกต้องเท่านั้น