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

Posted 2023-05-08

【中文标题】移动浏览器在加载 html5 背景视频时遇到问题

【英文标题】：mobile browsers having issues loading up a html5 background video

【发布时间】：2020-02-29 05:18:21

【问题描述】：

我在网站上有一个完整的背景 html5 视频自动播放。一些带有 Safari 的 ios 移动设备似乎在加载视频时出现问题，尽管大多数情况下它工作正常。它错误地显示以下内容：

我的代码如下：

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") />
              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") />
              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") 
          
          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 和三星浏览器上运行良好。

【参考方案1】：

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

正如这里提到的：Creating Video for Safari on iPhone：“为 iOS 托管媒体文件的 HTTP 服务器必须支持字节范围请求，iOS 使用它来执行媒体播放中的随机访问。（字节范围支持也称为内容范围或部分范围支持。）大多数（但不是全部）HTTP 1.1 服务器已经支持字节范围请求。”

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

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

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

【讨论】：

我不是视频格式专家，但是这个信息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在2019年还有效吗？这篇文章好像是很久以前的了。

@Kevvv 你可能是对的，我认为这篇文章Video codecs 就编解码器兼容性而言更可靠。

您是否使用 Nginx 来托管您的网站前端？

另外，Nginx 一定需要 Linux 吗？

我使用 Nginx 作为 Apache Tomcat 的反向代理。Tomcat 的主要角色是呈现我的 JavaServer 页面。如果您不想弄乱服务器配置，您可以在代码中手动为您的视频设置响应输出流的适当标头（我认为类似于“Accept-Ranges”和“Content-Range”）。