การเล่นอัตโนมัติแบบปิดเสียงบนอุปกรณ์เคลื่อนที่ บอกลาการแฮ็ก 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()เมธอดนี้ยังแสดงผล Promise ซึ่งใช้เพื่อตรวจสอบว่าเปิดใช้การเล่นแบบเป็นโปรแกรมที่ปิดเสียงอยู่หรือไม่ ดูตัวอย่างได้ที่ simpl.info/video/scripted

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

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

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

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

คลิปวิดีโอกำลังเล่น

โดยทั้ง 2 ไฟล์มีลักษณะคล้ายกันมาก แต่ไฟล์วิดีโอมีขนาดไม่ถึง 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 Browser ใน Android รองรับการเล่นอัตโนมัติอยู่แล้ว ไม่ว่าจะปิดเสียงหรือไม่ก็ตาม โดยไม่บล็อกการเล่นอัตโนมัติทุกประเภท

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