首页 » 牛文 » 正文

HTML5/CSS/jQuery video大小屏幕自适应及获取视频宽高

ishnan 2017年09月30日 牛文 2005 views 0

扫一扫用手机浏览

今天的第一个任务,就是要让Video的大小能够满屏(适应父级div),换言之要判断高度、宽度,使之能够达到全屏的效果。


在过去的一个版本中,我们要想满屏,写了一段长长的js文件,来取高度宽度对比,之后再计算,居中也要通过js计算得出缩进值——很显然,我觉得这样不合理嘛。浪费了这么多资源在适应上,在监听时不断改变,写入CSS,看着都心累,于是在想,能不能直接通过CSS解决这样一个问题呢(自适应+水平垂直居中)。


答案是可行的。


video {

    height: 100%;

    width: 100%;

    display: block;

}

height & width设置到100%,就能达到自适应的效果了,而display:block避免了出现滚动条的情况。


那么接下来,问题来了——本身我们的player,想要取图像的宽度高度时,直接调用height(),width()就可以取到,并进行定位,现在我们要怎么办呢?


实际上,在video标签中,有这样一个属性可以为我们使用:videoHeight&videoWidth,他获取的是video的高度和宽度(媒体本身),虽然不能直接使用,但我想,我们可以通过计算长宽比来解决这个问题。


具体函数如下。


function getVideoInfo () {

    var video = $('video');

    var videoH = video[0].videoHeight;

    var videoW = video[0].videoWidth;

    console.log("Height: " + video[0].videoHeight + ", Width: " + video[0].videoWidth);

    console.log("Height: " + videoH + ", Width: " + videoW);

    var videoRatio = videoH / videoW;

    console.log(videoRatio);

    window.onresize = function() {

        if (video.height() / video.width() > videoRatio) {

            console.log('Width:' + video.width() + ' Height: ' + (video.width() * videoRatio));

        } else {

            console.log('Width:' + video.height() / videoRatio + ' Height: ' + video.height());

        }

    }

}

这里我们使用window.onresize,这个可以监听窗口大小的变化,大小变化中判断来计算值,剩下的,不用多说。


https://codesky.me/archives/html5-css-video-height-width.wind

发表评论