鸿蒙next播放B站视频横屏后的问题

发布于:2025-05-14 ⋅ 阅读:(15) ⋅ 点赞:(0)

(此文讨论范围为b站视频链接,且不包括b站直播链接;android/iOS的webview播放b站视频完全没有这么多问题)

1、竖屏播放没问题

从一个竖屏页p1点击进入视频页p2,p2页仍为竖屏;

p2页有一Web组件,以p1 pushUrl()时带的params里的b站链接进行构造;

此时显示一个播放界面,屏幕居中有一个大播放按钮,点击它或它以外的任意区域,均可以正常播放;暂停后,点击左下角小播放按钮,和屏幕正中的大播放按钮,均正常。

但是,在视频右下角有个全屏切换按钮,点它没有反应(这个可以解决,见2;但出现新的问题)。

2、竖屏时转横屏的办法

给Web加上全屏事件

        .onFullScreenEnter((event) => {
          console.log("onFullScreenEnter...")
          this.changeOrientation(true);
        })

其中changeOrientation方法如下:

// 改变设备横竖屏状态函数
  private changeOrientation(isLandscape: boolean) {
    // 获取UIAbility实例的上下文信息
    let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
    // 调用该接口手动改变设备横竖屏状态
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
    });
  }

这样点击b站视频右下角全屏切换按钮时,就会转入横屏。

但是,此时点击暂停(即点击屏幕任意区域),然后屏幕正中出现了大播放按钮,点击它没反应;而左下角的小播放按钮,点击是没问题的,重新播放。

3、直接横屏播放

视频大多是横屏的,为了提高体验,所以希望一进入p2就横屏。

如果在p2的onPageShow()里横屏,此时点击大播放按钮没反应,只能点击它之外的区域播放。

这和2里手工横屏的问题一样。

于是想到是不是横屏这个动作导致b站视频里的什么css或js没处理好,索性在p1就横屏,这样p2在Web构造前就横屏了;不幸的是,结果一样。

不知有没有人遇到这个问题,怎么解决的?请不吝赐教。

暂时就老老实实默认竖屏吧,然后想横屏自己点那个b站视频自带的横屏切换按钮(也就是说要在代码里按2来一下),不过它是有问题的(在2里已描述)


网站公告

今日签到

点亮在社区的每一天
去签到