การเล่นเสียงและวิดีโอบนเว็บโดยอัตโนมัติเป็นความสามารถที่มีประสิทธิภาพ
และอยู่ภายใต้ข้อจำกัดที่แตกต่างกันในแพลตฟอร์มต่างๆ
ปัจจุบันเบราว์เซอร์ในเดสก์ท็อปส่วนใหญ่จะอนุญาตให้หน้าเว็บเริ่มเล่น <video> หรือ <audio> ผ่าน JavaScript โดยไม่ต้องมีการโต้ตอบของผู้ใช้
อย่างไรก็ตาม เบราว์เซอร์บนอุปกรณ์เคลื่อนที่ส่วนใหญ่จำเป็นต้องใช้ท่าทางสัมผัสของผู้ใช้อย่างชัดแจ้งก่อนที่การเล่นที่เริ่มต้น JavaScript จะเกิดขึ้นได้ วิธีนี้จะช่วยให้มั่นใจได้ว่าผู้ใช้อุปกรณ์เคลื่อนที่ ซึ่งหลายคนจ่ายค่าแบนด์วิดท์หรืออยู่ในสภาพแวดล้อมสาธารณะ อย่าเริ่มดาวน์โหลดและเล่นสื่อโดยไม่ได้ตั้งใจโดยไม่โต้ตอบกับหน้าเว็บอย่างชัดเจน
ที่ผ่านมานั้นการระบุได้ยากว่าจำเป็นต้องมีการโต้ตอบของผู้ใช้หรือไม่เพื่อเริ่มเล่น และการตรวจหาข้อผิดพลาดที่เกิดขึ้นเมื่อพยายามเล่น (อัตโนมัติ) และล้มเหลว มีวิธีแก้ปัญหาหลายอย่าง แต่ก็ไม่มีประโยชน์มากนัก การปรับปรุงเมธอด play() ที่ระบุเพื่อรับมือกับความไม่แน่นอนนี้เกินเวลาไปมากแล้ว และตอนนี้การเปลี่ยนแปลงนี้ก็นำมาซึ่งแพลตฟอร์มเว็บโดยได้ติดตั้งใช้งานใน Chrome 50 เป็นครั้งแรก
ตอนนี้การเรียก play() ในองค์ประกอบ <video> หรือ <audio> จะแสดงผลเป็น 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()
จะไม่ปฏิเสธเด็ดขาด ซึ่งจะเกิดขึ้นเฉพาะในกรณีที่ไม่มีแหล่งที่มาที่ถูกต้องเท่านั้น