无法使 MP4 电影高度更改并适合横向和纵向的 Material Box

Posted 2023-05-07

【中文标题】无法使 MP4 电影高度更改并适合横向和纵向的 Material Box

【英文标题】：Can't make an MP4 movie height to change and fit in Material Box both landscape and portait

【发布时间】：2022-01-09 08:36:19

【问题描述】：

我学习了 javascript React，但现在我在定位 MP4 电影时遇到了问题。 我有一个Codesandbox

检查文件 FileContentRenderer.jsx，其中 html5 视频与 MP4 一起使用。

我希望它适合Box 的纵向材质，比如说height: '20vw 和横向，但无论我尝试什么，我都无法改变它，我一定错过了一些基本的建议

像这样，这里的电影应该只是高度的 4 分之一，而不是这么高。 不管我怎么尝试这个高度都不能降低请指教？

我有这个材料 withStyles 不能让 MP4 看起来不错

const styles = theme => (
    viewerWrapperMp4: 
        background: 'black',
        width: '100%',
        height: '20vw',
        textAlign: 'center',
    ,
    viewerMp4: 
        width: 'auto',
        height: '100%',
    ,
    outer: 
        height: '100%',
        width: '100%',
        position: 'relative',
        overflow: 'hidden',
    ,
);

无论我尝试什么电影，电影不适合盒子

【问题讨论】：

您是否需要为所有具有任何宽高比的视频设置固定高度？

代码沙箱中有大量代码需要处理。如果您可以将沙箱简化为演示问题所需的最少代码量，将会有所帮助。

您想将视频放在固定的宽度和高度宽度内，还是只想调整视频容器的高度？你的问题不清楚！

@SoroushBgm 视频应调整宽度高度保持纵横比，但保持在 Material Box 边界。无论是纵向还是横向 基本上是一个普通的视频查看器。这仅用于在将视频上传到某处之前预览视频

也许我应该使用Material-ui video player。现在我使用htm5-video。我知道反应很难，尤其是 GUI 的

【参考方案1】：

我相信这段代码就是您要找的。 它保持高度和纵横比。它使视频居中。并且视频的宽度是可变的。

.video-container 
background: black;
width: 100%;
height: 20vw;
text-align: center;


.video 
width: auto;
height: 100%;

<div class="video-container">
 <video class="video" controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video> 
<div>

显然，当您的视频具有不同的宽高比时，您无法同时保持宽度和高度不变。其中之一必须是可变的。 此代码保持高度固定。

【讨论】：

谢谢，我想我尝试过类似的，但有一个ghost in the machine，因为视频无法调整大小。在这里，我尝试您的代码。我在树上向上看，看看是否还有其他 css sass，但我不这么认为 Video(small 2Mb) is big

这是我使用的小 2MB video

肯定不是鬼 :)) height: 20vw 使用整个窗口的宽度。尝试用另一个特定数量的像素替换它。喜欢 200 像素。

无法在Sandbox 中工作我一定错过了一些东西，因为我知道你的建议应该可以工作

【参考方案2】：

我已将您的代码更改为 this，在最终结果中，您应该将视频元素 CSS 更改为：

  maxHeight: "20vw";

【讨论】：

这似乎有效，但“MuiBox-root-44”的 44 号是什么

这感觉像是一个黑客，我在哪里可以读到这个？这是应用于应用程序中的所有材料MuiBox'，还是仅应用于直接父组件<CardContent？

我已经解决了你的问题。请参阅this。我在video-viewer.jsx 的视频元素中添加了一个类，并将其中的maxHeight 设置为20vw。

不客气。我很乐意提供帮助。太好了，你也可以在有问题的时候联系我。当然我会改变最终结果的答案。谢谢你。

谢谢，我不在 Facebook :) 甚至更多社交网络。只是信使。