mobile browsers having issues loading up a html5 background video - html

Question

I have a full background HTML5 video autoplaying on the website. Some iOS mobile devices with Safari seem to be having an issue loading the video up, although a majority of times, it's working fine. It erroneously shows the following:
My code is as follows:
const videoDisplay = () => {
let isMobile = {
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if(isMobile.any()) {
return (
<div className="fullscreen-video-wrap">
<video playsInline loop autoPlay muted poster="./media/landingpg_bg.jpg">
<source src={require("./media/video.mp4")} type="video/mp4" />
<source src={require("./media/video.webm")} type="video/webm" />
<source src={require("./media/video.ogv")} type="video/ogg" />
<img src={require("./media/landingpg_bg.jpg")} alt=""/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
)
} else {
return (
<div className="fullscreen-video-wrap">
<video playsInline loop autoPlay muted poster="./media/landingpg_bg.jpg">
<source src={require("./media/video.mp4")} type="video/mp4" />
<source src={require("./media/video.webm")} type="video/webm" />
<source src={require("./media/video.ogv")} type="video/ogg" />
<img src={require("./media/landingpg_bg.jpg")} alt=""/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
)
}
}
return (
<div className="v-header">
{videoDisplay()}
<Modal isOpen={modal} setModal={setModal} setFinishModal={setFinishModal} />
<FinishModal isOpen={finishModal} setFinishModal={setFinishModal}/>
<div className="menu">
<animated.img
className={`logo ${(modal || finishModal) && "invisible"}`}
src={require("./media/Renterii_logo_w.png")}
alt="renterii logo"
style={props}
/>
<animated.div
className={`notify ${(modal || finishModal) && "invisible"}`}
onClick={onClickHandler}
style={props2}
>
RENT ITEMS
</animated.div>
<animated.div
className={`social-media ${(modal || finishModal) && "invisible"}`}
style={props3}
>
</animated.div>
</div>
</div>
)
Computer browsers seem to be having no issues with the background video. So far it's been working fine with Firefox, Chrome, and Samsung browsers on mobile devices as well.

Answer 1

I had the same issue with the ios mobile devices and solved it.
As mentioned here : Creating Video for Safari on iPhone: "HTTP servers hosting media files for iOS must support byte-range requests, which iOS uses to perform random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests."
So you must check whether your server uses byte-range caching or else reconfigure it (I did it with nginx).
PS: Another secondary reason for ios video incompatibility could be the incompatible codecs of each video. The following compression standards are supported:
-H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
-MPEG-4 Part 2 video (Simple Profile)
-AAC-LC audio, up to 48 kHz