Javascript HTML5 视频适合宽度或高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34591338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video fit width OR height
提问by stackinista
The width=100% height="auto"scales my videos to fit the whole width of the browser window, but if the height of the window is lower than the aspect ratio the video gets cropped in height.
该width=100% height="auto"扩展我的视频，以适应浏览器窗口的整个宽度，但如果窗口的高度比宽高比较低的视频被高度裁剪。
I want the video to scale to fit either width or height so that I can always see the whole video without crop, filling the closest ratio (adding empty space to sides if window ratio is lower).
我希望视频缩放以适合宽度或高度，以便我始终可以在不裁剪的情况下看到整个视频，填充最接近的比例（如果窗口比例较低，则向两侧添加空白空间）。
I can't figure out how to do this however.
First any height value, % or px, seems to be disregarded, I can't set the size at all using height, only width. Same for min-width/height.
但是，我无法弄清楚如何做到这一点。
首先，任何高度值，% 或 px，似乎都被忽略了，我根本无法使用高度设置大小，只能使用宽度。最小宽度/高度相同。
How can this be done?
如何才能做到这一点？
My code:
我的代码：
<video id="video" width=100% height="auto" onclick=playPause()></video>
Video is loaded by javascript where v is a video link from an array:
视频由 javascript 加载，其中 v 是来自数组的视频链接：
video.addEventListener('play', function() { v.play();}, false);
采纳答案by stackinista
Solved it myself with a javascript function:
自己用javascript函数解决了这个问题：
window.addEventListener('resize', resize, false);
video.height = 100; /* to get an initial width to work with*/
resize();
function resize() {
videoRatio = video.height / video.width;
windowRatio = window.innerHeight / window.innerWidth; /* browser size */
if (windowRatio < videoRatio) {
if (window.innerHeight > 50) { /* smallest video height */
video.height = window.innerHeight;
} else {
video.height = 50;
}
} else {
video.width = window.innerWidth;
}
};
回答by scaisEdge
Try wrapping the value inside quotes
尝试将值括在引号内
<div class="videoContainer">
<video id="video" width="100%" height="auto" onclick="playPause();"></video>
</div>
you can add these class
你可以添加这些类
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
Or alternatively use this
或者或者使用这个
video {
object-fit: cover;
}
回答by Mike Golub
I had a similar problem. I have made a `slideshow' with various objects as slides, some of them are videos of various sizes. I did not found any conceptual solution, so I have found a trick.
我有一个类似的问题。我制作了一个“幻灯片”，其中包含各种对象作为幻灯片，其中一些是各种大小的视频。我没有找到任何概念上的解决方案，所以我找到了一个技巧。
I have explicitely specified all real video sizes in tags and collected the information of all of them:
我已经在标签中明确指定了所有真实的视频大小并收集了所有这些信息：
var vids = document.getElementsByClassName("vid"); // videos
var vidl = vids.length;
var vidH = [ ];
var vidW = [ ];
// Get original widths and heights of videos
for (i=0; i<vidl; i++) { // >
vidH.push(vids[i].height);
vidW.push(vids[i].width);
}
Then (when necessary) I define the window size as follows:
然后（必要时）我定义窗口大小如下：
// Current inner height of the browser window (in pixels)
var iH = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// Current inner width of the browser window (in pixels)
var iW = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
To rescale a rectangle into another rectangle we have to find a minimal scale:
要将一个矩形重新缩放为另一个矩形，我们必须找到一个最小比例：
var r, rh, rw;
// Scale videos to fit window
for (i=0; i<vidl; i++) { // >
rh=iH / vidH[i]; rw=iW / vidW[i]; r=Math.min(rh, rw);
if (rh>rw) {
vids[i].height=Math.floor(vidH[i]*r);
vids[i].width=iW;
}
else {
vids[i].height=iH-5;
vids[i].width=Math.floor(vidW[i]*r);
}
}
Unfotunately, here appeared some extra space; in FireFox I have found its minimal value as 5 that I negate form windows height value (iH) as the new video size.
不幸的是，这里出现了一些额外的空间；在 FireFox 中，我发现它的最小值为 5，我将窗体窗口高度值 (iH) 否定为新的视频大小。
回答by Joel Karunungan
Duplicate issue on the height posted at HTML5 Video dimensions in Safari IOS
在 Safari IOS 中以HTML5 视频尺寸发布的高度上的重复问题
Pure CSS solution provided in: https://stackoverflow.com/a/60878701/2486998
纯 CSS 解决方案提供于：https: //stackoverflow.com/a/60878701/2486998
回答by kano
There's a great auto width/height trick called intrinsic ratiosthat can be used on images/videos and the likes! The trick is to have your desired element in a wrapper that then has a percentage-valued paddingapplied to it.
有一个很棒的自动宽度/高度技巧，称为固有比率，可用于图像/视频等！诀窍是将您想要的元素放在一个包装器中，然后应用一个百分比值的填充。
Your markup would then be:
您的标记将是：
<div class="video-wrapper">
<video class="video" id="video" onclick=playPause()></video>
</div>
And your CSS:
还有你的 CSS：
.video-wrapper {
position: relative;
padding-bottom: 20%;
height: 0;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc; /* Random BG colour for unloaded video elements */
}
You can limit the dimensions of your video container by playing with min-widthor max-widthof the .video-wrapperstyles.
您可以通过限制播放视频容器的尺寸min-width或max-width的.video-wrapper风格。
Hope this helps!
希望这可以帮助！
