用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来不停获取窗口的大小速度可以自己设置。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐