HarmonyOS 鸿蒙Next Web组件是否有Android下面WebChromeClient的onShowCustomView回调功能

【关键字】 Web组件 / Android / WebChromeClient / onShowCustomView / 回调

【问题描述】新闻详情是包含Web的，Web里面包含有视频，视频点击了全屏需要在新闻详情的一个控件中显示。现在没法实现一个回调，Android里面是在WebChromeClient里的onShowCustomView的回调实现的，鸿蒙不知道怎么实现？

【解决方案】可以使用ArkUI的媒体查询接口实现横屏，可以在web的onFullScreenEnter和onFullScreenExit回调中监听是否点击全屏的按键，在这两个回调里使用媒体查询接口实现视频横向和竖向。

示例代码如下：

import web_webview from '@ohos.web.webview'
import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import common from '@ohos.app.ability.common';

@Entry
@Component
struct MediaQueryExample {
@State color: string = '#DB7093';
@State text: string = 'Portrait';
@State portraitFunc:mediaquery.MediaQueryResult|void|null = null;
handler: FullScreenExitHandler | null = null
// 当设备横屏时条件成立
listener:mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
controller: web_webview.WebviewController = new web_webview.WebviewController()
onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
if (mediaQueryResult.matches as boolean) { // 若设备为横屏状态，更改相应的页面布局
this.color = '#FFD700';
this.text = 'Landscape';
} else {
this.color = '#DB7093';
this.text = 'Portrait';
}
}

aboutToAppear() {
// 绑定当前应用实例
// 绑定回调函数
this.listener.on('change', (mediaQueryResult:mediaquery.MediaQueryResult) => { this.onPortrait(mediaQueryResult) });
}

// 改变设备横竖屏状态函数
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)
});
}

build() {
Column() {
Web({ src: $rawfile('t1.html'), controller: this.controller })
.javaScriptAccess(true)
.domStorageAccess(true)
.onFullScreenEnter((event) => {
console.log("onFullScreenEnter...")
this.handler = event.handler
this.changeOrientation(true);
})
.onFullScreenExit(() => {
console.log("onFullScreenExit...")
if (this.handler) {
this.handler.exitFullScreen()
this.changeOrientation(false);
}
})
}
.width('100%').height('100%')
}
}

Html示例代码如下：

<!DOCTYPE html>
<html>
<head>
<title>浏览器全屏时横屏播放的demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}

video {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<video src="https://download.pingan.com.cn/mingyuanfund/2021_qinghuaci.mp4" autoplay controls></video>

<script type="text/javascript">
var video = document.querySelector('video');

// 进入全屏
function requestFullscreen() {
video.webkitRequestFullscreen();
return 1;
}

// 退出全屏
function exitFullscreen() {
document.webkitExitFullscreen();
return 0;
}

// 监听全屏变化事件
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {

// 进入全屏时，将视频旋转90度-->
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
} else {
// 退出全屏时，将视频旋转回来-->
video.style.transform = 'none';
video.style.width = '100%';
video.style.height = '100%';
}
});

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
if (document.fullscreenElement) {
// 窗口大小变化时，调整视频大小
video.style.width = '100vh';
video.style.height = '100vw';
}
});

// 点击播放按钮时，进入全屏
video.addEventListener('play', function() {
requestFullscreen();
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
});

// 点击退出按钮时，退出全屏
video.addEventListener('ended', function() {
exitFullscreen();
});
</script>
</body>
</html>

vueper 1楼•2 天前

HarmonyOS 鸿蒙Next Web组件没有直接等同于Android WebChromeClient的onShowCustomView回调功能。

在Android中，WebChromeClient的onShowCustomView回调通常用于处理网页中的视频或其他自定义视图在全屏模式下的显示。然而，在HarmonyOS鸿蒙Next中，Web组件的API和回调机制与Android有所不同。

为了实现类似的功能，开发者可以使用ArkUI提供的媒体查询接口来监听设备的横竖屏状态，并在Web组件的onFullScreenEnter和onFullScreenExit回调中处理全屏视频的显示。通过这些回调，开发者可以调整页面的布局，以适应全屏视频的播放。

如果开发者需要在HarmonyOS鸿蒙Next中实现类似Android WebChromeClient的onShowCustomView的功能，建议查阅最新的HarmonyOS开发文档，了解Web组件的API和回调机制，并据此进行开发。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。