当前位置：首页 > news >正文

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

news 来源：原创 2025/5/14 5:29:15

（此文讨论范围为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里已描述）