移动浏览器在加载 html5 背景视频时遇到问题

Question

我有一个完整的后台 HTML5 视频在网站上自动播放。某些 iOS 带有 Safari 的移动设备似乎在加载视频时遇到问题，但大多数情况下，它工作正常。它错误地显示以下内容：

我的代码如下：

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>
  )

计算机浏览器似乎没有背景视频问题。到目前为止，它在 Firefox、Chrome 和移动设备上的三星浏览器上运行良好。

Answer 1

我在 ios 移动设备上遇到了同样的问题并解决了。

如此处所述：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."

所以你必须检查你的服务器是否使用字节范围缓存或者重新配置它（我用 nginx 做的）。

PS：ios 视频不兼容的另一个次要原因可能是每个视频的编解码器不兼容。支持以下压缩标准：

-H.264 Baseline Profile Level 3.0 视频，30 fps 时高达 640 x 480。请注意，基线配置文件不支持 B 帧。 -MPEG-4 第 2 部分视频（简单配置文件） -AAC-LC 音频，最高 48 kHz

移动浏览器在加载 html5 背景视频时遇到问题

mobile browsers having issues loading up a html5 background video

html

video

background

html5-video

reactjs