文章/答案/技术大牛

发布

社区首页 >问答首页 >在react-player中停止视频海报拉伸(使用HTML视频)？

问在react-player中停止视频海报拉伸(使用HTML视频)？
EN

Stack Overflow用户

提问于 2020-10-21 20:34:52

回答 1查看 294关注 0票数 0

我不希望海报图像占据这段视频的全部尺寸，但要保持纵横比并居中。我怎样才能做到这一点呢？注意:这是一个代码片段。实际的代码是用于嵌入视频的reactjs code sing react player。我将使用config.file.attributes向s seen here发送所需的属性。使用style="object-fit=none"可以工作，但是对于react player来说这是可能的吗？

代码片段：

<!DOCTYPE html>
<html>
<body>

<h1>The video poster attribute</h1>

<video width="900" height="1240" poster="https://www.w3schools.com/images/w3schools_green.jpg" controls object-fit="none">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

</body>
</html>

reactjs

video

react-player

html

css

回答 1

Stack Overflow用户

发布于 2020-10-21 20:57:59

如果你愿意的话，你可以用你想要的尺寸在你的视频周围创建一个包装器<div>。使该div具有position: relative。然后，您可以说视频有position: absolute和width: 100% (这意味着它占用了父视频的100%可用空间)。高度将自动调整，视频的纵横比将得到尊重。要使视频居中显示，可以在包装器div上使用display: flex; align-items: center;。希望它能起作用！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64463648

复制

相似问题

问在react-player中停止视频海报拉伸(使用HTML视频)？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react-player中停止视频海报拉伸(使用HTML视频)？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react-player中停止视频海报拉伸(使用HTML视频)？
EN