点击视频组件全屏播放按钮
r***@qq.com
- 发布：2024-10-23 16:38
- 更新：2025-09-23 16:15
- 阅读：416
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 4.29
手机系统： HarmonyOS NEXT
手机系统版本号： HarmonyOS NEXT Developer Beta2
手机厂商： 华为
手机机型： mate60
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
横屏全屏播放
横屏全屏播放
实际结果：
竖屏全屏播放
竖屏全屏播放
bug描述：
点击视频组件全屏播放按钮，无法横屏全屏播放，设置direction也无效果
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
目前使用下面方案来解决。
全屏下顶部导航栏始终展示。可针对播放页面做 custom 设置，使用自定义导航栏
全屏后视频不会自动横屏。新建 uts api 插件，使用下面代码进行设置。
使用附件里的工程，运行之前更换下证书。
补充：需要添加 style，避免图标大小变形
.uni-video-icon.uni-video-control-button.uni-video-control-button-pause::after,
.uni-video-icon.uni-video-control-button.uni-video-control-button-play::after{
font-size: 18px;
}
小雨不简单
您好 这样可以全屏了 还有点小问题 全屏后播放按钮大小有问题，有时进度条宽度也有点问题
2025-09-23 15:36
DCloud_UNI_OttoJi
回复 小雨不简单: 请贴个图片看下。
2025-09-23 15:37
小雨不简单
效果如图 https://fy-dev.oss-cn-hangzhou.aliyuncs.com/video/432a465e33d64dfe3fd466e432befe6a_compress.jpg
2025-09-23 15:40
DCloud_UNI_OttoJi
回复 小雨不简单: 播放暂停的图标有问题。进度条看着还可以？
2025-09-23 15:46
DCloud_UNI_OttoJi
回复 DCloud_UNI_OttoJi: 我测试下这个图标如何操作
2025-09-23 15:47
小雨不简单
回复 DCloud_UNI_OttoJi: 您好 示例中的视频复现不了进度条问题 换一个视频就复现了 https://fy-dev.oss-cn-hangzhou.aliyuncs.com/video/f493f4615056ce29300c602fceed95fb_compress.jpg
2025-09-23 16:00
DCloud_UNI_OttoJi
回复 小雨不简单: 请提供个 url 或者你自己尝试审查下元素，参考这个 https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#uni-app-%E9%B8%BF%E8%92%99%E8%B0%83%E8%AF%95
刚才的 按钮大小变化就是这样审查出来的，你看看顶部评论，先用上，汇总之后再修复
2025-09-23 16:18
小雨不简单
回复 DCloud_UNI_OttoJi: 好 我看一哈 谢谢了
2025-09-23 16:20