移动端视频播放器UI控件位置适配全面屏
文章摘要
HeoGPT
这篇文章介绍了移动端视频播放器UI控件位置适配全面屏的方法,主要是通过计算状态栏的高度来进行适配,同时考虑到旋转屏幕时左右两侧的位置保持一致。此外,根据视频资源类型的不同,可以选择使用屏幕宽度比例或状态栏高度计算法来设置播放器按钮的位置。文章还展示了多个视频播放器的适配实例。
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉移动端适配全屏播放能考虑到是采用计算StatusBar的高度来进行适配。为了旋转屏幕时防止左侧旋转和右侧旋转位置位置不同,所以全屏状态下的左右两次均留出StatusBar的高度。
可以注意到bilibili的进度条距离左侧屏幕边缘约有52(44+8)pt。
(疑似采用状态栏高度计算的斗鱼)
(疑似采用状态栏高度计算的bilibili)
(疑似采用状态栏高度计算的爱奇艺)
当然,因为大多数视频资源均为16:9,所以部分播放器还可以考虑使用按照屏幕宽度进行比例计算设置播放器按钮的位置。来减少播放器控件直接显示在视频上而不是在视频、黑边各有一部分造成的割裂感。
(疑似采用屏幕宽度比例的优酷)
(疑似采用状态栏高度计算的腾讯视频)
采用何种适配方式主要取决于大多数资源的类型。如果大多数为电影等比例大于16:9的视频,那么使用按照状态栏高度计算法更加适合;如果大多数视频使用16:9的视频,那么使用屏幕宽度的比例计算方法更为合适。
- 感谢你赐予我前进的力量
打赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 张洪Heo
评论
生成评论
匿名评论
违规举报
✅ 你无需删除空行,直接评论以获取最佳展示效果