用css+jquery实现视频永远占满全屏的效果(电脑端)
css代码核心
object-fit: fill;
jquery代码核心
//高度
var window_hegiht = $(window).height();
setInterval(
function kk() {
if (window_hegiht != $(window).height()) {
window_hegiht = $(window).height();
$("body").css("height", window_hegiht);
$("#video_box").css("height", window_hegiht);
}
console.log("高度:%d", window_hegiht);
},
1000);
//宽度
var window_width = $(window).width();
setInterval(
function kk() {
if (window_width != $(window).width()) {
window_width = $(window).width();
$("body").css("width", window_width);
$("#video_box").css("width", window_width);
}
console.log("宽度:%d", window_width);
},
1000);
原理
用css的 object-fit: fill; 使视频永远填满整个屏幕,然后用jquery来不停获取窗口的大小速度可以自己设置。