uniapp中video全屏适配iOS和android

2024-07-07 11:57| 来源: 网络整理| 查看: 265

效果图全屏效果图正常显示

使用nuve创建页面

{{title}} import utils from '@/common/utils.js' export default { data() { return { title:"", url:"", videoContext: null, isIOS:false, }; }, onReady() { this.videoContext = uni.createVideoContext("myVideo", this); if(utils.devicesIsAndroid()){ /* 进入全屏 */ this.videoContext.requestFullScreen(); this.isIOS = false; }else{ this.isIOS = true; } }, onLoad(e) { this.title = e.title; this.url = e.videoUrl; }, methods:{ fullscreenchange(e){ if(!this.isIOS){ let chage = e.detail.direction /* 这里的思路就是在点击返回按键时会切换至竖屏，在这时候直接返回上一级页面，或者直接在屏幕方向改变调用返回也可 */ if(chage == 'vertical'){//此判断加不加都可 uni.navigateBack({ delta:1 }) } } }, back(){ uni.navigateBack({ delta:1 }) }, videoErrorCallback(e){ uni.showModal({ content: '视频资源加载错误', showCancel: false }) }, } } .video{ width: 750rpx; height: 600rpx; } .controls-title { height: 120rpx; flex-direction: row; align-items: center; } .titleBox{ color: #ffffff; font-size: 31rpx; margin-left: 10rpx; } .backBox{ margin-left: 40rpx; width: 50rpx; height: 50rpx; }

其中应用utils方法为，如果不想外部引用，也可以在methods中定义一个这个方法使用

function devicesIsAndroid(){ var res = uni.getSystemInfoSync(); var platform = res.platform; return (platform == 'android'); }

实现思路因为在android手机上直接调用全屏videoContext.requestFullScreen();是没有任何问题的，title设置也生效，也有返回按键，但是在iOS端如果屏幕竖屏锁定情况下不生效，所以在ios上显示全屏按钮，并使用cover-view组件嵌套image和text实现自定义title

【本文地址】

公司简介

联系我们