в мобильных браузерах возникают проблемы с загрузкой фонового видео html5 - PullRequest
Новая
       12

в мобильных браузерах возникают проблемы с загрузкой фонового видео html5

1 голос
/ 03 ноября 2019

У меня на сайте полноэкранное HTML5-видео с автоматическим воспроизведением. Некоторые мобильные устройства iOS с Safari, похоже, испытывают проблемы с загрузкой видео, хотя в большинстве случаев это работает нормально. Он ошибочно показывает следующее: enter image description here

Мой код выглядит следующим образом: 

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 и Samsung на мобильных устройствах.

1 Ответ

3 голосов
/ 07 ноября 2019

У меня была такая же проблема с мобильными устройствами ios, и я решил ее.

Как уже упоминалось: Создание видео для Safari на iPhone : «HTTP-серверы, на которых размещаются медиафайлы для iOS, должны поддерживатьзапросы диапазона байтов, которые iOS использует для выполнения произвольного доступа при воспроизведении мультимедиа (поддержка диапазона байтов также известна как поддержка диапазона содержимого или частичного диапазона.) Большинство, но не все, серверы HTTP 1.1 уже поддерживают запросы диапазона байтов«.

Таким образом, вы должны проверить, использует ли ваш сервер кэширование в байтовом диапазоне, или перенастроить его (я сделал это с помощью nginx).

PS: Другой вторичной причиной несовместимости видео ios могут быть несовместимые кодекикаждого видео. Поддерживаются следующие стандарты сжатия:

-H.264 Базовое видео уровня профиля 3.0, до 640 x 480 при 30 кадрах в секунду. Обратите внимание, что B-кадры не поддерживаются в базовом профиле. -MPEG-4 часть 2 видео (простой профиль) -AAC-LC аудио, до 48 кГц

...