BIDEO.JS
BIDEO.JS一个易于使用的基于js的全屏背景效果插件，它可以在HTML5视频元素上工作，并能在容器内显示背景视频。让我们讨论一下都在实施过程中的一些经验。
基本实现
也许你会认为这些实现非常简单。将HTML5视频元素投入容器内并指定100％的宽度和高度。好的，似乎合理但是不行，这样做导致的后果是....请看以下结论，错误场景展示如下：
/***css***/
* {
margin: 0; padding: 0;
}
#container {
overflow: hidden;
height: 400px;
background: #edeae8;
}
video {
width: 100%;
height: 100%;
}
/***html***/
<div id="container">
<video autoplay muted loop>
<source src="http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion-footage.mp4" type="video/mp4">
</video>
</div>
效果图如下：#_#
image.png
你会注意到，视频中心对齐，两边留下了大量的空白空间。这是因为当你缩放（或调整）一个视频元素时，它将相应地改变它的尺寸。所以，如果一个视频是400×200，那么即使你设置它的尺寸为500×400，它不会实现你想要的结果,而是它会调整到500×250（哦！(@^@）原来调整之后是按比例--500/250===400/200走的，MD!坑爹）。
解决方案
思路：通过js获得容器的计算尺寸（宽度和高度），以及视频的尺寸和一些基本的数值，在放大或缩小视频时，确保它覆盖整个容器。当然，由于比例重新调整，其中一个维度实际上可能比容器大，但这也OK。在实践中，当其中一个边缘被一些数量削减时，它看起来也没啥大问题。（还是有那么点误差的，但可以忽略哦）background-size: cover对图像而言，图像覆盖整个宽度或高度，保持长宽比，这意味着如果容器的尺寸与图像不成比例，图像尺寸就会被裁剪。
因此，在同一演示中（接着上面的），如果我们必须调整视频大小，确保完全覆盖该容器，那么修改下代码：
<!-- HTML -->
<div id="container">
<video autoplay muted loop>
<source src="source.mp4" type="video/mp4">
</video>
</div>
一些CSS（注意垂直方向以及水平中心对齐视频与顶部，左侧和变换）：
/* 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自动调整加载视频的大小以及窗口大小改变时：
// JS
var video = document.querySelector('video')
, container = document.querySelector('#container');
var setVideoDimensions = function () {
// 获取视频本身的宽度和高度
var w = video.videoWidth
, h = video.videoHeight;
// 获取视频的比例
var videoRatio = (w / h).toFixed(2);
// 获取容器的宽和高
var containerStyles = window.getComputedStyle(container)
, minW = parseInt( containerStyles.getPropertyValue('width') )
, minH = parseInt( containerStyles.getPropertyValue('height') );
//计算和调整容器比例
var widthRatio = minW / w
, heightRatio = minH / h;
//根据比例做调整
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);
以上js代码功能：大家想象一个1200x700容器与1000x500视频。1200/1000 = 1.2和700/500 = 1.4 ，明显不成正比，然后通过比例计算，容器高度将按比例变成600。
效果如下：#_#
image.png
看到效果图有没有感觉像图片属性background-size:cover的功能。(๑´ㅂ`๑)，综上所述，这个背景视频实现的功能并不复杂，就是通过计算视窗窗口与视频的比例，按照比例将最新的宽高赋值给视频的宽和高，然后结合css3定位达到背景视频的效果，（说白了就是障眼法，还以为很高大上呢）就是通过这么一个技巧让视频看起来实现背景图片那种效果。
网友评论