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

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

答案是可行的。

[CSS] 纯文本查看 复制代码

video {
    height: 100%;
    width: 100%;
    display: block;
}

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

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

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

具体函数如下。

[JavaScript] 纯文本查看 复制代码

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

奈斯