เล่นวิดีโอ HTML5 อัตโนมัติบน iPhone

ฉันมีปัญหาแปลก ๆ ฉันพยายามสร้างเว็บไซต์ด้วยวิดีโอพื้นหลังแบบวนซ้ำ รหัสมีลักษณะดังนี้:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

สิ่งนี้ทำงานได้ดีอย่างสมบูรณ์บนเบราว์เซอร์ส่วนใหญ่ (IE ต่อสู้กับสิ่งที่พอดีกับวัตถุนี้ แต่ฉันไม่รังเกียจ) แต่บน iPhone วิดีโอจะไม่เล่นอัตโนมัติ แต่บน iPad ก็ทำได้ ฉันอ่านนโยบายใหม่สำหรับ iOSแล้วและฉันคิดว่ามีคุณสมบัติตรงตามข้อกำหนด (มิฉะนั้น iPad จะไม่เล่นอัตโนมัติ) ฉันทำการทดสอบอื่น ๆ :

• การลบการซ้อนทับ Divs จะไม่สามารถแก้ไขได้
• การลบ z-index จะไม่สามารถแก้ไขได้
• Wifi หรือ Cellular ไม่ได้สร้างความแตกต่าง
• ขนาดไฟล์วิดีโอก็ไม่ได้สร้างความแตกต่างเช่นกัน

ฉันทำผิดหรือว่า iPhone ไม่เล่นวิดีโออัตโนมัติและต้องมีการโต้ตอบเสมอไป? ฉันสนใจเฉพาะ iOS 10 ฉันรู้ว่าข้อกำหนดนั้นแตกต่างกันใน iOS 9

ไม่playsinlineช่วยเหลือแอตทริบิวต์?

นี่คือสิ่งที่ฉันมี:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

ดูความคิดเห็นที่playsinlineนี่: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOs 10+ อนุญาตให้เล่นวิดีโออัตโนมัติแบบอินไลน์ แต่คุณต้องปิด "โหมดพลังงานต่ำ" บน iPhone ของคุณ

นี่คือการแฮ็กเล็ก ๆ น้อย ๆ ที่จะเอาชนะความดิ้นรนทั้งหมดที่คุณมีสำหรับการเล่นวิดีโออัตโนมัติในเว็บไซต์:

1. ตรวจสอบว่าวิดีโอกำลังเล่นอยู่หรือไม่
2. ทริกเกอร์การเล่นวิดีโอในเหตุการณ์เช่นการคลิกร่างกายหรือการสัมผัส

หมายเหตุ: บางเบราว์เซอร์ไม่อนุญาตให้เล่นวิดีโออัตโนมัติเว้นแต่ผู้ใช้จะโต้ตอบกับอุปกรณ์

ดังนั้นสคริปต์เพื่อตรวจสอบว่าวิดีโอกำลังเล่นอยู่หรือไม่:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

จากนั้นคุณสามารถเล่นวิดีโออัตโนมัติได้โดยแนบตัวฟังเหตุการณ์เข้ากับเนื้อหา:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

หมายเหตุ: autoplayแอตทริบิวต์เป็นพื้นฐานที่ต้องเพิ่มลงในแท็กวิดีโออยู่แล้วนอกเหนือจากสคริปต์เหล่านี้

คุณสามารถดูตัวอย่างการทำงานพร้อมโค้ดได้ที่ลิงค์นี้:

วิธีเล่นวิดีโออัตโนมัติเมื่ออุปกรณ์อยู่ในโหมดพลังงานต่ำ / โหมดประหยัดข้อมูล / ปัญหาเบราว์เซอร์ซาฟารี

ฉันมีปัญหาที่คล้ายกันและฉันลองวิธีแก้ปัญหาหลายวิธี ฉันแก้ไขโดยใช้ 2 ข้อพิจารณา

1. ใช้dangerouslySetInnerHtmlฝัง<video>โค้ด ตัวอย่างเช่น:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

2. ปรับขนาดน้ำหนักวิดีโอ ผมสังเกตเห็น iPhone ของฉันไม่ได้เล่นอัตโนมัติวิดีโอมากกว่า 3 เมกะไบต์ ดังนั้นฉันจึงใช้เครื่องมือคอมเพรสเซอร์ออนไลน์ ( https://www.mp4compress.com/ ) เพื่อเปลี่ยนจาก 4mb เป็นน้อยกว่า 500kb

นอกจากนี้ขอบคุณ@boltcoderสำหรับคำแนะนำของเขา: เล่นวิดีโอ HTML5 ที่ปิดเสียงอัตโนมัติโดยใช้ React บนมือถือ (Safari / iOS 10+)