CODEWITHSUNDEEP
htmlreactjsvideobackgroundhtml5-video
Kevvv
Kevvv

Reputation: 4023

mobile browsers having issues loading up a html5 background video

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: enter image description here

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.

Upvotes: 1

Views: 350

Answers (1)

dfotiou
dfotiou

Reputation: 571

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

Upvotes: 3

Related Questions