reactjs - 制作一个 React-video 覆盖父容器？（反应玩家）

Question

我试图让我的视频适合/覆盖整个屏幕并响应调整大小，就像您使用objectFit: cover或backgroundSize: cover一样。现在视频过大可以看到左右两侧，窗口过小可以看到上下。

import React from "react";
import ReactPlayer from "react-player/lazy";

const Header = (props) => {
  return (
        <ReactPlayer
          muted={true}
          volume={0}
          playing={true}
          loop={true}
          width="100vw"
          height="100vh"
          style={{
            position: "absolute",
            objectFit: "cover",
            backgroundSize: "cover",
          }}
          url={props.videos[1]}
        />
  );
};

export default Header;

在这里您可以看到黑色背景：

太高了：

太宽：

容器大小为100vw，100vh，视频比例为4096x2160。

这是一个我试图不做的例子，因为视频随页面缩小：

https://jsfiddle.net/e6w3rtj1/131/

Answer 1

我找到了我的解决方案，由于某种原因 react-video 包不适用于 object-fit 或 background-size，所以我不得不尝试其他方法。

我发现您可以只使用 html5 视频和视频的源标签。

这里的代码：

<video
   autoPlay
   muted
   loop
   style={{ height: "100%", width: "100%", objectFit: "cover" }} //object-fit:cover
>
   <source src={props.videos[1]} type="video/mp4" />
</video>