解决uniapp ios播放本地视频不显示controls的问题、uni-app video开始播放如何设置默认全屏
一、uniapp ios播放本地视频不显示controls的问题
1、问题背景:在 app 上做视频课程缓存下载观看的功能,把视频下载,利用本地地址查看,在安卓是正常的,但是在 ios 时会没有 video 的 controls (暂停、全屏、进度条)那些
2、问题原因:不清楚,可能是 uniapp 设备适配的问题,试了好几个设备 - 安卓设备均正常、ios 设备均不正常
3、解决方案:后来想到既然 ios 不能显示 controls,我们使用 controls 主要也是为了展示全屏观看,那么能不能在播放视频的时候就默认 video 全屏展示播放呢 - 后来发现默认全屏之后,这个问题就解决了,神奇
二、uni-app video开始播放默认全屏
1、第一种方式:requestFullScreen() 方法
<video id="myVideo" :autoplay="true" :src="curVideoUrl" controls></video>
this.$nextTick(_ => {
let _myVideo = uni.createVideoContext('myVideo')
_myVideo && _myVideo.requestFullScreen()
})
// 获取 video 上下文 videoContext 对象
this.videoContext = uni.createVideoContext('video_play');
// 进入全屏状态
this.videoContext.requestFullScreen();
2、第二种方式:通过 style 设置宽高均 100%
<video id="video_play"
:src="videosrc"
loop="false"
autoplay="true"
object-fit="fill"
page-gesture="true"
controls="false"
style="height: 100%;width: 100%">
</video>