HarmonyOS 鸿蒙Next webView下播放H5 video怎么做全屏监听
HarmonyOS 鸿蒙Next webView下播放H5 video怎么做全屏监听
项目中使用了webView播放H5视频功能，全屏播放按钮选中点击无效
2 回复
使用web组件加载一个html里的视频，当点击全屏时，通过html中的js和css无法实现横屏，可以通过web组件中监控点击全屏的回调里调用转屏方法在应用侧实现转屏，从而实现点击全屏按钮后横向全屏
参考链接：
demo：
import web_webview from '[@ohos](/user/ohos).web.webview'
import mediaquery from '[@ohos](/user/ohos).mediaquery';
import window from '[@ohos](/user/ohos).window';
import common from '[@ohos](/user/ohos).app.ability.common';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct MediaQueryExample {
[@State](/user/State) color: string = '#DB7093';
[@State](/user/State) text: string = 'Portrait';
[@State](/user/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('video.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>
针对HarmonyOS 鸿蒙Next webView下播放H5 video的全屏监听问题，以下是一些可能的解决方案：
在HarmonyOS中，webView播放H5视频时，全屏功能的实现通常依赖于H5页面的video标签和相关JavaScript事件。要实现全屏监听，你可以尝试以下方法：
-
监听全屏事件：
- 在H5页面中，为video标签添加fullscreenchange事件监听器。该事件会在元素进入或退出全屏模式时触发。
- 通过JavaScript在事件处理函数中执行相应的逻辑，如更新UI状态或记录日志。
-
配置webView：
- 确保webView已正确配置以支持全屏播放。
- 检查webView的mediaPlayGestureAccess属性，确保它不会阻止自动播放或全屏功能。
-
调试与测试：
- 在不同的设备和浏览器上测试全屏功能，以确保兼容性和稳定性。
- 使用HarmonyOS的开发者工具进行调试，查看是否有任何错误或警告信息。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
