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

แซม ดัตตัน
แซม ดัตตัน

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

<video 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 แบบเคลื่อนไหว

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

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

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