การเล่นอัตโนมัติแบบปิดเสียงบนอุปกรณ์เคลื่อนที่ บอกลาการแฮ็ก Canvas และ GIF แบบเคลื่อนไหวได้เลย

Chrome สำหรับ Android รองรับฟีเจอร์เล่นอัตโนมัติแบบปิดเสียงสำหรับวิดีโอตั้งแต่เวอร์ชัน 53 เป็นต้นไป การเล่นจะเริ่มขึ้นโดยอัตโนมัติสำหรับองค์ประกอบวิดีโอเมื่อปรากฏขึ้นหากตั้งค่าทั้ง autoplay และ muted และสามารถเริ่มเล่นวิดีโอที่ปิดเสียงอยู่ได้จริงด้วย play() ก่อนหน้านี้ การเล่นบนอุปกรณ์เคลื่อนที่จะเริ่มด้วยท่าทางสัมผัสของผู้ใช้ ไม่ว่าสถานะปิดเสียงจะเป็นอย่างไรก็ตาม

<video playsinline autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

ดูการใช้งานจริงได้โดยไปที่ตัวอย่างนี้ การเล่นวิดีโอ muted จะเริ่มโดยอัตโนมัติใน Chrome 53 ขึ้นไป

ภาพหน้าจอของวิดีโอเพลเยอร์

นอกจากนี้ คุณยังเริ่มเล่นแบบปิดเสียงได้โดยใช้เมธอด play() ก่อนหน้านี้ play() จะเริ่มเล่นก็ต่อเมื่อวิดีโอมาจากท่าทางสัมผัสของผู้ใช้ เช่น การคลิกปุ่ม เปรียบเทียบการสาธิต 2 รายการต่อไปนี้ใน Android โดยลองใช้กับ Chrome 53 แล้วลองใช้กับเวอร์ชันเก่า

เราขอแนะนำให้ใช้แอตทริบิวต์ autoplay เมื่อเป็นไปได้ และเมธอด play() เฉพาะในกรณีที่จำเป็นเท่านั้น

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

การเปลี่ยนแปลง muted autoplay นี้ยังช่วยให้ใช้ play() กับองค์ประกอบ video ที่ไม่ได้สร้างขึ้นใน DOM ได้อีกด้วย เช่น เพื่อขับเคลื่อนการเล่น WebGL

นอกจากนี้ เมธอด play() ยังแสดงผลพรอมต์ ซึ่งสามารถใช้ตรวจสอบว่าเปิดใช้การเล่นแบบเป็นโปรแกรมที่ปิดเสียงไว้หรือไม่ ดูตัวอย่างได้ที่ simpl.info/video/scripted

เหตุผลในการเปลี่ยนแปลง

ฟีเจอร์เล่นอัตโนมัติถูกปิดใน Chrome เวอร์ชันก่อนหน้าบน Android เนื่องจากอาจเป็นฟีเจอร์ที่รบกวนผู้ใช้ หิวข้อมูล และผู้ใช้หลายคนไม่ชอบ

การปิดใช้การเล่นอัตโนมัติส่งผลให้นักพัฒนาซอฟต์แวร์เปลี่ยนไปใช้ทางเลือกอื่น เช่น GIF แบบเคลื่อนไหวและการแฮ็ก <canvas> และ <img> โดยไม่ได้ตั้งใจ เทคนิคเหล่านี้มีประสิทธิภาพต่ำกว่าวิดีโอที่เพิ่มประสิทธิภาพมากในแง่ของการใช้พลังงาน ประสิทธิภาพ ข้อกำหนดแบนด์วิดท์ ค่าใช้จ่ายของอินเทอร์เน็ต และการใช้หน่วยความจำ วิดีโอให้คุณภาพสูงกว่า GIF แบบเคลื่อนไหว, มีการบีบอัดที่ดีขึ้นมาก: โดยเฉลี่ยประมาณ 10 เท่า และดีที่สุดสูงสุด 100 เท่า สามารถถอดรหัสวิดีโอใน JavaScript ได้ แต่ก็จะทำให้ใช้พลังงานแบตเตอรี่มาก

เปรียบเทียบตัวอย่างต่อไปนี้ รายการแรกเป็นวิดีโอและรายการที่ 2 เป็น GIF แบบเคลื่อนไหว

การเล่นวิดีโอคลิป

วิดีโอและ GIF แบบเคลื่อนไหวดูคล้ายกันมาก แต่วิดีโอมีขนาดน้อยกว่า 200 KB และ GIF แบบเคลื่อนไหวมีขนาดมากกว่า 900 KB

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

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

รายละเอียดปลีกย่อย

  • การเล่นอัตโนมัติอาจเป็นปัญหาอย่างยิ่งจากมุมมองการช่วยเหลือพิเศษ Chrome 53 ขึ้นไปใน Android มีการตั้งค่าให้ปิดใช้การเล่นอัตโนมัติโดยสมบูรณ์ โดยเลือก "เล่นอัตโนมัติ" จาก "การตั้งค่าสื่อ"
  • การเปลี่ยนแปลงนี้ไม่มีผลกับองค์ประกอบ audio: การเล่นอัตโนมัติจะยังคงปิดอยู่สำหรับ Chrome ใน Android เนื่องจากการเล่นอัตโนมัติที่ปิดเสียงไว้นั้นไม่ค่อยมีประโยชน์สำหรับเสียง
  • การเล่นอัตโนมัติจะไม่ทำงานหากเปิดใช้โหมดประหยัดอินเทอร์เน็ต หากเปิดใช้โหมดประหยัดอินเทอร์เน็ต ระบบจะปิดใช้การเล่นอัตโนมัติในการตั้งค่าสื่อ
  • การเล่นอัตโนมัติแบบปิดเสียงจะใช้กับองค์ประกอบวิดีโอที่มองเห็นได้ในเอกสาร, iframe หรืออื่นๆ ที่มองเห็นได้
  • โปรดทราบว่าหากต้องการใช้ประโยชน์จากลักษณะการทำงานแบบใหม่ คุณจะต้องเพิ่ม muted เช่นเดียวกับ autoplay โดยเปรียบเทียบ simpl.info/video กับ simpl.info/video/muted

การสนับสนุน

  • Safari ใน iOS 10 ขึ้นไปรองรับการเล่นอัตโนมัติแบบปิดเสียง
  • เบราว์เซอร์ Firefox และ UC รองรับการเล่นอัตโนมัติไม่ว่าจะแบบปิดเสียงหรือปิดเสียงอยู่แล้ว และจะไม่บล็อกการเล่นอัตโนมัติทุกประเภท

ดูข้อมูลเพิ่มเติม