черный экран между постером и до воспроизведения видео в теге html5 video

Question

Я пытаюсь воспроизвести видео, однако я вынужден использовать более старую версию браузера Chrome (v35), и появляется черный экран, который отображается после исчезновения плаката и до воспроизведения видео,

const Tech = ({ t, i18n, history }) => {
   const videoRef1 = useRef();

   useEffect(() => {
    videoRef1.current.volume = 0.1;

    //add event listener to video for timeupdate event
    videoRef1.current.addEventListener("timeupdate", videoTimeUpdate, false);

    return () => {
      videoRef1.current.removeEventListener(
        "timeupdate",
        videoTimeUpdate,
        false
      );
    };
  }, []);

  // always shows video controls
  const videoTimeUpdate = e => {
    //set controls settings to controls,this make controls show everytime this event is triggered
    videoRef1.current.setAttribute("controls", "controls");
  };

  return (

  <Carousel
        id="carousel"
        indicators={false}
        interval={false}
        onSelect={e => {
          onSelectItem(e);
        }}
  >

       <Carousel.Item style={{ width: "100vw", height: "100vh" }}>
          <video
            ref={videoRef1}
            poster={require("../assets/de_Das_Aroma_G3_Mahlwerk.jpg")}
            style={{
              objectFit: "cover",
              minWidth: "100vw",
              minHeight: "80vh",
              width: "auto",
              height: "91vh"
            }}
            controls
            controlsList="nofullscreen nodownload"
            preload="true"
            loop
          >
            <source
              src={require("../assets/video/en_Das_Aroma_G3_Mahlwerk.mp4")}
              type="video/mp4"
            />
          </video>
      </Carousel.Item>
    </Carousel>
  )
}

любая помощь будет оценена.