解决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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
2020-11-17 从源码角度浅析Vue常见知识点
2020-11-17 Vue项目常见场景需求的解决方案
2020-11-17 浅析vue项目性能优化应该注意的点