width=100% height="auto"
缩放我的视频以适应浏览器窗口的整个宽度,但是如果窗口的高度低于宽高比,视频的高度就会被裁剪。
我希望视频缩放以适应宽度或高度,这样我就可以始终看到整个视频而不裁剪,填充最接近的比例(如果窗口比例较低,则向两侧添加空白空间)。
我不知道该怎么做。
首先,任何高度值,%或px,似乎都被忽略了,我根本不能用height设置大小,只能用width。min-width/height也是一样。
如何才能做到这一点?
我的代码:
<video id="video" width=100% height="auto" onclick=playPause()></video>
字符串
视频由JavaScript加载,其中v是来自数组的视频链接:
video.addEventListener('play', function() { v.play();}, false);
型
9条答案
按热度按时间4sup72z81#
尝试将值括在引号内
字符串
您可以添加这些类
型
或者用这个
型
hkmswyz62#
我自己用JavaScript函数解决了这个问题:
字符串
ftf50wuq3#
在Angular中,如果视频播放器(在我的例子中是shaka播放器)是一个单独的组件,这可以完美地工作(容器的高度或宽度都会导致播放器的大小调整)
HTML
字符串
CSS
型
u0njafvf4#
有一个很好的自动宽度/高度技巧,叫做intrinsic ratios,可以用在图像/视频等上!这个技巧是把你想要的元素放在一个 Package 器中,然后给它应用一个值填充。
您的标记将是:
字符串
你的CSS:
型
您可以通过使用
.video-wrapper
样式中的min-width
或max-width
来限制视频容器的尺寸。希望这有帮助!
esyap4oy5#
我也有类似的问题。我做了一个“幻灯片”,用各种各样的对象作为幻灯片,其中一些是各种大小的视频。我没有找到任何概念上的解决方案,所以我找到了一个技巧。
我在标签中明确指定了所有真实的视频大小,并收集了所有这些视频的信息:
字符串
然后(必要时)我定义窗口大小如下:
型
要将一个矩形重新缩放为另一个矩形,我们必须找到一个最小比例:
型
不幸的是,这里出现了一些额外的空间;在Firefox中,我发现它的最小值为5,我否定窗体窗口高度值(iH)作为新的视频大小。
dgjrabp26#
在HTML5 Video dimensions in Safari IOS上发布的高度上存在重复问题
提供的纯CSS解决方案:https://stackoverflow.com/a/60878701/2486998
j1dl9f467#
您可以添加样式:
字符串
knpiaxh18#
我在用户代理样式表中发现了这个样式设置,当直接在地址栏中打开mp4时:
字符串
只需将其添加到HTML中的视频标签中或任何您想要的内容中。
在Chrome和Edge中对我有效。
3zwjbxry9#
感谢qfactor77's answer,我被引导到*PERFECT*解决方案。它适用于宽度和高度,变得都**大于或小于视频的实际尺寸,以适应您将其放入的任何容器,而高度永远不会成为问题。
个字符
就这样你不需要别的东西
**注意:**Chrome会自动将
object-fit: contain;
应用于video
元素,因此您可以忽略它。但我还是将其包含在内,以确保在浏览器不应用它时也能应用它。**提示:**使用
object-fit
的其他值可以给予不同的结果,以确定视频如何放入其容器中。