video宽⾼⾃适应_HTML5CSSjQueryvideo⼤⼩屏幕⾃适应及
获取视频宽⾼
今天的第⼀个任务，就是要让Video的⼤⼩能够满屏(适应⽗级div)，换⾔之要判断⾼度、宽度，使之能够达到全屏的效果。
在过去的⼀个版本中，我们要想满屏，写了⼀段长长的js⽂件，来取⾼度宽度对⽐，之后再计算，居中也要通过js计算得出缩进值——很显然，我觉得这样不合理嘛。浪费了这么多资源在适应上，在监听时不断改变，写⼊CSS，看着都⼼累，于是在想，能不能直接通过CSS解决这样⼀个问题呢(⾃适应+⽔平垂直居中)。
答案是可⾏的。
jquery在线学习视频
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);
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());
}
}
}
这⾥我们使⽤size，这个可以监听窗⼝⼤⼩的变化，⼤⼩变化中判断来计算值，剩下的，不⽤多说。
打赏⽀付宝

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。