简体   繁体   中英

make autoplay work on IPAD and IPHONE

I have fullscreen video background, here is my code:

<div id="video-container">
        <video id="video" autoplay loop>
            <source src="ocean.mp4" type="video/mp4">
            <source src="ocean.ogv" type="video/ogg">
            <source src="ocean.webm" type="video/webm">
        </video>
</div>

how you see it has autoplay attrubute, but on IPAD, IPHONE,etc.. it doesn't work untill you click on play button, but when I add poster attribute for poster image it works:

<video id="video" poster="poster.jpg" autoplay loop>

But I don't want with poster. Also I tried to use this js code but no result:

function startVideo(){ 
        var myVideo = document.getElementById('video'); 
        if ((myVideo.playing) || (myVideo.currentTime > 0)) { 
                // video is already playing 
        } else { 
                myVideo.play(); 
        } 
}   
window.document.body.onload = startVideo;

I guess auto-play feature is not supported in iOS. Check this Apple documentation:

User Control of Downloads Over Cellular Networks

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.

Here is the documentation link

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM