微信小程序获取视口高度,设置 video 视频全屏显示

微信小程序获取视口高度

获取视口高度可用于设置视频全屏显示效果及其他效果显示

js中:(可以在onLoad中直接使用,或写入方法中)

 let that = this;// 获取系统信息wx.getSystemInfo({success: function (res) {   let clientHeight = res.windowHeight;// 窗口宽度let clientWidth = res.windowWidth; // 窗口高度let ratio = 750 / clientWidth; // 比例 这里的比例是对比 iPhone6/7/8而言 ,若在iPhoneX 也可以沿用此逻辑let height = clientHeight * ratio;// 高度(单位rpx)that.setData({// 高度 存储height: height});}});

wxml中:

<view class="videoPlay"><video id="video" src="{{视频路径}}" autoplay='true' loop='true' enable-progress-gestureshow-center-play-btn enable-play-gesture='true' style="height:{{height + 'rpx'}}"></video></view>

记得在 data中定义变量,我在这里定义了一个 height 但因为该数据是没有单位的,所以在使用时需要拼接单位哦
大功告成啦

微信小程序获取视口高度,设置 video 视频全屏显示相关推荐
1. 微信小程序页面添加背景图，图片全屏显示
  前言微信的wxss里面不允许使用使用 background: url(),只能另外找方法进行背景图片显示. 方法 1.wxss页面里面设置页面的全屏宽高,以及view添加宽高 page{height ...
2. 微信小程序获取滚动条高度_小程序超过高度加滚动条小程序尺寸规范
  DW里如何设置自适应屏幕高度,且内容超出时出现滚动条? 首先:打开DW并创建一个新的HTML页面.第二:为它的页面写一个div,类pingmu.第三,保存这个文件.第四:创建一个新的类样式,并为其Di ...
3. 微信小程序网络请求之设置合法域名后不显示oss、cos的图片问题
  一.开启oss防盗链设置把此https://servicewechat.com链接加入到防盗链中就可以访问由于网站图片都上传在了腾讯云COS,微信小程序端不显示网站图片原因: 腾讯云COS启用 ...
4. 微信小程序获取滚动条高度_小程序页面获取滚动条高度
  没有用过vue等MVVM的框架,直接开始做小程序,没有dom操作真是各种不适应,思维有时都转换不过来想要做的效果是很常见的滚动条超出某个元素时,该元素固定在顶部网上看到的获取滚动条高度及返回顶 ...
5. 微信小程序获取cookie以及设置cookie
  小程序开发中我们需要获取到后端给的cookie进行请求验证,但是微信并没有帮我们保存cookie,那么我们要维持会话需要自己来保存cookie,并且请求的时候加上cookie 1.获取cookie 在 ...
6. js设置背景视频全屏显示
  原理很简单,获取浏览器窗口尺寸对video标签进行设置,下边代码为react项目中视频背景, window.onresize = () => {const windowWidth = docum ...
7. 微信小程序获取状态栏高度
  // 获取导航栏高度wx.getSystemInfo({success: res=>{let custom = wx.getMenuButtonBoundingClientRect();this ...
8. 微信小程序：图片高度设置无效问题
  控制台查看元素,显示其style中多了一个没有设置的高度值找了很久发现是因为image标签设置了mode="widthFix",此时高度会自适应,样式中设置高度无效
9. 微信小程序获取页面高度
  watchHeight() {var query = wx.createSelectorQuery()//.box为指定类名高度query.select('.box').boundingClientR ...
最新文章
热门文章

微信小程序获取视口高度,设置 video 视频全屏显示

微信小程序 获取视口高度

获取视口高度 可用于设置视频全屏显示效果 及其他效果显示

微信小程序获取视口高度,设置 video 视频全屏显示相关推荐

最新文章

热门文章

微信小程序获取视口高度

获取视口高度可用于设置视频全屏显示效果及其他效果显示