当前位置:首页 > 牛文 > 正文内容

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

admin8年前 (2017-09-30)牛文5404

今天的第一个任务,就是要让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

扫描二维码推送至手机访问。

版权声明:本文由水墨优化网发布,如需转载请注明出处。

本文链接:https://www.ishnan.com/post/211.html

分享给朋友:
返回列表

上一篇:HTML 5 video 视频标签全属性详解

没有最新的文章了...

“HTML5/CSS/jQuery video大小屏幕自适应及获取视频宽高” 的相关文章

新交通警察手势信号视频

新交通警察手势信号视频

    从10月1日起,新的交通警察手势信号将在全国施行。新的交通警察手势信号增强了指挥的实用性,提高了交通警察的指挥效能,有利于保障道路交通的安全畅通,有利于树立交通警察良好的执勤执法形象。    新的交通警察手势信号,由原来的11种减少...

一个北京妞儿写的 太牛逼了 都进来瞅瞅

一个北京妞儿写的 太牛逼了 都进来瞅瞅

慢慢看别闲长。看完你肯定想看第二遍,写的真是太好了,这妞太有才了,绝对是真实的写照。个人认为这篇文章:女孩看了是自省,男孩看了是激励!我认为最经典的话:  要是我的男人真的就没那本事,我就忍了,弄不好他有了本事,我就没了他呢。他没逼我长成曼玉嘉欣,我没理由逼他盖过李嘉诚。OK 不废话了。开始.......

屏蔽主机屋广告

屏蔽主机屋广告

怎么能屏蔽主机屋的这个广告代码呢?其实简单的很,只是加上一个代码就可以了!,网站上传到空间以后。空间会自动在最后面加一上段代码的,只要我们在网页的最下面加上一个符号,就可以实现主机屋免费空间去广告的了,代码如下:<!--就这个东西,如果你的网站是静态页面的话,直接复制,黏贴到你网站<ht...

自定义Mime类型

自定义Mime类型

经常会遇到明明FTP路径上是有某个文档,但是访问路径时却没有那个文档,这里是Mime类型设置的问题原因是很多虚拟主机上是禁止主机使用下载如扩展名为:ZIP/RAR/,MP3/FLV等之类文件,怕占有主机的物理流量,其实想实现并不难,使用主机管理后台中的"自定义Mime类型",就可...

CM7将会正式支持xperia系列手机

CM7将会正式支持xperia系列手机

 简而言之,首先,索尼爱立信官方打算支持freexperia小组的发开,为他们提供技术支持,尤其是帮助他们解决一直未能解决的相机问题。其次,CM小组官方宣布将会在支持的产品列表里加入xperia系列(这离不开第一条的实现),而且freexperia小组也会成为CM小组的一部分。这下要给力了...

拍卖时间的女孩

拍卖时间的女孩

 这是今年他第三次见到叶春笙,上次见她,她穿着棉质的手绘T恤,素色的亚麻长裙,发间别着一朵鸡蛋花,仙森气十足。今天她一身闪耀的礼服,华丽得让他不自觉想起《了不起的盖茨比》里的黛西,那个拜金女人。而叶春笙看起来就是个拜金女孩,她用冰块捂着被打肿的脸颊,应当很疼,眉都皱起,神色却很平静,虽然在...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。