我正在尝试制作全屏 HTML 背景,这很简单。但由于 HTML5 视频在保持宽高比的同时调整了大小以适合容器,因此我无法获得所需的效果。
HTML5 视频是否有不同的缩放模式?我想缩放以填充和裁剪。
这是在 Flash 中完成的所需效果: http://www.caviarcontent.com/
如果调整窗口大小,您会看到它缩放和裁剪。你永远不会出现黑条。
感谢您的帮助!
使用 CSS 实现此目的的另一种方法是使用 object-fit 属性。这适用于视频或 img 元素
video {
object-fit: cover;
}
http://dev.opera.com/articles/css3-object-fit-object-position/
这仅在 Chrome 31+ 中兼容,但它是最简单的 CSS 解决方案,并且是候选推荐。
您只需使用 CSS 即可做到这一点:
video {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
显然为转换属性使用适当的供应商前缀
奖励:要对图像执行此操作,您可以使用“background-size: cover;”将图像裁剪到所需的空间:
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(background-image.jpg) center;
background-size: cover;
}
我通过使用相同的函数解决了这个问题我在这里写过。
如果页面上有一个元素,这个 jQuery 调整大小功能会将视频缩放为浏览器窗口的全屏。
通过更改 browserHeight 和 browserWidth 变量,您可以缩放视频以适合 DIV(确保将该 DIV 设置为溢出:隐藏)。
此功能还将随浏览器窗口动态调整大小。
var sxsw = {
full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {
// Calculate new height and width...
var initW = imgWidth;
var initH = imgHeight;
var ratio = initH / initW;
imgWidth = boxWidth;
imgHeight = boxWidth * ratio;
// If the video is not the right height, then make it so...
if(imgHeight < boxHeight){
imgHeight = boxHeight;
imgWidth = imgHeight / ratio;
}
// Return new size for video
return {
width: imgWidth,
height: imgHeight
};
},
init: function() {
var browserHeight = Math.round(jQuery(window).height());
var browserWidth = Math.round(jQuery(window).width());
var videoHeight = jQuery('video').height();
var videoWidth = jQuery('video').width();
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
jQuery('video')
.width(new_size.width)
.height(new_size.height);
}
};
jQuery(document).ready(function($) {
/*
* Full bleed background
*/
sxsw.init();
$(window).resize(function() {
var browserHeight = Math.round($(window).height());
var browserWidth = Math.round($(window).width());
var videoHeight = $('.wd-thumb-list li a').eq(0).attr('data-wd-height');
var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width');
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
$('video')
.width(new_size.width)
.height(new_size.height);
});
});
仅使用 css 快速而肮脏:
video
{
width: 100%;
height: auto;
max-height: 100%;
}
我使用ExtJS 5来显示视频,以下代码有效!
```
var w = Ext.widget('window',{
renderTo: Ext.getBody(),
x : 10,
y : 10,
width: 480,
height: 670,
maximizable: true,
html: '<video style="width: 100%;height: auto;max-height: 100%;" controls playsinline autoplay muted loop><source src="'+url+'" type="video/mp4"></video>'
})
w.show()
```