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