HarmonyOS 鸿蒙Next webView视频横屏展示

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next webView视频横屏展示

webView中播放的视频想要横屏播放，鸿蒙原生需要如何支持才能让webView中的视频横屏 

Harmonyos Next教程
2 回复

1、当前在web里暂时不支持使用js或css来实现横屏，需要ArkUI的媒体查询接口实现横屏，可以在web的onFullScreenEnter和onFullScreenExit回调中监听是否点击全屏的按键，在这两个回调里使用媒体查询接口实现视频横向和竖向：

参考链接：

​​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-media-query-0000001860295785​​

​​https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web-0000001860247877#ZH-CN_TOPIC_0000001860247877__onfullscreenenter9​​

​​https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web-0000001860247877#ZH-CN_TOPIC_0000001860247877__onfullscreenexit9​​

当网页视频横向后需要在H5中设置横向宽高来适配使页面全屏，媒体查询接口只是让手机横屏

2、ArkWeb基于chromium，支持FullScreen等w3c标准，参考代码如下：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<div id="container">
<button onclick="fullScreen()">全屏</button>
<video controls id="myvideo">
<source src="somevideo.webm"></source>
<source src="https://static.foodtalks.cn/video/post/1f9d800c9cbe3088a8c2407de1ff8baac09d.mp4"></source>
</video>
</div>

<script>

function fullScreen() {
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
}
</script>

<style>
#myvideo {
width: 80%;
height: 50%
}

</style>

针对HarmonyOS 鸿蒙Next中webView视频横屏展示的问题，以下是一些专业解决方案：

  1. 监听全屏事件：

    • 利用webView的onFullScreenEnter()和onFullScreenExit()方法监听进入和退出全屏模式事件。
    • 在进入全屏模式时，设置窗口方向为横屏；在退出全屏模式时，恢复为竖屏。

  2. 设置窗口方向：

    • 通过Window提供的setPreferredOrientation()方法动态设置窗口方向。
    • 获取UIAbility实例的上下文信息，并调用该接口手动改变设备横竖屏状态。

  3. 媒体查询与布局适配：

    • 利用媒体查询接口检测设备横屏状态，从而调整页面布局和视频宽高以适应全屏。

  4. 配置文件设置：

    • 在module.json5文件中配置应用的默认旋转策略，如“auto_rotation”或“auto_rotation_restricted”，使应用具备横竖屏切换能力。

如果以上方法仍无法解决问题，请检查代码实现是否有误或webView组件是否有特定的限制。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部