如何解决停止在react-player使用HTML vide中播放视频海报吗?
我不希望海报图像占据该视频的整个尺寸,但要保持宽高比并居中。我该如何实现?
注意:这是一个片段。实际的代码是reactjs代码,用于嵌入视频的react player。我将使用config.file.attributes将所需的attrs发送到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>
解决方法
如果这是您的选择,则始终可以使用要使用的尺寸在视频周围创建包装器<div>
。使该div具有position: relative
。然后,您说视频有position: absolute
和width: 100%
(意味着它占据了其父级的可用空间的100%)。高度将自动适应,并且将尊重视频的长宽比。为了使视频居中,您可以在包装器div上使用display: flex; align-items: center;
。希望它能起作用!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。