鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

视频课免费课排行榜短视频直播课软考学堂

全部课程软考华为认证厂商认证 IT技术 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

HarmonyOS webView视频横屏展示

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

HarmonyOS

2024-12-25 15:25:17

浏览

赞

收藏 0

回答 1

回答 1

按赞同

/

按时间

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

参考链接：

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

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onfullscreenenter9

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#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://xxx.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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

回复

2024-12-25 17:46:43

如何写精华回答，获更多曝光？

发布

相关问题

HarmonyOS webview如何让页面里的视频全屏横屏

842浏览 • 1回复待解决

HarmonyOS 怎么设置某个 page 横屏展示

647浏览 • 1回复待解决

HarmonyOS 视频切换至横屏后，视频没有占满全屏

1066浏览 • 1回复待解决

HarmonyOS 视频播放组件不支持横屏播放，有没有横屏播放解决方案

997浏览 • 1回复待解决

HarmonyOS web内加载的视频如何横屏全屏

880浏览 • 1回复待解决

沉浸式视频频道如何实现横屏视频全屏播放

1129浏览 • 1回复待解决

沉浸式视频频道如何实现横屏视频全屏播放？

732浏览 • 0回复待解决

HarmonyOS web容器video视频播放组件无法强制旋转横屏

786浏览 • 1回复待解决

HarmonyOS Video组件播放横屏视频时，当调用requestFullscreen函数全屏播放时，能否让视频也旋转到横屏，更好的适配屏幕

827浏览 • 1回复待解决

HarmonyOS 横屏播放问题

1434浏览 • 1回复待解决

在视频播放器播放时使竖屏播放切换为横屏播放如何更改视频的宽高？

10375浏览 • 1回复待解决

HarmonyOS video如何横屏播放？

1078浏览 • 1回复待解决

HarmonyOS 横屏后布局问题

1274浏览 • 1回复待解决

HarmonyOS 当PAD处于竖屏时旋转锁定，冷启动APP后，APP默认横屏展示，非旋转锁定的竖屏

710浏览 • 1回复待解决

请问下鸿蒙项目开发中，应该如何设置视频横屏/全屏呢？

14553浏览 • 1回复待解决

HarmonyOS 查询当前状态是横屏还是竖屏

1164浏览 • 1回复待解决

HarmonyOS用navigation替换router后，横屏的题目视频页面不能占满全屏

1076浏览 • 1回复待解决

HarmonyOS 如何让app支持横屏？

1041浏览 • 1回复待解决

HarmonyOS 相机旋转横屏拍照问题

1064浏览 • 1回复待解决

openharmony jsFA 如何横屏显示？

8134浏览 • 1回复待解决

HarmonyOS Canvas横屏后定位问题

605浏览 • 1回复待解决

HarmonyOS 如何横屏适配和跟随系统横竖屏切换

1094浏览 • 1回复待解决

HarmonyOS 折叠屏横屏下进入界面会出现由竖屏转横屏的旋转动画，这个动画怎么去掉

1002浏览 • 1回复待解决

如何获取当前是横屏还是竖屏啊？

5836浏览 • 1回复待解决

UIAbility如何动态代码设置横屏还是竖屏

1227浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

【FFH】如何配置横屏PageAbility，开发横屏应用 3回复

修复OpenHarmony系统相机应用横屏拍照按钮点不到的问题 0回复

鸿蒙首款平板电脑发布，横屏状态再度升级，无区别化转换 0回复

应用视频通话过程中的亮屏、灭屏控制方案 0回复

#创作者激励#stage模型中，横屏设置，以及其他配置参数详解 0回复

Copyright © 2005-2025 51CTO.COM 京ICP证060544版权所有未经许可请勿转载