uni-app怎么实现App端内的强制横屏视频播放 uni-app全屏API控制方法 代码

作者:袖梨 2026-06-23
uni-app App端强制横屏播放视频必须通过plus.video原生模块实现,需配置manifest横屏、HTTPS视频源,并手动恢复竖屏。

uni-app App端强制横屏播放视频,得靠原生层配合

纯前端用 uni.setScreenOrientation 在App端对视频播放无效——这个API只影响页面整体方向,不接管<video>组件的渲染行为。iOS和Android对全屏视频有独立控制逻辑,必须走原生能力或插件。

使用 uni.createVideoContext 调用原生全屏方法失败?检查平台和组件属性

App端调用 videoContext.requestFullScreen() 失败,常见原因不是代码写错,而是:
<video> 组件没加 controls="false"(iOS要求禁用原生控件才能接管)
• 没设置 show-center-play-btn="false"show-play-btn="false"(uni-app自定义控件干扰)
• 视频源未通过HTTPS提供(iOS强制要求)
• 未在 manifest.json 中开启“横屏显示”:找到 "orientation": "landscape" 并设为 "landscape-primary""landscape"

真正能强制横屏播放的方案:用 uni-app-plus 调用原生API

需在 plus.video 原生模块下操作,仅限5+App环境。关键点:
• 必须用 plus.video.createPlayer 创建原生播放器实例,而非<video>标签
• 播放器初始化时传入 {position: {top: '0px', left: '0px', width: '100%', height: '100%'}, fullscreen: true}
• 调用 player.setFullscreen(true) 后,plus会自动旋转屏幕并拉伸画面
• 注意:该方式不支持H5和小程序,仅适用于打包后的App

if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') {  const player = plus.video.createPlayer('videoPlayer', {    position: { top: '0px', left: '0px', width: '100%', height: '100%' },    fullscreen: true  });  player.src = 'https://example.com/video.mp4';  player.play();}

横屏后返回竖屏状态不恢复?记得手动重置

原生全屏退出后,uni-app不会自动还原页面方向。若用户从横屏视频页返回,页面可能卡在横屏状态:
• 监听 plus.video.Player.onstatechanged,当 state === 0(idle)或 state === 4(ended)时,调用 plus.screen.lockOrientation('portrait-primary')
• 不要依赖 onUnload,因为全屏播放器是独立于Vue生命周期的
• Android上部分机型需额外调用 plus.navigator.setFullscreen(false) 配合

横屏播放最易被忽略的是 manifest 配置和 HTTPS 源校验,这两项任一缺失,iOS直接拒绝全屏请求,连错误日志都不抛。真机调试前务必确认这两点。

相关文章

精彩推荐