它将被调整到500×250（按比例）
译文原链接：
前言：当网页载入时，自动播放的全屏配景视频 已经成为当前颇受欢迎的趋势。 就小我私家而言，我认为自动播放、质量好的视频会增加用户/客户的参预度。应该记住，视频的故事必需与品牌相关。 近年来，我们被FB和Twitter等社交网络上的大量视频所包抄。 据研究由此引起了用户更多的参预。
比来我不得不在一个网站上实现不异的成果，因此我决定构建一个用到 HTML5 视频元素并且易于使用的基于JS的插件，这个插件常在一个容器内部显示配景视频。 我已经将所有代码以及事情演示放在 Github- Bideo.js 上。此刻让我们来讨论一下在执行过程中所产生的一切工作，以及我在途中学习到了什么。
根基实现你会认为这些实现非常简单。 将HTML5 video 元素投入容器内并指定100％的宽度和高度。 好的，似乎合理但是不行，这有个例子： DEMO
您会注意到配景视频样式是中心对齐，并在两侧留下了大量的空白。 这是因为当您缩放（或调解巨细）视频元素时，它会按比例变动其尺寸。 所以如果一个视频是400×200，那么即使你的尺寸设置为500×400，也不会这样显示出来。 它将被调解到500×250（按比例）。
所以在这种情况下会产生的事是：首先实现高度100％的样式，并相应地计算宽度，因此最终呈现的效果不是父容器的100％。
因此这是我遇到的第一个问题，我开始通过检察差别站点的其他实现来找出解决方案。我但愿视频可以被设置为 CSS 的配景样式，然后我们可以像 background-size：cover / contains 这样的对象，但是不行，这是不成能的（也许将来）。不过这是我们需要的样式。 有些人认为这段代码会有用：
1
2
3
4
5
6
7
8
9
10
11
12
13
#container {
overflow: hidden;
height: 400px;
background: #edeae8;
position: relative;
}
video {
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
但这没啥用！ 您会注意到呈现不异的效果（按比例缩放），除了这一次它左对齐，而不是中心对齐 Demo 。
在这一点上，有些人可能会想知道为什么我必然要对父容器指定一个固定的高度。 这是因为在你浏览器有指定的宽高情况下，好比说 1920 1080，而今有一个 同等尺寸的视频那必定很便利，但如果来一个 2000 2000 辨别率的视频呢？你如何确保这个视频能够完整塞进浏览器中？因此非常有须要解决这个问题。
解决要领似乎JavaScript是解决这个问题的独一要领。 这个想法是获取容器的具体尺寸（宽度和高度），以及视频的尺寸，综合起来用来将视频缩放，确保它笼罩整个容器。 固然，由于比例从头调解，视频实际尺寸上可能比容器大，但不妨。 实际上，当视频宽或高被裁剪失一些部分时，它看起来并不糟糕。 我正在谈论的成果正是HTML5 中的 ==background-size: cover== 属性 所要做的工作，这意味着如果容器的尺寸与图像的尺寸弗成比例，此中一个尺寸将被剪切。
因此，在同一演示中，如果我们必需调解视频巨细，确保完全笼罩该容器，代码如下：
HTML：
1
2
3
4
5
<div id="container">
<video autoplay muted loop>
<source src="source.mp4" type="video/mp4">
</video>
</div>
CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* CSS */
* {
margin: 0; padding: 0;
}
#container {
overflow: hidden;
height: 400px;
background: #edeae8;
position: relative;
}
video {
position: absolute;
/* Vertical and Horizontal center*/
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
最后，JS 代码展示了视频尺寸如何按照窗口尺寸动态的调解巨细：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// JS
var video = document.querySelector('video')
, container = document.querySelector('#container');
var setVideoDimensions = function () {
// Video's intrinsic dimensions
var w = video.videoWidth
, h = video.videoHeight;
// Intrinsic Ratio
// Will be more than 1 if W > H and less if W < H
var videoRatio = (w / h).toFixed(2);
// Get the container's computed styles
//
// Also calculate the min dimensions required (this will be
// the container dimentions)
var containerStyles = window.getComputedStyle(container)
, minW = parseInt( containerStyles 大专栏 HTML5全屏配景视频与 CSS 和 JS（插件或库）.getPropertyValue('width') )
, minH = parseInt( containerStyles.getPropertyValue('height') );
// What's the min:intrinsic dimensions
//
// The idea is to get which of the container dimension
// has a higher value when compared with the equivalents
// of the video. Imagine a 1200x700 container and
// 1000x500 video. Then in order to find the right balance
// and do minimum scaling, we have to find the dimension
// with higher ratio.
//
// Ex: 1200/1000 = 1.2 and 700/500 = 1.4 - So it is best to
// scale 500 to 700 and then calculate what should be the
// right width. If we scale 1000 to 1200 then the height
// will become 600 proportionately.
var widthRatio = minW / w
, heightRatio = minH / h;
// Whichever ratio is more, the scaling
// has to be done over that dimension
if (widthRatio > heightRatio) {
var newWidth = minW;
var newHeight = Math.ceil( newWidth / videoRatio );
}
else {
var newHeight = minH;
var newWidth = Math.ceil( newHeight * videoRatio );
}
video.style.width = newWidth + 'px';
video.style.height = newHeight + 'px';
};
video.addEventListener('loadedmetadata', setVideoDimensions, false);
window.addEventListener('resize', setVideoDimensions, false);
最终效果： Demo
如果您阅读了JS代码中的注释，你会大白放大/缩小视频巨细的数学道理。
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30567.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")