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

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