微信小程序视频组件ios端出现视屏区域黑屏

微信小程序中自定义组件video在ios端会出现从展示页面切到另一个页面上再回到展示页面时会黑屏的情况。

解决思路：在app.js中获取手机类型并定义isApple的全局变量 -> 在video的组件中使用show和hidden生命周期，在页面出现的时候重新加载一次解决。

app.js页面

App({onLaunch: function () {loginReq.login();// 自适应导航栏wx.getSystemInfo({success: (res) => {this.globalData.height = res.statusBarHeightlet clientHeight = res.windowHeight,clientWidth = res.windowWidth,rpxR = 750 / clientWidth;this.globalData.contentPadding = res.statusBarHeight * rpxR + 100,this.globalData.shareTop = res.statusBarHeight * rpxR + 122if (res.system.indexOf('iOS') > -1) {this.globalData.isApple = true;}else{this.globalData.isApple = false;}}})},globalData: {isApple:false,}
})

video页面

// component/video/video.js
Component({/*** 组件的属性列表*/properties: {attr: {type: Object,}},/*** 组件的初始数据*/data: {//苹果手机需要为true控制页面的展示show:true},//ios出现黑屏的情况pageLifetimes: {show: function () {//判断是苹果手机video重新展示if (getApp().globalData.isApple){this.setData({show: true})}},hide: function () {if (getApp().globalData.isApple) {this.setData({show:false})}}},// 组件的方法列表methods: {end1: function () {this.video.seek(0)},}
})

wxml页面在video标签添加wx:if判断即可

  <video  wx:if="{{show}}" id='video{{attr.moduleId}}'   object-fit="cover" poster="{{attr.attributeJson.screenShotUrl}}" bindended='end1' autoplay="{{attr.attributeJson.autoPlayBl}}" src="{{attr.attributeJson.videoUrl}}"  vslide-gesture-in-fullscreen controls ></video>

微信小程序视频组件ios端出现视屏区域黑屏相关推荐

微信小程序点播插件_微信小程序视频组件
video 组件视频组件相关的api :wx.createVideoContext 支持的格式: 支持的编码格式 video 组件的属性: src:类型字符串必填要播放视频的资源地址 (支持 ...
微信小程序：常用功能8——小程序视频组件中的弹幕功能
微信小程序:常用功能8--小程序视频组件中的弹幕功能昨天我们刚说了微信小程序的视频组件和分享功能微信小程序:常用功能8--在小程序添加视频组件,并将页面分享到朋友圈,今天想把弹幕功能说一下,但是感觉 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
微信小程序视频上传组件直接上传至阿里云OSS
一.微信小程序视频上传组件示例多视频上传功能,直传OSS,可以直接从OSS删除:组织接受以逗号分隔的视频url地址,自动列出多个视频,但点击上传按钮上传视频后,同样返回以逗号分隔的视频url地址. ...
即构微信小程序直播组件是什么？有哪些功能？哪些小程序类目可以使用？
即构直播助手是微信官方认证的微信小程序插件,为开发者提供便捷.强大的微信小程序音视频直播服务. 即构直播助手除了包含微信小程序下的音视频推拉流能力,还支持iOS.Android.Windows.Web ...
详细解析黑马微信小程序视频--【思维导图知识范围】
语言视频选择收录专辑链接 C 张雪峰推荐选择了计算机专业之后-在大学期间卷起来-[大学生活篇] JAVA 黑马B站视频JAVA部分的知识范围.学习步骤详解 JAVAWEB 黑马B站视频JAVAWEB ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

微信小程序视频组件ios端出现视屏区域黑屏

微信小程序视频组件ios端出现视屏区域黑屏相关推荐

最新文章

热门文章