HarmonyOS 鸿蒙Next Web组件加载的h5页面中的视频如何实现横竖屏切换

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

HarmonyOS 鸿蒙Next Web组件加载的h5页面中的视频如何实现横竖屏切换

Web组件加载的h5页面中的视频如何实现横竖屏切换

Harmonyos Next教程
2 回复
可以使用ArkUI的媒体查询接口实现横屏，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-mediaquery-V5

可以在web的onFullScreenEnter和onFullScreenExit回调中监听是否点击全屏的按键，在这两个回调里使用媒体查询接口实现视频横向和竖向，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onfullscreenexit9

当网页视频横向后需要在H5中设置横向宽高来适配使页面全屏，媒体查询接口只是让手机横屏。当网页视频横向后需要在H5中设置横向宽高来适配使页面全屏。ArkWeb基于chromium，支持FullScreen等w3c标准。

更多关于HarmonyOS 鸿蒙Next Web组件加载的h5页面中的视频如何实现横竖屏切换的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next Web组件加载的h5页面中，实现视频横竖屏切换，可以通过JavaScript和CSS结合的方式来完成。以下是基本步骤：

  1. 监听屏幕方向变化：使用JavaScript监听orientationchange事件或resize事件，获取当前屏幕方向（横屏或竖屏）。

  2. 设置视频全屏样式：根据屏幕方向，动态调整视频容器的CSS样式，比如通过transform属性旋转视频容器，以及调整容器的宽高比，确保视频内容在横竖屏切换时正确显示。

  3. 控制视频播放：在屏幕方向变化时，暂停视频播放，调整视频容器的样式后，再恢复播放，确保播放不会中断且画面正确。

  4. 用户交互：添加按钮或手势识别，允许用户手动切换横竖屏显示，增强用户体验。

示例代码（简化）：

window.addEventListener('orientationchange', function() {
    var video = document.querySelector('video');
    var isLandscape = window.orientation === 90 || window.orientation === -90;
    video.style.transform = isLandscape ? 'rotate(90deg)' : 'rotate(0deg)';
    video.style.width = isLandscape ? '100vh' : '100vw';
    video.style.height = isLandscape ? '100vw' : '100vh';
    video.pause();
    video.play();
});

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

回到顶部