video 宽高自适应_HTML5/CSS/jQuery video大小屏幕自适应及获取视频宽高
今天的第一个任务,就是要让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
打赏
支付宝
video 宽高自适应_HTML5/CSS/jQuery video大小屏幕自适应及获取视频宽高相关推荐
- Android 获取视频宽高
关于获取视频宽高 最近一次需求是上传视频,并根据上传视频的宽高展示横屏或者竖屏的video控件,最初是用MediaMetadataRetriever类来获取视频的宽高 // An highlighte ...
- app css导入字体大小,app设计中的字体行高
参考文章:https://www.jianshu.com/p/23963b31915d 在ui设计的过程中由于字体行高的导致设计的还原出现问题的地方挺多的. 例如我再sketch中设计两个16px的字 ...
- vue页面自适应屏幕宽高_Vue 实现大屏页面的屏幕自适应
1. 在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{ screen:{ width:1920, height:1080, scale:20 ...
- html css div 高度自适应,HTML/CSS中,DIV高度自适应解决办法
获取content高度 *{color:#fff} .header{ height: 40px; width:100%; position: fixed; top:0; left:0; backgro ...
- 【Unity3D-UGUI应用篇】(六)屏幕自适应(多分配率适配)
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
- 微信小程序 Video 播放视频,宽高设置
1. wxml文件 <view class="section"><video class= "videoCss" src='{{url}}' ...
- jquery设置video的宽度_jQ效果:jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- jquery+video 鼠标滑动标签切换video中的视频资源,暂停未播放视频
效果视频: https://v.qq.com/x/page/k3240mov9xh.html html代码: <div class="videoBox"><vid ...
- js获取video的时长_HTML5标签之lt;videogt;二次开发(一) — 为什么(后跟重要知识点!)...
说起video,相信大家对其还是挺熟悉了,HTML5新增标签.这个标签的作用讲就是一个视频播放器.而在它出来之前,网页千篇一律的使用flash播放器(因为没得选).但是讲道理,原生的video已经不能 ...
最新文章
- linux 下进入oracle,linux 下的oracle怎么启动
- 在linux中加固mysql_mysql在linux下的安装
- 【教程分享】Jmeter入门教程
- 软件测试管理要素分析
- 使用Notepad++编辑器查看二进制bin文件
- SpringBoot自动装配原理,这一篇就够了!
- 一元四次方程求根实现
- 通过Excel VBA对序列实现自动分级
- C++用unordered_map查表代替if else/switch case多判断语句
- apache2 不解析php,apache2不解析php怎么办
- 计算机主机通电启动不了,电脑不通电,开机没反应?这里有问题!
- 拒绝年费自己组建MarkdownNice转微信公众号格式神器
- 学习LSM(Linux security module)之四:一个基于LSM的简单沙箱的设计与实现
- Linux下TBB安装及编译
- 非标自动化机械设计行业未来发展趋势
- git命令上传和下载代码
- “yield”关键字有什么作用?
- 关于Indy TIdTCPServer控件出现 connection closed gracefully 错误的处理
- 陀螺仪器件选型MPU6050、BMX055、icm20602
- 有关路径规划入门的学习记录