如何解决让 React-video 覆盖父容器? 反应播放器
我正在尝试让我的视频适合/覆盖整个屏幕并响应调整大小,就像您使用 objectFit:cover > 或 backgroundSize:封面。现在当视频太大时,您可以看到视频的左侧和右侧,而当窗口太小时,您可以看到顶部和底部。
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/
解决方法
我找到了我的解决方案,由于某种原因,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。